fbpx
Перейти к содержимому

Вкладки для WordPress без плагина — Табы для сайта Вордпресс

Вкладки для WordPress
Табы (Tabs) — это вкладки на странице, с помощью которых можно выгодно предоставить большой объем информации на сайте. Классический вариант установки вкладок на сайт я описала в одной из прошлых статей. Сегодня расскажу как сделать Вкладки для WordPress без плагина. Эти вкладки взяты с сайта 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. Но тем не менее на некоторых сайтах работает именно оригинальный скрипт. Так как версии jQuery могут быть разными на разных сайтах.
Поэтому, если по каким-то причинам у вас не работают табы, тогда после фразы —Сам скрипт НЕ МЕНЯТЬ!!!!— вам нужно удалить код и вставить следующий:

Больше статей:   Редактирование поста с фронт-енда с помощью Advanced Custom Fields Pro

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

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

Больше статей:   Как сделать счетчик для Contact Form 7 плагина

2 комментария для “Вкладки для WordPress без плагина — Табы для сайта Вордпресс”

  1. Причина проста, вы используете разный тип подключения jQuery к скриптам вашим.
    Разная версия библиотеки может не работать в таком виде:
    jQuery(document).ready
    Но будет работать в:
    $(document).ready
    Или в:
    $(document).ready(function(){
    })(jQuery);
    Это говорит лишь о использовании библиотеки разной версии, не более.

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

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