Табы (Tabs) — это вкладки на странице, с помощью которых можно выгодно предоставить большой объем информации на сайте. Классический вариант установки вкладок на сайт я описала в одной из прошлых статей. Сегодня расскажу как сделать Вкладки для WordPress без плагина. Эти вкладки взяты с сайта jQueary idTabs и выглядят они следующим образом:
Пример вкладок для сайта
Но когда я перевела свой блог на WordPress я столкнулась со сложностями установки скрипта вкладок. В этой статье предоставляю Вам пошаговою инструкцию как подключить табы, а именно скрипт idtabs на WordPress.
Шаг 1. Скачать скрипт idTabs и установить на свой сайт WordPress
Первым делом нужно скачать файл idTabs.min.js, создать в корне сайта папку js и поместить в нее скачанный файл.
Шаг 2. Установить скрипт idTabs через файл function.php
В Консоле сайта WordPress перейти Внешний вид — Редактор и найти файл , который отвечает за функции темы. Обычно это function.php, но, например, в моей теме это includes/theme-functions.php. В самом конце, перед закрывающим ?> вставить следующий код:
1 2 3 4 5 |
// подключение скрипта idTabs.min.js if (!is_admin()) { wp_register_script ('idTabs', '/js/jquery.idTabs.min.js', array( 'jquery' )); wp_enqueue_script( 'idTabs'); } |
Это и был самый сложный момент для меня. Я так до конца и не разобралась как именно подключить уже встроенный в вордпресс скрипт табов, поэтому и выбрала для себя такой вариант. Я тестировала его на нескольких своих сайтах и пока он не конфликтовал с другими скриптами и плагинами.
Шаг 3. HTML вкладок
На странице сайта или с помощью Виджета «текст» вставить html вкладок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="usual1" class="usual"> <!---Вкладки---> <ul> <li><a href="#tab1" class="selected">Вкладка 1</a></li> <li><a href="#tab2">Вкладка 2</a></li> <li><a href="#tab3">Вкладка 3</a></li> </ul> <!---///Вкладки---> <!---Информация соответствующая вкладкам---> <div id="tab1">Это информация, которая выводится при нажатии на вкладку 1. Она может быть абсолютно любой</div> <div id="tab2">А это инфо вкладки 2. Информации может быть совсем любая даже картинка <img src="https://stepfor.top/flags/UK.png" height="70" border="0" alt=""> </div> <div id="tab3">Информация третьей вкладки. Вкладок может быть сколько угодно.</div> </div> <!---///Информация соответствующая вкладкам---> <!---Сам скрипт НЕ МЕНЯТЬ!!!!---> <script type="text/javascript"> jQuery(document).ready(function($){ $("#usual1 ul").idTabs(); }); </script> |
И вот тут появляется нюанс. Помог разобраться мне с ним Тимур в комментарии к этой статье.
После фразы —Сам скрипт НЕ МЕНЯТЬ!!!!— в коде выше написан скрипт адаптированный специально для сайтов wordpress. Но тем не менее на некоторых сайтах работает именно оригинальный скрипт. Так как версии jQuery могут быть разными на разных сайтах.
Поэтому, если по каким-то причинам у вас не работают табы, тогда после фразы —Сам скрипт НЕ МЕНЯТЬ!!!!— вам нужно удалить код и вставить следующий:
1 2 3 4 |
<script> jQuery(document).ready(function(){ jQuery("#usual1 ul").idTabs(); });</script> |
Шаг 4. CSS вкладок
Ну и в завершении CSS стили вкладок, которые я взяла с сайта разработчика самого скрипта. Вы можете их корректировать как вам удобно.
Консоль — Внешний вид — Редактор — Таблица стилей, в самом конце вставить следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* Style for Usual tabs */ .usual /* отвечает за весь внешний блок*/ { background:#181818; /*фон внешнего блока */ color:#111; padding:15px 20px; /*отступы внешнего блока от края */ width:500px; /*ширина внешнего блока*/ border:1px solid #222; /*рамка внешнего блока*/ margin:8px auto; } .usual ul {padding: 0px;} .usual li { list-style:none; float:left; } /*вид вкладок*/ .usual ul a /*стили вкладок */ {display:block; padding:6px 10px; /*отступы текста от края вкладок */ text-decoration:none!important; /* нет подчеркивания у ссылок */ margin:1px; margin-left:0; font:10px Verdana; /* размер и тип шрифта */ color:#FFF; /* цвет шрифта */ background:#444; /* фон вкладок */ } .usual ul a:hover /*стили вкладки, когда на нее наведена мышка */ { color:#FFF; /* цвет шрифта */ background:#111; /* фон вкладок */ } .usual ul a.selected /*стили вкладки, когда она выбрана */ { margin-bottom:0; color:#000; /* цвет шрифта */ background:snow; /* фон вкладок */ border-bottom:1px solid snow; /* рамка */ cursor:default; } .usual div /*стили информационного блока */ { padding:10px 10px 8px 10px; /* отступы текста инфо от краев */ *padding-top:3px; *margin-top:-15px; clear:left; background:snow; /* фон инфо блока */ font:10pt Georgia; /* размер и тип шрифта иинфо блока */ } .usual div a { color:#000; font-weight:bold; } /* цвет и жирный шрифт ссылок внутри инфоблока */ #usual2 { background:#0A0A0A; border:1px solid #1A1A1A; } #usual2 a { background:#222; } #usual2 a:hover { background:#000; } #usual2 a.selected { background:snow; } #tabs3 { background:#FF9; } |
Причина проста, вы используете разный тип подключения jQuery к скриптам вашим.
Разная версия библиотеки может не работать в таком виде:
jQuery(document).ready
Но будет работать в:
$(document).ready
Или в:
$(document).ready(function(){
})(jQuery);
Это говорит лишь о использовании библиотеки разной версии, не более.
Тимур, спасибо большое!