Создаем вкладки (табы) на блоге с помощью плагина postTabs

Добрый день, уважаемые читатели и гости блога! Работая над блогом, мне потребовалось разместить разную информацию на одной странице, но при этом следовало сохранить смысл всего материала в одном контексте и чтобы Вам удобно было удобно ее просматривать и при этом не создавалось перезагрузки страниц. Я не стала изобретать велосипед, а просто создала вкладки (табы) на странице. Это такие полезные кнопки, с которыми нам практически ежедневно приходится сталкиваться при работе в административной панели блога, особенно когда мы переключаем визуальный редактор на html, но я же применю принцип их работы для своих целей. Реализовать мне задуманное помог простой плагин wordpress. И так как я обещала рассказывать о всех технических усовершенствованиях своего блога, то сегодня будем разбираться как создать вкладки (табы) на wordpress с помощью плагина postTabs.

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

То есть смысл материала остается один, но размещена при этом разная информация. Здорово, не правда ли? При этом, хочу заметить, что хоть часть информации и скрыта, она присутствует в исходном коде страницы, а это значит что будет проиндексирована поисковыми системами.

Если хотите и у себя на блоге создать вкладки (табы) на странице или в материалах, то первым делом следует скачать плагин postTabs со страницы http://wordpress.org/extend/plugins/posttabs/ и привычным для Вас способом устанавливаете на блог и активируете.

После того как плагин активирован у нас в консоли Параметры появляется пункт postTabs, с помощью которого можно настроить внешний вид вкладок.

Нажав на данный пункт появится страница, где основная часть настроек отвечает за цвет отражающихся вкладок:

Line Color – цвет контура вкладок

Active Tab – цветовое оформление (цвет текста и фона) активной вкладки

Mouse Over Tab – цветовое оформление вкладки при наведенном курсе мыши

Inactive Tab – цветовое оформление, когда вкладка не активна

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

Tabs alignment – устанавливает выравнивание табов.

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

Display TOC – данный пункт позволит создать наподобие навигации, то есть если мы поставим галочку напротив пункта :

— At the end of the post, after everything – то в самом конце статьи появляется список – ссылок на все вкладки (табы)
— Inside each tab — navigation style ( <> ) – в этом случае в тексте каждой вкладки появляется ссылка на следующую или предыдущую вкладку (таб)

Links behavior – отвечает за то каким образом будут работать ссылки в табах:

— Hide-Show Tabs – работает через JavaScript и не позволяет дать ссылку на ту или иную вкладку отдельно.
— Permalink – выбрав этот пункт ссылка будет иметь вид «?p=87&postTabs=4», что дает нам возможность давать ссылку на определенную вкладку, но при этом есть минус – при открытие вкладки будет перезагружаться страница.

Display tab permalink inside tab body – если мы выбрали в предыдущей настройке пункт Hide-Show Tabs, то наш читатель не видит ссылки на данную вкладку, а данный пункт позволяет выводить в внизу таба ссылку и в этом случае посетитель может ее при необходимости вставить у себя на ресурсе.

Думаю большинству блоггеров эти настройки вообще не потребуются и их можно оставить по умолчанию. Сохраняем все произведенные изменения нажав на кнопку “Update Settings”.

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

Это должно выглядеть примерно следующим образом:

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

На этом я сегодня откланиваюсь. Всем удачи и до новых встреч.

С уважением, Ваша Отчаянная 😉

Вам понравилась статья? Расскажите о ней друзьям!