ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Вкладки, табы в сайдбаре WordPress

.

Всем большой привет!

Вкладки на WordPress, это по сути те же самые вкладки, что применяются и на любых других сайтах. Еще их называют табы, (в нашем случае табы WordPress).Они позволяют экономить место на сайте, очень часто применяются при формировании карточки товара в интернет магазинах. В данной публикации мы выведем вкладки, табы в сайдбаре сайта, что позволит компактно и органично разместить информацию.

Установим табы WordPress без использования плагинов. На мой взгляд, использование плагинов здесь совершенно лишнее. Одним недостатком такого способа является отсутствие автоматических настроек и этот способ установки вкладок требует каких-никаких минимальных знаний. За то он не нагружает блог.

Кто не может, или не хочет разбираться в кодах, хотя я считаю, что каждый блоггер должен быть хоть чуточку веб мастером, может установить хороший плагин, ссылка на который находится в окончании публикации. А пока советую прочесть статью, уверен, найдете для себя что-то полезное.

В первой лицевой вкладке будут размещенырубрики, во второй — свежие записи, в третьей — метки.

Эти табы WordPress можно вставлять и в текстовый виджет и перетаскивать куда угодно, но тогда они будут немного уже.

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

Для начала скачайте архив (в окончании статьи), в котором есть все, что нужно для работы табов. Для наглядности публикую каждый отрывок кода отдельно и комментирую.

Берем из архива файл (внизу публикации) под названием my_tab.js и закачиваем его на хостинг в каталог с активной темой в папку js.

Путь выглядит так: wp-content/themes/ваша тема/js.  Сам файл внутри выглядит следующим образом :

Теперь самый важный момент. Чтобы наши вкладки на WordPress корректно работали нужно подключить (зарегистрировать) скриптmy_tab.js, который мы только что положили на хостинг. Наверное вы привыкли подключать скрипты так:

<script src="<?php echo get_template_directory_uri(); ?>/js/my_tab.js" type="text/javascript"></script>

или так: <script src="/js/my_tab.js" type="text/javascript"></script>

Пора отвыкать. В WordPress для этого существует специальная функция:register_my_js().
В чем ее особенности? Объяснить простым языком сложно, эта функция использует хуки, в данном примере она «отлавливает» хук ‘init’ (так сказать момент загрузки страницы) и WordPress понимает, что именно в этот момент и нужно загружать скрипт. Короче «хук справа, хук слева»

Внимание

Не забывайте, что перед редактированием файлов, особенно functions.php, у вас должна быть актуальная копия сайта!

Вот хороший плагин для резервного копирования и быстрого, в один клик, восстановления всего сайта, файлов и базы.

Вернемся к нашим вкладкам. После того, как файл my_tab.js находится там где ему следует, регистрируем его следующим образом.

Добавляем нижеприведенный сниппет в окончание файла functions.php, перед закрывающей этот файл скобкой ?>
В некоторых шаблонах такой закрывающей вкладки нет, но не смущайтесь и устанавливайте также как есть в окончание файла functions.php:

Этот код загружает наш скрипт в footer.php сайта. Теперь нужно открыть файл sidebar.php и после строчки:

вставить следующий код:

<div class="tabs"> <!-- Это навигация вкладок --> <ul class="tabNavigation"> <li><a class="" href="#first">Рубрики</a></li> <li><a class="" href="#second">Записи</a></li> <li><a class="" href="#third">Метки</a></li> </ul> <!-- Это контейнеры содержимого --> <div id="first"> <?php wp_list_categories('orderby=ID&amp;title_li='); ?> <!-- Код вывода рубрик --> </div> <div id="second"> <?php wp_get_archives('type=postbypost&amp;limit=10'); ?> <!-- Код вывода последних записей --> </div> <div id="third"> <?php wp_tag_cloud();?> <!-- Код вывода меток --> </div> </div>

Итак, в завершение установки нашей вкладки на WordPress откройте файл style.css и в самое окончание добавьте этот код:Смотрите комментарии в коде. Теперь можно проверить работу табов. Выглядят не очень. Нужно придать им наши уникальные стили. Если до этого мы просто копировали — вставляли сниппет, то здесь придется немного постараться и подправить CSS под себя.

Откройте любой справочник по СSS, например этот htmlbook.ru и правьте не боясь стили под себя.
А вот еще отличный учебник-справочник CSS 3 & HTML с визуальным редактором, можете проверять свойства. www.wisdomweb.ru

Примечание !

Примечание.Если после проделанных операций вкладки, табы WordPress не работают, значит нужно подключить библиотеку JQuery.

Если все сделано правильно, то вкладки на WordPress должны заработать.

Плагин sidebarTabs добавляет в сайдбар «Табы WordPress». Правда давно не обновлялся.

На этом все, оцените мою статью «Выводим вкладки на WordPress в сайдбаре», оставив ссылку на своих страничках в соц. сетях.

БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *