1. Для начала убедитесь, что в блоге подключена библиотека jQuery.
Как подключить jQuery?
Для начала
скачиваем библиотеку jQuery с сайта разработчиков.
В большинстве браузеров скачивается файл, название которого выглядит примерно так: jquery-1.4.2.min.js
Однако в некоторых браузерах этот файл не скачивается, а открывается, как обычный текстовый. И это понятно, ведь он и является по сути обычным текстовым файлом.
Если вместо скачивания файл пытается открыться, то в окне, которое показывает содержимое этого файла, скопируйте путь к нему, а потом воспользуйтесь менеджером закачки.
Обычно js-скрипты записываются в специальную папку, которая находится в папке с вашей темой.
При открытии страниц блога в браузере первым делом загружается все, что прописано в файле header.php (находится в папке вашей темы оформления). Вот с этим файлом и будем работать. Откройте его и найдите такие строчки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
Вот сразу после них нужно вставить указание подгружать библиотеку jQuery:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>
Обратите внимание на эту строчку, особенно на то, что записано в простых скобках внутри src="..." — это путь к библиотеке, которую мы загрузили на сайт. Код автоматически вставляет путь к теме, которую вы используете, а js — это и есть та папка, которая находится в папке вашей темы, и в которую мы закачали файл.
Все, библиотека jQuery подключена.
Как загружать jQuery с сайта Google?
Сделать это достаточно легко — нужно удалить вызов этих скриптов из шаблонов вашей темы (обычно это прописано в header.php или footer.php), и добавить в файл functions.php такой код:
add_action( 'init', 'jquery_register' );
function jquery_register() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' ), false, null, true );
wp_enqueue_script( 'jquery' );
}
}
Этот код заставит скрипт jquery.min.js грузиться напрямую из хранилища Google.
2. Откройте файл, в котором нужно сделать табы (например, single.php), и вставьте в него такой код:
<ul class="tabs">
<li><a rel="nofollow" href="#tab1">Таб1</a></li>
<li><a rel="nofollow" href="#tab2">Таб2</a></li>
<li><a rel="nofollow" href="#tab3">Таб3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Содержимое первого таба
</div>
<div id="tab2" class="tab_content">
Содержимое второго таба
</div>
<div id="tab3" class="tab_content">
Содержимое третьего таба
</div>
</div>
Как видите, это очень простая структура. Сначала идет список табов, потом — содержимое табов. Для элементов сразу заданы стили. Чтобы придать всему этому красивое, ненавязчивое оформление, нужно описать стили для всех этих элементов.
3. Откройте файл style.css и вставьте в него код, задающий оформление используемых нами элементов.
ul.tabs { margin: 0 0 0 20px; padding: 0; float: left; list-style: none; height: 32px; width: 100%; }
ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #fff; }
ul.tabs li a { text-decoration: none; color: #aaa; display: block; font-size: 1.0em; padding: 0 10px; border-bottom:#fff 1px solid; }
ul.tabs li a:hover { background: #fff;color: #000; border-bottom:#fff 1px solid; }
html ul.tabs li.active { background: #fff; border-top-left-radius:5px; border-top-right-radius:5px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; color:#000; border-bottom: #fff 1px solid; }
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin-bottom:0px; background:#fff; border-top:#eee 1px solid;}
.tab_content { padding:0; }
html ul.tabs li.active a, html ul.tabs li.active a:hover {color:#000;}
В примере оформления для светлых блогов в белым фоном. Вы можете поиграть с этим оформлением, изменив его под дизайн своего блога. Ну и последний шаг — это подключение java-скриптов, чтобы совместить табы, оформление, и сделать красивое переключение между ними.
4. Откройте файл header.php и вставьте в него код скрипта:
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
Этот скрипт переключает табы с затуханием, запоминает активный таб, при загрузке страницы делает активным первый таб.
Второй способ.
Первый способ, был основан на списках, в которых табами служили специальные ссылки. Эти ссылки показывали содержимое табов, оформленное особым образом и активируемое с помощью скрипта. Второй способ, попроще — нет эффектов во время смены содержимого табов, но и нет лишних внутренних ссылок для активации табов.
1. Откройте файл, в котором вы будете делать табы (обычно это single.php илиsidebar.php) и вставьте в него такой код:
<dl class="tabs">
<dt class="selected">Таб1</dt>
<dd class="selected">
<div class="tab-content">содержимое первого таба</div>
</dd>
<dt>Таб2</dt>
<dd>
<div class="tab-content">содержимое второго таба</div>
</dd>
<dt>Таб3</dt>
<dd>
<div class="tab-content">содержимое третьего таба </div>
</dd>
</dl>
2. Как видите, табы и их содержимое находятся в одной таблице. Чтобы они приобрели нужное оформление, отредактируйте файл style.css, вставив в него код:
.tabs { width:400px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; }
.tabs dt { float:left; line-height:2; height:2em; background:#fff; border:1px solid #ccc; border-bottom:0; padding:0 1em; position:relative; left:35px; margin-right:1px; cursor:pointer; }
.tabs dt:hover { background-color:#ccc; }
.tabs dt.selected { border-color:#aaa; background:#fff; z-index:3; cursor:auto; }
.tabs dd { background:#fff; display:none; float:right; width:100%; margin:2em 0 0 -100%; position:relative; z-index:2; }
.tabs dd.selected { display:block; }
.tabs .tab-content { background:#fff; border:1px solid #ccc; padding:20px 20px 10px 20px; }
В этом примере кода ширина табов равна 400 px, фон белый, цвет шрифтов черный, рамка вокруг табов серая.
3. Чтобы активировать табы и автоматически выделить первый, нужно подключить скрипт. Откройте файл header.php, и вставьте в него такой код:
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});
</script>
Табличная верстка упрощает использование табов, делает их более логически правильными, а несложный скрипт отслеживает, чтобы первый таб всегда был активирован при загрузке страницы.
