Вкладки jQuery на WordPress сайте без плагинов

На многих сайтах и блогах используются вкладки. Вкладки используются для того, чтобы визуально сэкономить место на сайте или сгруппировать необходимым образом контент. Принцип работы вкладок в том, что они прячут определенный контент слоями. Сверху мы видим только один слой контента, но можем с легкостью обратиться к другому интересующему контенту, щелкнув по следующей вкладке.

Как сделать вкладки на сайте

Для создания вкладок на сайте WordPress совсем не обязательно устанавливать плагины. С помощью плагинов наверное тоже можно сделать вкладки, но так как я предпочитаю работать с кодом, а не с плагинами, то я предлагаю сделать вкладки на сайте с помощью jQuery.

Скачиваем необходимые файлы

Для начала вам необходимо скачать небольшой скрипт для вкладок. Далее открываем архив tabs.rar и закачиваем файл с помощью ftp клиента к себе на сайт, например, в папку /js. Затем нужно подключить этот скрипт и jQuery библиотеку к вашему сайту. Наверное многие уже знают как это делать, но я, пожалуй, повторюсь.

Подключаем библиотеку jQuery и файл tabs.js к сайту

С помощью ftp клиента, откройте папку с вашей wordpress темой и найдите файл header.php. Также этот файл можно отредактировать через админку WordPress на вкладке Дизайн -> Редактор. Между открывающимся и закрывающимся тегом head вставьте следующие строки:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/tabs.js"></script>

Первая строка подключает библиотеку jQuery, а вторая файл javascript для создания вкладок. Если вы положили файл tabs.js не в папку js, а в какую либо другую, то вам необходимо указать полный путь до файла.

Создаем вкладки на сайте

Таким образом мы подключили необходимые файлы к сайту для создания вкладок. Далее нам нужно разбить необходимый контент на вкладки. HTML структура вкладок в общем-то проста.

<!-- Начинаются вкладки -->
<ul class="tabs tabs1">
		<li class="t1 tab-current">Имя первой вкладки</li>
		<li class="t2">Имя второй вкладки</li>
</ul>

<!-- Первая вкладка -->
	<div class="t1">
		Содержимое первой вкладки
	</div>

<!-- Вторая вкладка -->
	<div class="t2">
		Содержимое второй вкладки
	</div>

<!-- Заканчиваются вкладки -->

Именно таким образом нужно организовывать вкладки на сайте, не меняя название классов (class) и айди (id). К примеру, если вы решили сделать комментариии вкладками, то редактировать вам нужно файл single.php, куда необходимо вставить этот код выше и заполнить необходимым контентом.

Редактируем стили вкладок

Также в файл style.css необходимо внести изменения. А именно, нужно добавить следующий код и отредактировать при необходимости под стить вашего сайта:

/* tabs
-------------------------------------------------------------------- */
ul.tabs {
	height: 25px;
	line-height: 25px;
	margin: 0 0 3px;
	list-style: none;
}
* html ul.tabs {margin-bottom: 0;}
ul.tabs li {
	float: left;
	margin-right: 1px;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 !important;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
}
ul.tabs li a {
	display: block;
	padding: 5px 10px;
	margin: 0 4px 0px 0;
	color: #111;
	font-size: 12pt;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	background: #fce7ff;
	border: 1px solid #ccc;
	border-bottom: 0px solid #F9F9F9;
	position: relative;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 !important;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
}
* html ul.tabs li a {
	float: left;
 	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 !important;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
	}

*+html ul.tabs li a {
	float: left;
 	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 !important;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
	}

ul.tabs li.tab-current a {
	color: #444;
	background: #fff;
	padding: 5px 10px;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 !important;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0;
	border: 1px solid #ccc;
	border-bottom: 1px solid #fff;
	margin-bottom: -1px;
}
div.t2,
div.t3,
div.t4 {
	display: none;
}
div.t1,
div.t2,
div.t3,
div.t4 {
	float: left;
	width: 100%;
	background: #fff;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-khtml-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	padding: 15px 0;
	border: 1px solid #ccc;
}
/* end tabs
----------------------------------------------------------------------- */

Как использовать вкладки на сайте

Я очень часто вижу что с помощью вкладок прячут несколько форм комментариев, например видимой оставляют стандартную форму комментирования, а на скрытых вкладках оставляют комментарии ВКонтакте и Facebook, что очень удобно. Также вкладками делают боковое меню (sidebar), или на некоторых сайтах скрытой вкладкой делают некоторые формы заказа или другой второстепенный контент.

Вкладки на сайте с помощью jQuery

Вот собственно и все. Вкладки у вас уже должны были заработать, если вы все правильно сделали и подключили. Если будут вопросы или замечания, пишите в комментариях :)