jQuery UI的標籤不與WordPress

Question

這個主題，我發現好像是使用jQuery UI選項卡，但他們沒有工作的工作...

的header.php有：

<link type="text/css" href="<?php bloginfo('template_url'); ?>/css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-ui-1.8.4.custom.min.js"></script> 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script> 

根據主題我使用的標籤是在側邊欄1.PHP，所以我有這樣的代碼：

<script type="text/javascript"> 
    $(function(){ 
     $('#tabs').tabs(); 
    }); 
</script> 

<div class="tab"> 
    <ul> 
     <li class="active"><a href="#tabs-1">Welfare Services</a></li> 
     <li><a href="#tabs-2">Education Services</a></li> 
     <li><a href="#tabs-3">Social Enterprise</a></li> 
    </ul> 
    <div id="tabs-1">Tab 1 content</div> 
    <div id="tabs-2">Tab 2 content</div> 
    <div id="tabs-3">Tab 3 content</div> 
</div> 

網站在www.wickedflava.com/ps的標籤僅僅是閃存頭（信息技術等）之下，但他們不這樣做爲某些reaso工作ñ。任何幫助，將不勝感激！

Answer 1

使用Firebug或Safari Web Dev查看您收到的JavaScript錯誤。看起來像在主jQuery庫之前加載jQuery UI。

而在Wordpress中，您需要正確排隊腳本，而不是簡單地將它們鏈接到header.php中，尤其是，用於jQuery庫和依賴於jQuery的其他腳本。

見http://codex.wordpress.org/Function_Reference/wp_enqueue_script

自該文檔的例子，這正好在你的主題的functions.php：jQuery的前

function my_scripts_method() { 
    wp_enqueue_script(
     'custom-script', 
     get_template_directory_uri() . '/js/custom_script.js', 
     array('jquery') 
    ); 
} 
add_action('wp_enqueue_scripts', 'my_scripts_method'); 

Answer 2

你裝載片和UI。只需添加這行PHP的wp_head()前的任何時間：

wp_enqueue_script('jquery-ui-tabs'); 

這將需要所有的依賴護理，並確保所有負載以正確的順序。

編輯：

此外，刪除這些腳本標記。不過，留下樣式表。

Answer 3

- 如果您想將js和css標籤代碼放入模板中，請將其添加到函數中。PHP：

function my_scripts_method() { 
    if (!is_admin()) { 
     wp_enqueue_script('jquery-ui-tabs'); 
     wp_enqueue_script('custom-script',get_template_directory_uri() . '/add-tabs/js/tabs.js',array('jquery')); 
    } 
} 
add_action('wp_enqueue_scripts', 'my_scripts_method'); 

注：我相信你可以使用

wp_enqueue_script('your_custom_script1',get_template_directory_uri() . '/js/tabs.js', __FILE__));

，而不是

wp_enqueue_script('your_custom_script1',get_template_directory_uri() . '/js/tabs.js',array('jquery'));

- 如果你正在使用一個插件，你可以這樣做（我添加了額外的例子dding很多js文件和樣式表）

function tabs_scripts_method() { 
    if (!is_admin()) { 
     wp_enqueue_script('jquery-ui-tabs'); 

     wp_register_script('your_custom_script1',plugins_url('js/tabs.js', __FILE__)); 
     wp_enqueue_script('your_custom_script1'); 

     wp_register_script('your_custom_script2',plugins_url('js/tabs.js', __FILE__)); 
     wp_enqueue_script('your_custom_script2'); 

     wp_register_style('your_custom_stylesheet1', plugins_url('css/jquery-ui-1.8.23.custom.css', __FILE__)); 
      wp_enqueue_style('your_custom_stylesheet1'); 
    } 
} 
add_action('wp_enqueue_scripts', 'tabs_scripts_method'); 

注：

1-確保wp_enqueue_script('jquery-ui-tabs');是您的自定義腳本之前，因爲它有時會發生衝突，如果你將其添加自定義腳本下面

2-將js/tabs.js替換爲your_javascript_folder/your_javascript_file或jquery文件

3-替換css/jquery-ui-1.8.23.custom.css與stylesheet_folder/your_tabs_stylesheet

4-因爲你正在使用的功能plugins_url('....', __FILE__))，所以你並不需要，因爲你是從調用該插件文件夾中的文件中寫入該插件文件夾的名稱。你也可以使用其他方式如：plugins_url().'your_plugin_folder_name/your_javascript_folder/your_javascript_file';

在側邊欄使用它的推薦使用的插件一個 只需要添加一行代碼在functions.php

add_filter('widget_text', 'do_shortcode');

這將幫助你使用簡碼用任何文本按鈕區（如果您製作簡碼） 此鏈接將指導您如何創建簡碼wordpress.org shortcode