Как использовать jQuery UI tabs на странице WordPress?

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

У меня есть страница, которая представляет собой просто копию демо jQuery UI Tabs. Она не работает - список и все div видны, и нет самих вкладок. Я понимаю, что это потому, что мне нужен CSS, но на этом этапе я устал. Я не уверен, что наличие CSS решит проблему, и даже не знаю, как определить, проблема в CSS, JS или WP. До этого проекта мой блог "просто работал", и мне так нравится.

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

Если бы я разобрался, какой CSS нужен (спасибо еще раз, "документация" jQuery!), я мог бы заставить вкладки работать в локальном файле. В 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
(... остальная часть стандартного header.php TwentyTen ...)

ссылка на страницу

<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>Содержимое вкладки 1.</p>
    </div>
    <div id="tabs-2">
        <p>Содержимое вкладки 2</p>
    </div>
    <div id="tabs-3">
        <p>Содержимое вкладки 3</p>
    </div>
</div>

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

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

Что я упускаю?