Главная » Wordpress » Как создать вкладки (табы) на сайте/блоге WordPress

Как создать вкладки (табы) на сайте/блоге WordPress

2014-08-27 / Вр:00:08 / просмотров: 5758

Итак, расскажу вам и покажу, как можно сэкономить место в блоках на блоге или сайте. Эту возможность некоторые веб-мастера называют вкладкой, а некоторые табами. Как это все работает? Вот пример на моем блоге: найдите с правой стороны блок «Свежие комментарии» и три кнопки «Новые комментарии», «TOP-комментаторов» и «Моя мечта»:

Если вы нажмете на любую из этих кнопочек, загрузится новое содержание, только в блоке. Ага!!! Вам понравилось? Это то, что вы искали?! Теперь пришло время рассказать, как это можно реализовать на блоге или сайте.
Многие веб-мастера обходятся плагином postTabs, но мы же не многие, поэтому будем делать все вручную.
Для начала скопируйте, вставьте и сохраните этот код для обычной HTML страницы:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script ENGINE="text/javascript">
  $(document).ready(function(){
    $(".wptab a").click(function () {
    $(".wptab a").removeClass("selected");
    $(this).toggleClass("selected");
    $(".list").attr("style","display: none;");
    $("#tab-category").attr("style","display: block;");
    var div_name = $(this).attr("href");
    $(div_name).attr("style","display: block;");
    });
  });
</script>

<style>
#tabs ul.wptab,#tabs ul.wptab-category{position:relative;bottom:-1px;padding:0;z-index:99}
#tabs ul.wptab li,#tabs ul.wptab-category li{float:left;display:inline;margin-right:2px;font-weight:700;color:#fff;cursor:pointer}
#tabs ul.wptab li a.selected,#tabs ul.wptab li a:hover{background:#fff;text-decoration:none;border:1px solid #d9d9d9;color:#666;background:#fff;}
#tabs ul.wptab li a{border:1px solid #cac8c8; padding:5px; color:#5e4d06; font: 15px "Times New Roman", Times, serif; text-decoration: none; background:#fdd61d;}
</style>
</head>
<body>

<!-- табы -->
<div id="tabs">
<ul class="wptab">
<li class="popular"><a href="#tab-pop" class="selected" onclick="click(); return false;">Название_1</a></li>
<li class="latest"><a href="#tab-latest" onclick="click(); return false;">Название_2</a></li>
<li class="comments"><a href="#tab-comm" onclick="click(); return false;">Название_3</a></li>
</ul>
</div>
<br><br>
<div id="tab-pop" class="list" style="display: block;">
<!-- Текст с картинками -->
BlogGood.ru - это то, что тебе нужно!
<!--/ Текст с картинками -->
</div>

<div id="tab-latest" class="list" style="display: none;">
<!-- Текст с картинками_2 -->
Хочешь узнать основы HTML, CSS, PHP? Тогда тебе сюда - BlogGood.ru
<!--/ Текст с картинками_2 -->
</div>

<div id="tab-comm" class="list" style="display: none;">
<!-- Текст с картинками_3 -->
Вот такие вот табы
<!--/ Текст с картинками_3 -->
</div>

<!--/ табы -->
</body>
</html>

[ посмотреть пример]

Этот код вы можете использовать для своих сайтов, сделанных на HTML или PHP.

Но как же быть с WordPress? Попробуем этот код (тот, что выше) разместить на WordPress.
1). Откройте админ панель => «Внешний вид» => «Редактор» => «Заголовок (header.php)» и вставьте код между тегами <head> здесь будет код</head>:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wptab a").click(function () {
$(".wptab a").removeClass("selected");
$(this).toggleClass("selected");
$(".list").attr("style","display: none;");
$("#tab-category").attr("style","display: block;");
var div_name = $(this).attr("href");
$(div_name).attr("style","display: block;");
});
});
</script>

2). Далее переходим к CSS файлу («Внешний вид» => «Редактор» => «Таблица стилей (style.css)») и в самом конце вставьте этот код:

#tabs ul.wptab,#tabs ul.wptab-category{position:relative;bottom:-1px;padding:0;z-index:99}
#tabs ul.wptab li,#tabs ul.wptab-category li{float:left;display:inline;margin-right:2px;font-weight:700;color:#fff;cursor:pointer}
#tabs ul.wptab li a.selected,#tabs ul.wptab li a:hover{background:#fff;text-decoration:none;border:1px solid #d9d9d9;color:#666;background:#fff;}
#tabs ul.wptab li a{border:1px solid #cac8c8; padding:5px; color:#5e4d06; font: 15px "Times New Roman", Times, serif; text-decoration: none; background:#fdd61d;}

3). Теперь будем выводить сами табы в боковой колонке (sidebar.php). Для этого нужно перейти во «Внешний вид» => «Редактор» => «Боковая колонка (sidebar.php)». Вставьте этот код в то место, где вы хотите вывести табы:

<!-- табы -->
<div id="tabs">
<ul class="wptab">
<li class="popular"><a href="#tab-pop" class="selected" onclick="click(); return false;">Название_1</a></li>
<li class="latest"><a href="#tab-latest" onclick="click(); return false;">Название_2</a></li>
<li class="comments"><a href="#tab-comm" onclick="click(); return false;">Название_3</a></li>
</ul>
</div>
<br><br>
<div id="tab-pop" class="list" style="display: block;">
<!-- Текст с картинками -->
BlogGood.ru - это то, что тебе нужно!
<!--/ Текст с картинками -->
</div>

<div id="tab-latest" class="list" style="display: none;">
<!-- Текст с картинками_2 -->
Хочешь узнать основы HTML, CSS, PHP? Тогда тебе сюда - BlogGood.ru
<!--/ Текст с картинками_2 -->
</div>

<div id="tab-comm" class="list" style="display: none;">
<!-- Текст с картинками_3 -->
Вот такие вот табы
<!--/ Текст с картинками_3 -->
</div>

<!--/ табы -->

Вот и все! Не знаю как вам, но для меня табы (вкладки) действительно показались полезными, так как это отличная возможность разместить всю нужную и объемную информацию, но при этом существенно сэкономить место в боковой колонке.

На последок красивые табы (вкладки) с эффектами для вашего сайта.

красивые табы (вкладки) с эффектами для вашего сайта