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>

根据我正在使用的主题，标签位于sidebar-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的网站标签位于Flash标题（信息技术等）的正下方，但由于某种原因它们不起作用。任何帮助将不胜感激！

Answer 1

你在jQuery之前加载了标签和UI。只需在wp_head()之前的任何时候添加这行PHP：

wp_enqueue_script( 'jquery-ui-tabs' );

这将处理所有依赖关系并确保它们以正确的顺序加载。

编辑：

另外，删除这些脚本标记。但是请保留样式表。

Answer 2

使用Firebug或Safari Web Dev查看您获得的javascript错误。看起来你正在主jQuery库之前加载jQuery UI。

使用Wordpress，您需要正确排队脚本，而不是简单地将它们链接到header.php，esp。对于jQuery库和依赖于jQuery的其他脚本。

请参阅http://codex.wordpress.org/Function_Reference/wp_enqueue_script

作为该文档的一个例子，这可以在你主题的functions.php中找到：

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 3

- 如果您想将js和css标签代码放入模板中，请将其添加到functions.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'));

- 如果您使用插件，您可以这样做（我添加了添加许多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-用your_javascript_folder / your_javascript_file或jquery文件替换js/tabs.js

3-使用stylesheet_folder / your_tabs_stylesheet

替换css/jquery-ui-1.8.23.custom.css

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

jQuery UI选项卡不能与Wordpress一起使用

3 个答案: