Вкладки пользовательского интерфейса jQuery не работают с Wordpress

Question

Кажется, эта тема использует вкладки пользовательского интерфейса jQuery, но они не работают ...

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. Просто добавьте эту строку PHP в любое время до wp_head():

wp_enqueue_script( 'jquery-ui-tabs' );

Это позаботится обо всех зависимостях и убедится, что все загружается в правильном порядке.

EDIT:

Кроме того, удалите эти теги сценариев. Оставьте таблицу стилей, хотя.

Answer 2

- Если вы хотите поместить код вкладок 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 - замените 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 шорткод

Answer 3

Используйте Firebug или Safari Web Dev для просмотра ошибок JavaScript, которые вы получаете.Похоже, вы загружаете пользовательский интерфейс jQuery перед основной библиотекой jQuery.

И в 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');