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

Я хочу использовать вкладки пользовательского интерфейса 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();
});

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