BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

<html>
<head>
<script src="https://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="https://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>

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

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

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

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

[  посмотреть пример ]
[ скачать ]

Удачи Вам, мои дорогие друзья! Я рад абсолютно всем!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573