Плагины о вкладках в wordpress

Вкладки jQuery на WordPress сайте без плагинов

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

Как сделать вкладки на сайте

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

Скачиваем необходимые файлы

Для начала вам необходимо скачать небольшой скрипт для вкладок. Далее открываем архив tabs. rar и закачиваем файл с помощью ftp клиента к себе на сайт, например, в папку /js. Затем нужно подключить этот скрипт и jQuery библиотеку к вашему сайту. Наверное многие уже знают как это делать, но я, пожалуй, повторюсь.

Подключаем библиотеку jQuery и файл tabs. js к сайту

С помощью ftp клиента, откройте папку с вашей wordpress темой и найдите файл header. php. Также этот файл можно отредактировать через админку WordPress на вкладке Дизайн -> Редактор. Между открывающимся и закрывающимся тегом head вставьте следующие строки:

Первая строка подключает библиотеку jQuery, а вторая файл javascript для создания вкладок. Если вы положили файл tabs. js не в папку js, а в какую либо другую, то вам необходимо указать полный путь до файла.

Создаем вкладки на сайте

Таким образом мы подключили необходимые файлы к сайту для создания вкладок. Далее нам нужно разбить необходимый контент на вкладки. HTML структура вкладок в общем-то проста.

Именно таким образом нужно организовывать вкладки на сайте, не меняя название классов (class) и айди (id). К примеру, если вы решили сделать комментариии вкладками, то редактировать вам нужно файл single. php, куда необходимо вставить этот код выше и заполнить необходимым контентом.

Редактируем стили вкладок

Также в файл style. css необходимо внести изменения. А именно, нужно добавить следующий код и отредактировать при необходимости под стить вашего сайта:

Как использовать вкладки на сайте

Я очень часто вижу что с помощью вкладок прячут несколько форм комментариев, например видимой оставляют стандартную форму комментирования, а на скрытых вкладках оставляют комментарии ВКонтакте и Facebook, что очень удобно. Также вкладками делают боковое меню (sidebar), или на некоторых сайтах скрытой вкладкой делают некоторые формы заказа или другой второстепенный контент.

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

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

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

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

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

Вкладки WordPress

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

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

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

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

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

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

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

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

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

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

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

Вкладки для блога на WordPress.

Всем привет! Сегодня 23 мая, за окном солнечная и очень жаркая погодка, стрелка моего термометра зашкаливает за 30 градусов. В квартире очень душно, хотя открыты все окна и не единого облачка в небе, хотя бы подул бы слабый ветерок, я бы этому уже рад был 🙂 .

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

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

Делается все элементарно! Нам не нужно прописывать всякие скрипты в коде сайта или менять сам код, ненужно добавлять стили в CSS, все что нам понадобиться это скачать плагин postTab или просто установить через админ панель вашего сайта. Я его скачивал от сюда. Но вы можете просто установить его через админ ку, для это заходите в админ панель по следующему пути Плагины -> Добавить новый, в появившемся окне в строке ПОИСК вбиваете название плагина PostTabs и устанавливаете. Не забудьте активировать плагин после установки!

Далее Вы можете зайти в админ панель и настроить отображение вкладок на сайте.

Вот так выглядит панель настроек:

Для увеличения нажмите на картинку.

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

Как добавить вкладки на страницу? Как сделать вкладки?

Для того, что бы добавить tabs на страницу необходимо прописать команду [tab: Вкладка1]. Весь текст находящийся под этой командой будет принадлежать вкладки «Вкладка1″.

При создании следующий вкладки допустим [tab: Вкладка2], создается новая вкладка » Вкладка2″ со своим текстом вплоть до команды которая создает следующую вкладку.

[warning]В сайд баре команды плагина postTab не работают![/warning]

В случае если вы хотите вкладки сделать в sidebar, т. е. в боковой стороне сайта, где у вас различные менюшки, то используйте для этой цели плагин SidebarTabs. О нем я писал здесь.

И на по следок, интересное видео 😀

По материалам:

Http://www. onwordpress. ru/tabs-jquery-wordpress. html

Http://wordpress-life. ru/vkladki-wordpress-bez-plagina. html

Http://myworkpro. ru/vkladki-dlya-bloga-na-wordpress/