owenp
  • 0
Новичок

Как использовать вкладки пользовательского интерфейса jQuery на странице WordPress?

  • 0

Я хочу использовать вкладки пользовательского интерфейса jQuery на своих страницах WordPress 3.1.4. Я пишу учебные пособия по программированию для аудитории VB.NET, но мне также нравится предоставлять исходный код C#, и я хочу использовать вкладки, чтобы читатели могли переключаться между ними. Я, вероятно, мог бы выделить свое собственное время, но это должен был быть проект «узнать что-то о jQuery». Оказывается, это больше похоже на проект «WTF WordPress». Я едва разбираюсь в JS и пытаюсь это исправить. Я не гуру WP, и не хочу узнавать больше, чем мне нужно знать.

У меня есть страница, которая представляет собой не что иное, как копирование/вставку демонстрационных вкладок пользовательского интерфейса jQuery. Это не работает; список и все элементы div видны, а вкладок нет. Я знаю, что это потому, что мне нужно немного CSS, но это то, где я был измотан. Я не уверен, что наличие CSS заставит его работать, и я даже не знаю, как определить, в чем проблема — в CSS, моем JS или моем WP. Пока я не начал этот проект, мой блог «просто работал», и именно поэтому мне нравятся мои нерабочие вещи.

Первое, что я попробовал, это поместить Google CDN для jQuery в файл header.php моей темы. Я мог заставить работать оповещения, но что бы я ни делал, вкладки не появлялись. (Теперь я знаю, что это потому, что мне, очевидно, нужно было немного CSS. Спасибо, что не упомянули эту документацию по jQuery!) Итак, я начал проводить некоторые исследования и понял, что WP загружает jQuery, как и многие плагины (хотя я использую только Spam Karma и Askimet)..) Было логично, что, возможно, загрузка Google jQuery вызвала некоторую путаницу. После некоторых исследований я нашел несколько сайтов, которые предлагали поместить wp_enqueue_script() в мой заголовок. В документации перечислено множество скриптов, поэтому я добавил «jquery», «jquery-ui-core» и «jquery-ui-tabs». Я вижу тег script, загружающий jQuery (версия 1.4.4…) в моем заголовке, но другие теги, похоже, не действуют. Я понимаю, что он загружается в режиме «без конфликтов», поэтому вы используете «jQuery ()», когда обычно используете «$ ()». Я могу заставить работать оповещения, но не вкладки. Опять же, я подозреваю, потому что не похоже, что моя страница вообще пытается загрузить пользовательский интерфейс jQuery. Вероятно, это не имеет значения, потому что я не уверен, что WP поставляется с правильным CSS. Я видел несколько страниц, предлагающих загружать пользовательский интерфейс jQuery в нижний колонтитул страницы, другие, которые утверждают, что мне нужно добавить некоторые вещи, которые я не понимаю, в functions.php, и пару других решений из статей, слишком старых для доверять. Я не знаю, что попробовать дальше. m подозрительно, потому что не похоже, что моя страница вообще пытается загрузить пользовательский интерфейс jQuery. Вероятно, это не имеет значения, потому что я не уверен, что WP поставляется с правильным CSS. Я видел несколько страниц, предлагающих загружать пользовательский интерфейс jQuery в нижний колонтитул страницы, другие, которые утверждают, что мне нужно добавить некоторые вещи, которые я не понимаю, в functions.php, и пару других решений из статей, слишком старых для доверять. Я не знаю, что попробовать дальше. m подозрительно, потому что не похоже, что моя страница вообще пытается загрузить пользовательский интерфейс jQuery. Вероятно, это не имеет значения, потому что я не уверен, что WP поставляется с правильным CSS. Я видел несколько страниц, предлагающих загружать пользовательский интерфейс jQuery в нижний колонтитул страницы, другие, которые утверждают, что мне нужно добавить некоторые вещи, которые я не понимаю, в functions.php, и пару других решений из статей, слишком старых для доверять. Я не знаю, что попробовать дальше.

Если бы я немного поработал, чтобы выяснить, какой CSS мне нужен (еще раз спасибо, jQuery «документация»!) Я мог бы заставить вкладки работать с локальным файлом. В WP я использую тему TwentyTen; мои единственные изменения заключались в добавлении сценариев SyntaxHighlighter (которые я отключу, если кто-то скажет мне, что я достаточно близко, он должен работать, и они могут быть проблемой). Я только что обновился до WP 3.1.4 сегодня. Вот содержимое соответствующих файлов, вы можете просмотреть исходный код, чтобы увидеть, как выглядит HTML:

заголовок.php

<?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_enqueue_script("jquery-ui-tabs"); ?>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shCore.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
(... the rest of the default TwentyTen header.php ...)

связанная страница

<script>
jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 content.</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3 content</p>
    </div>
</div>

Я добавил вызов ready(), потому что мне было любопытно, не работает ли код из демонстрации. Я также пробовал этот вариант кода без радости:

jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});

Что мне не хватает?

Share
  1. Ядро поддерживает вкладки в дизайне. См. плагин для идентификации кода и стилей github.com/bueltge/wordpress-admin-style Однако вы должны добавить JavaScript для переключения между вкладками, если вам нравится этот способ. Также возможен способ перезагрузки через php.

    • 0
    • Да! Это оно! Единственное, на что у меня ушла минута, так это на то, чтобы и для пользовательского интерфейса jQuery шли после wp_head(); моя первая попытка попыталась загрузить пользовательский интерфейс jQuery до jQuery. Это неоптимально. Теперь все, что мне нужно сделать, это установить некоторые стили CSS; на данный момент я счастлив. Спасибо!

      • 0
    • Это неправда. Замена этих библиотек по-прежнему разрешена во внешнем интерфейсе. Это просто не рекомендуется по уважительным причинам.

      • 0
  2. Короткий ответ заключается в том, что вам нужно включить CSS-тему jQuery UI в свой код. Фреймворк пользовательского интерфейса jQuery на самом деле представляет собой комбинацию JavaScript и CSS (и похоже, что вы включили только JavaScript).

    В качестве быстрого теста я просто применил тему «Base» к вашему коду здесь. (Обратите внимание, что на боковой панели в разделе «Управление ресурсами» есть ссылка на файл jqueryui.css, размещенный в Google).

    Пользовательский интерфейс jQuery имеет множество готовых тем, которые вы можете использовать. (см. вкладку «Галерея»). Или вы можете свернуть свой собственный! Довольно гибкий.

    Чтобы немного удлинить мой ответ… Я рекомендую использовать CDN Google вместо встроенных файлов jQuery по двум причинам.

    1. Вы получите новые версии
    2. Это будет быстрее

    Но ваше исследование верно… Вы не хотите просто включать ссылку jQuery CDN в свой заголовок, потому что тогда WordPress не узнает, что вы уже включили ее! (И вы получите конфликты с другими плагинами, которым требуется jQuery). Простое решение — добавить следующий фрагмент кода в файл functions.php:

    // custom script queues
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false);
        wp_enqueue_script('jquery');
    }
    

    Этот код в основном говорит WordPress игнорировать собственную версию jQuery, использовать ссылку, которая у вас есть, а затем поставить ее в очередь! (Теперь, если другой плагин «запрашивает» jQuery через WordPress API, он будет знать, что он уже загружен и готов к работе).

    Лично я не беспокоюсь об этом с пользовательским интерфейсом jQuery. Я еще не использовал плагин, который специально хочет ставить его в очередь самостоятельно. Итак, в свой header.php я сам включил его вместе с темой, которая мне нравится:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    

    Удачи тебе с твоим проектом!

    • 0
  3. WordPress уже имеет множество эффектов пользовательского интерфейса. документация

    Шаг 1. Добавляем эффект в functions.php файл темы

    function add_theme_scripts() {
        wp_enqueue_script("jquery-ui-tabs");
    }
    add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
    

    Шаг 2. Добавьте HTML

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>
      <div id="tabs-1">
        <p>Tab 1</p>
      </div>
      <div id="tabs-2">
        <p>Tab 2</p>
      </div>
      <div id="tabs-3">
        <p>Tab 3</p>
      </div>
    </div>
    

    Шаг 3: Добавьте скрипт вfooter.php

    <script>
    jQuery(document).ready(function($) {
        $('#tabs').tabs();
    })    
    </script>
    
    • 0
  4. Для этого можно использовать плагин ThePath Tabbed Widget: Плагин Jquery UI Tabbed Widget WordPress Plugin

    • 0
  5. Добавьте следующее в functions-user.php

    function my_scripts_method() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    
        wp_deregister_script( 'jquery-ui-core' );
        wp_register_script( 'jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js');
        wp_enqueue_script( 'jquery-ui-core' );
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    
    
    function my_stylesheets_method(){
        wp_register_style('myStyleSheets', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css');
        wp_enqueue_style( 'myStyleSheets');
    }
    add_action('wp_print_styles', 'my_stylesheets_method');
    
    • 0
  6. WordPress.org больше не поддерживает плагины, которые загружают внешний пользовательский интерфейс jQuery, поскольку он уже входит в состав WordPress. Просто небольшое предупреждение для тех, кто разрабатывает новый плагин.

    • 0

Оставить ответ

You must login to add an answer.