Вкладки (табы) для WordPress без плагина

tabs for wordpress
Табы (Tabs) — это вкладки на странице, с помощью которых можно выгодно предоставить большой объем информации на сайте. Классический вариант установки вкладок на сайт я описала в одной из прошлых статей. Эти вкладки взяты с сайта jQueary idTabs и выглядят они следующим образом:

Пример вкладок для сайта

Это информация, которая выводится при нажатии на вкладку 1. Она может быть абсолютно любой
А это инфо вкладки 2. Информации может быть совсем любая даже картинка
Информация третьей вкладки. Вкладок может быть сколько угодно.

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

Шаг 1. Скачать скрипт idTabs и установить на свой сайт WordPress

Первым делом нужно скачать файл idTabs.min.js, создать в корне сайта папку js и поместить в нее скачанный файл.

Шаг 2. Установить скрипт idTabs через файл function.php

В Консоле сайта WordPress перейти Внешний вид — Редактор и найти файл , который отвечает за функции темы. Обычно это function.php, но, например, в моей теме это includes/theme-functions.php. В самом конце, перед закрывающим ?> вставить следующий код:

Это и был самый сложный момент для меня. Я так до конца и не разобралась как именно подключить уже встроенный в вордпресс скрипт табов, поэтому и выбрала для себя такой вариант. Я тестировала его на нескольких своих сайтах и пока он не конфликтовал с другими скриптами и плагинами.

Шаг 3. HTML вкладок

На странице сайта или с помощью Виджета «текст» вставить html вкладок:

И вот тут появляется нюанс. Я к сожалению, так и не разобралась почему на разных сайтах wordpress настройки скрипта разные. После фразы —Сам скрипт НЕ МЕНЯТЬ!!!!— в коде выше написан скрипт адаптированный специально для сайтов wordpress. Но тем не менее на некоторых сайтах работает именно оригинальный скрипт. Например, на этом сайта. Если кто-то подскажет мне в чем именно тут дело, буду очень благодарна. А пока, если по каким-то причинам у вас не работают табы, тогда после фразы —Сам скрипт НЕ МЕНЯТЬ!!!!— вам нужно удалить код и вставить следующий:

Так же выяснилось, что есть еще один рабочий вариант, который вроде бы является самым правильным:

Шаг 4. CSS вкладок

Ну и в завершении CSS стили вкладок, которые я взяла с сайта разработчика самого скрипта. Вы можете их корректировать как вам удобно.
Консоль — Внешний вид — Редактор — Таблица стилей, в самом конце вставить следующий код:


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

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

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