Получайте секретные материалы проекта на свой E-Mail:

Сделайте блог красивее + сэкономьте место

Здравствуйте, дорогой читатель! В сегодняшней статье мы поговорим о том, как сделать табы, вкладки на WordPress блоге. Научимся делать их непосредственно в статье и в сайдбаре. То есть сделаем блог красивее и сэкономим место в дизайне.Как сделать вкладки на WordPress

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

Вот и я решил немного украсить свой дизайн и сократить сайдбар. Тем более недавно, в связи с выпуском бесплатного видеокурса «Как создать видеокурс: От А до Я» (который Вы можете скачать здесь), сайдбар на моем блоге стал длиннее и, естественно, нет такой красивый.

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

После нескольких неудачных попыток сделать это самому ручками, с помощью html, решил найти готовый вариант, то есть плагин для WordPress. К счастью долго искать не пришлось, под руку попался некий postTabs. Этот плагин не совсем подошел для моих целей, но все равно очень помог.

Как сделать табы на WordPress

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

!!! Хочу сразу отметить, что данная инструкция пригодна только для тех, у кого сайт или блог стоит на платформе WordPress !!! Для тех у кого другой движок, подпишитесь на обновления, в начале февраля будет статья о том, как сделать такие же закладки с помощью html кода на любой платформе !!!

PostTabs: Как сделать табы на WordPress в статьях

1. Скачиваем плагин по ссылке

2. Устанавливаем и активируем его

3. Через админ панель заходим Параметры  postTabs

4. Здесь наша задача настроить внешний вид табов по аналогии изображений ниже:

Табы WordPress в статьях

И расположение вкладок:

5. Теперь можно приступать к реализации вкладок (табов).

6. Для этого при написании статей вставляете следующий код

[tab: текст первой вкладки]

Содержимое первой вкладки

[tab: текст второй вкладки]

Содержимое второй вкладки

[tab: текст третьей вкладки]

Содержимое третьей вкладки

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

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

Если что-то будет непонятно пишите в комментариях, я всегда готов помочь!

PostTabs: Как сделать вкладки на WordPress в сайдбаре

1. Скачиваем нужные файлы в архиве нажав сюда

2. Распаковываем содержимое в папку с темой (например: wp-content/themes/тема/)

3. Теперь наша задача подключить скрипт. Для этого вставляем код ниже в файл header.php перед тегом </head>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" />

4. Заходим в админку, далее Внешний Вид — Виджеты, выбираем нужный виджет и вставляем следующее:

<div class="domtab"> 
<ul class="domtabs"> 
<li><a href="#t1">Название 1 вкладки</a></li> 
<li><a href="#t2">Название 2 вкладки</a></li> 
<li><a href="#t3">Название 3 вкладки</a></li> 
</ul> 
<div> 
<a name="t1" id="t1"></a> 
<p>Здесь код или текст первой вкладки</p> 
</div> 
<div> 
<a name="t2" id="t2"></a>
<p>Здесь код или текст второй вкладки</p> 
</div> 
<div> 
<a name="t3" id="t3"></a> 
<p>Здесь код или текст третьей вкладки</p> 
</div> 
</div>

Внимание: После вставки данного текста, его необходимо отредактировать по себя! Здесь все понятно, где и что менять. Например текст Название 1 вкладки необходимо переименовать на название вкладки и т.д.

5. Теперь необходимо настроить внешний вид табов, для этого открываем файл pbd_domtab.css (например с помощью notepad++)

Для упрощения редактирования CSS стиля можете воспользоваться функцией "Проинспектировать элемент" в браузере Opera. Она значительно помогает при работе с html и css кодами. Подробнее об этом будет в одной из следующих статей! Рекомендую подписаться, чтобы не пропустить.

На этом у меня все! Было интересно? Какие остались вопросы? Задавайте, с удовольствием отвечу!

+ Новость: Все кто следит за моим блогом знают, что недавно у меня проходил мини-конкурс «Обладатель 800 комментария», так вот — у нас есть победитель! Точнее победительница, это Ольга Черныш (). Поздравляю! Напишите в форму обратной связи номер кошелька и я отправлю заслуженные 150 рублей!

Вот и все, оставайтесь со мной!

Улыбнитесь...

Какой браузер лучше?

[social_votes]

С уважением, Томский школьник!

автор блога SeoKos.RU

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 44
  1. Можешь написать статью о уникализации и настойке шаблона под себя? Желательно на конкретном примере...

    • Степан, Возможно будет такая статья, но еще не скоро...

  2. Костя, ну Ты прямо мои мысли прочитал. Я буквально вчера задался целью реализовать у себя такую же фишку. Думал, что сегодня займусь поиском нужной инфы. А тут Ты статью написал. Спасибо, что сэкономил мне время на поиски. Для меня этот пост как раз вовремя.

    • Александр, Бывает 🙂 Всегда рад помочь!

  3. Я тоже на своем блоге недавно заморочился данной идеей, установил плагин помойму SidebarTabs, вроде все настроил, но как то он не совсем корректно работал, поэтому решил пока отказаться от данной идеи, возможно позже заморочусь еще раз. Кстати скажи вот ты вывел Виджет интересные статьи с миниатюрами, ты к каждой сатье при написании задаешь миниатюры или плагин какой используешь??

    • Вячеслав, Миниатюры в статьях я не использую, плагин тоже не использую. Виджет Интересные статьи вывел в ручную. То есть делал изображения в фотошопе, заливал их на сервер, позже с помощью html кода вывел их! Если что, могу помочь.

  4. Отлично придумал. А я на своём блоге просто картинки поставил с названиями тем курсов, они как то более лучше работают в плане привлекательности.

  5. Ответить

    Интересная статья, тоже пробовал ставить в сайтбар с помощью плагина, но не пошло,криво вставал, а возиться лень... инфа полезная нужно заняться 😉

  6. Костя, что за застой, где новые статьи. У Тебя все нормально?

    • Александр, Приношу огромное извинение! Были очень большие проблемы, не было доступа в Интернет. Но сейчас все хорошо — я вернулся! Завтра напишу отчет за месяц и в нем расскажу, что случилось.

  7. Спасибо за полезную информацию. Попробую применить у себя.

  8. Ответить

    Привет, Константин! У меня прям беда с этими таблицами — так и не научился их делать. Использую картинки вместо них — рисую в ворде и вставляю в статьи своего блога. Может теперь все получится. Спасибо за пост!

    • Максим, Привет! Пробуй, все получится... И заходи еще!

  9. Cлушай, интересная штучку ты провернул с комментированием 🙂 сразу когда комментируешь на твоем блоге. после этого сразу приходит письмо с благодарностями, расскажешь как ты это сделал? или это плагин 🙂

    • allemiko, Это плагин. Постараюсь в ближайшее время написать статью про него! 🙂

      • А меня, скажу чесно, такие письма жудко раздражают, я бы не рекомендовал эту штуку использовать.

  10. Ответить

    Захожу раз в неделю, зато все сразу новое читаю! И сегодня именно этот день! Поэтому лови следующие комментарии. 🙂

  11. Ответить

    Табы сделать это одно, а вот заточить их хоть примено под дизайн блога — совсем другое. Здесь нужно хорошенько попотеть...

    • Согласен, без знаний html и css ну ни как, вот именно по этому и нужно блоггеру изучать данные языки.

  12. Ответить

    Максим:

    Привет, Константин! У меня прям беда с этими таблицами — так и не научился их делать. Использую картинки вместо них — рисую в ворде и вставляю в статьи своего блога. Может теперь все получится. Спасибо за пост!

    Макс, не могу поверить, что у Вас, и проблемы с таблицами?!

    🙄 🙄

  13. Ответить

    Спасибо, Костя, возьму на вооружение. Думаю, что данная информация окажется мне полезной!

  14. Табы сделать это хорошо, ну а как на счет нагрузки плагина ❓

    • Vitalik, Для начала нужно задать себе вопрос: а нужны ли тебе такие табы? Если нет, то естественно ставить нет необходимости, и нагрузки лишней не будет... А если нужны — почему не пожертвовать? 🙂

  15. Vitalik:

    Табы сделать это хорошо, ну а как на счет нагрузки плагина

    Если не хочется ставит плагин, то делай вручную. Дольше конечно, зато без нагрузки для Блога.

  16. Тема табов меня давно волновала... Хорошо, что у меня встроенные! Во многих темах, которые изначально не поддерживают табы, приходится лезть в код, просто плагины не фурычат! Штук 5 перепробовал... Данный тоже отказался работать на моей темке тестовой.

    • Мишко, Странно... У меня на этом все работает на ура!

  17. Степан:

    Можешь написать статью о уникализации и настойке шаблона под себя? Желательно на конкретном примере...

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

  18. Пробовала как-то этим плагином пользоваться, что-то мне не очень понравилось, как это отображается на странице. А в сайдбаре и вовсе не рискнула, что-то охоты ковыряться в кодах не было. Было бы так: скачал, активировал и заработал, вот это класс 🙂

    Мне еще спойлеры нравятся. Удобно текст прятать.

  19. Вот это именно та функция, которую я ещё не реализовал на блоге, а уже хотел давно, и плагин есть и кода, только руки не дошли, попалась на глаз статья. вот так и сейчас сделаю все. 🙂

  20. Эх, а у меня на блоге такое вряд ли провернуть получиться. В дизайн просто напросто не въедет, а со стилями я не в лады. 😕

  21. Ответить

    Установила себе плагин, но я определенно не понимаю, куда вставлять

    [tab name='tab_name_1']

    Содержимое первой вкладки

    [/tab]

    [tab name='tab_name_2']

    Содержимое второй вкладки

    [/tab] [end_tabset]

    • Этот код необходимо вставить в виджет, в котором Вы хотите чтобы отображались вкладки!

  22. Ответить

    Уже нашла, спасибо!

    • Всегда рад помочь!

  23. Заметил такого рода вкладки часто используют на странце рекламы, в принципе удобно, другое дело, что не очень-то хочеться для такой не совсем кретичной вещи использовать дополнительный плагин.

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

  25. дякую тобі за інформацію так як скоро буду створювати блог.

  26. Ответить

    Для меня это очень интересная информация, приму к сведению.

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

  27. Ответить

    Отличный материал. Я думал под WP ещё такого нет. У меня это плагин tabs:

    1. Активировал.

    2. В специальном редакторе виджетов сайдбаров вводишь специальный код и в нём размещаешь табы — удобно.

    Также плагин позволяет активировать вкладки facebook, vkontakte и стандартных комментариев.

  28. Ответить

    Раньше времени отправил. По поводу вкладок в сайдбаре: не стоит объединять важные виджеты (только дополнительные, например, подписки на инфопродукты, ваши радиостанции). Когда я разместил в виде вкладок «рубрики», «метки» и «поиск», люди просто не могли сообразить, что надо кликнуть на другую вкладку, чтобы перейти к новому виджету, а может быть они сообразили, но не хотели напрягаться: Здесь не знаю, но факт говорит сам за себя — сайт перестал быть удобным.

  29. Огромное спасибо за полезную информацию! Как раз искал такое решение. Очень хорошо экономит место в сайтбаре. Воспользуюсь вашим методом.

  30. Ответить

    Костя привет! А как ты выводишь свою панель вкладок в сайтбаре, напиши плиз, а то ищу что-то подобное никак найти не могу !

  31. Скоро постараюсь сделать, что-нибудь подобное!

  32. Ответить

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