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

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

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

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

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

header.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(); }); 

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

Solutions Collecting From Web of "Как использовать вкладки пользовательского интерфейса jQuery на странице WordPress?"

Короткий ответ заключается в том, что вам нужно включить jQuery UI CSS «Theme» с вашим кодом. Интерфейс пользовательского интерфейса jQuery на самом деле представляет собой комбинацию JavaScript и CSS (и похоже, что вы включили только JavaScript).

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

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

Чтобы немного увеличить мой ответ … Я рекомендую использовать 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 UI. Я еще не использовал плагин, который специально хочет поставить его в очередь самостоятельно. Поэтому в моем 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> 

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

WordPress.org больше не позволяет плагинам, которые загружают внешний интерфейс jQuery, поскольку он уже является пакетом с WordPress. Просто небольшое предупреждение для любого, кто разрабатывает новый плагин.

Yo мог использовать плагин ThePath Tabbed Widget для этого: JQuery UI Tabbed Widget WordPress Plugin

Добавьте в функции-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');