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