Вкладки WordPress без плагина

WordPress вкладки

Всем привет!

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

Сделать это очень легко! Думаю, даже начинающий изучать систему, сможет без проблем добавить на свой сайт вордпресс табы.

Для создания вкладок необходимо выполнить всего лишь три простых пункта.

 

Вкладки WordPress

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

Для примера, раньше на моём блоге в сайдбаре (боковой колонке) шли подряд виджеты “Свежие записи”, “Популярные записи” и “Комментируемые записи”.

Теперь я собрал это все в один виджет “Статьи блога” с тремя вкладками: Популярные, Новые, Комментируемые.

 

WordPress вкладки, пример

 

Согласитесь, что такой вариант более практичный. Раньше я выводил по 5 статей в каждом блоке, т.е. всего 15 ссылок. Теперь вывожу по 10 ссылок. Т.е. всего в трех вкладках у меня размещено 30 ссылок, но занимают они пространство на 10 ссылок. Итого, информации – больше, занимаемого места – меньше.

Аналогично я скомпоновал и данные по комментаторам. До создания вкладок, на блоге в одном виджете выводился топ комментаторов текущего месяца и прошлого (по 3 человека, всего 6 человек). После создания вкладок, я добавил еще вывод последних 5 комментариев, и топ комментаторов текущего месяца и топ комментаторов за все время существования блога.

 

Вордпресс табы, пример

 

Что можно размещать во вкладках и как это делать мы еще разберем с вами в следующих статьях, а сейчас давайте научимся создавать табы в WordPress.

 

Как создать вкладки в WordPress

1. Подключаем jQuery-код для работы с вкладками.

2. Добавляем в текстовый виджет html-код вкладок.

3. Добавляем стили вкладок в style.css

 

Для работы с вкладками мы будем использовать код, написанный с помощью библиотеки jQuery. О jQuery в WordPress я уже писал ранее.

Теперь я выложу сам код, который нужно разместить в файле footer.php вашего шаблона WordPress. Почему именно в footer.php, а не в header.php, где подключаются большинство js-скриптов? Ответ: чтобы не замедлял загрузку сайта. По возможности, подключение многих javascript файлов нужно переносить из хедера в футер.

Вообщем, мы сделаем еще более правильно. Создадим отдельный js-файл, в котором разместим нужный нам код, а где его подключать в footer.php или в header.php вы решите сами. У меня js-код вкладок подключен в footer.php. Но если вы заметите, что на вашем сайте вкладки появляются с заметной визуальной задержкой, то можете перенести подключение javascript файла в хедер.

 

1. jQuery код работы с вкладками WordPress:

Как же я люблю краткость jQuery!

В этом коде прописана прорисовка активной вкладки и скрытие неактивных вкладок.

Функцию show() можно вызывать с параметром, например show(400), тогда вкладка будет отображаться не моментально, а в течение 400 мсек. Также можно использовать функцию fadeIn(), вместо show(). fadeIn() отображает элементы, плавно изменяя их прозрачность от совсем прозрачного до непрозрачного. В качестве параметра можно передать длительность анимации в мсек. Ладно,  в эти нюансы пока не будем углубляться, можете самостоятельно поэкспериментировать.

Теперь создайте в папке вашего шаблона файл, например myjs.js и скопируйте в этот файл, приведенный выше код.

Я вообще создал в папке шаблона отдельную папку js, в которую складываю все необходимые js-файлы: /wp-content/themes/шаблон/js.

Вот так этот файл я подключаю в footer.php.

Строку размещаю перед скриптами счетчиков посещаемости. Кстати, почитайте статью: Как отключить скрипты счетчиков посещаемости при работе на локалхосте.

Либо, разместите эту строчку в header.php, после скриптов статистики (Google Analytics, Live Internet, наверняка ж что-то такое у вас подключено там).

С jQuery кодом, работающим с вкладками, разобрались, теперь надо создать сами вкладки.

 

2. Зайдите в админку WordPress, Внешний видВиджеты.

Перетяните в боковую колонку текстовый виджет и вставьте в его содержимое этот html код:

Сохраните изменения.

В этом html коде создаются 3 вкладки, если вам нужно другое количество, то по аналогии добавьте блоки, либо удалите лишнее. Вверху задаются названия для вкладок, а ниже расположены блоки с содержимым вкладок.

 

3. Теперь осталось добавить стили в style.css

Вот стили, используемые у меня. Можете взять их за основу, а после переделать под свой сайт.

 

Вот и все! Три простых пункта и WordPress вкладки готовы! Надеюсь у вас все получилось!

Если возникнут вопросы – пишите. Попробуем вместе разобраться.

Не забудьте подписаться на блог. Будет еще много интересного и полезного материала.

Успехов!

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

1 комментарий к записи “Вкладки WordPress без плагина”

  1. Вася

    Здравствуйте! Установил вкладки на свой сайт. Только вот в код страницы. И выводится подчеркивание во вкладках текста. В боксе правил. Ставил без подчеркивания. Никак не могу понять где убрать в стиле подчеркивание текстов. Подскажите пожалуйста.

Оставить комментарий

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя