Желаете научиться писать первоклассные статьи, которые будут приносить качественный трафик? Тогда скачайте мою БЕСПЛАТНУЮ книгу по ссылке справа.

Скачать книгу!
Главная страница » Настройка сайта » Сделайте блог красивее + сэкономьте место

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

Здравствуйте, дорогой читатель! В сегодняшней статье мы поговорим о том, как сделать табы, вкладки на 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 комментария», так вот — у нас есть победитель! Точнее победительница, это Ольга Черныш (http://yum-ha.ru). Поздравляю! Напишите в форму обратной связи номер кошелька и я отправлю заслуженные 150 рублей!

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

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

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

[social_votes]

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд (Оценок статьи ещё нет. Будьте первыми!)
Loading...

Понравилась статья? Поделитесь с другими!

Хотите получать оповещения о новых статьях на свою электронную почту?
Тогда введите свой E-mail адрес в форму ниже и нажмите Enter:
Оставлено комментариев: 44
  1. Степан,

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

    2013-01-23 в 1:08 пп |
    Ответить
    • admin,

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

      2013-01-23 в 1:45 пп |
      Ответить
  2. Александр,

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

    2013-01-23 в 12:02 пп |
    Ответить
    • admin,

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

      2013-01-23 в 12:10 пп |
      Ответить
  3. Вячеслав,

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

    2013-01-23 в 4:55 пп |
    Ответить
    • admin,

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

      2013-01-23 в 5:45 пп |
      Ответить
  4. Никита Рябин,

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

    2013-01-24 в 11:11 дп |
    Ответить
  5. Александр,

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

    2013-01-24 в 6:56 пп |
    Ответить
  6. Александр,

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

    2013-01-31 в 12:18 пп |
    Ответить
    • admin,

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

      2013-01-31 в 1:45 пп |
      Ответить
  7. Александр,

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

    2013-01-31 в 5:53 пп |
    Ответить
  8. Максим,

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

    2013-02-01 в 12:15 пп |
    Ответить
    • admin,

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

      2013-02-01 в 12:23 пп |
      Ответить
  9. allemiko,

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

    2013-02-01 в 4:25 пп |
    Ответить
    • admin,

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

      2013-02-01 в 4:28 пп |
      Ответить
      • Виталий,

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

        2013-10-31 в 1:26 пп |
        Ответить
  10. Максим,

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

    2013-02-01 в 12:26 пп |
    Ответить
  11. Сергей,

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

    2013-02-03 в 7:05 дп |
    Ответить
    • Виталий,

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

      2013-10-31 в 1:25 пп |
      Ответить
  12. Людмила Винокурова,

    Максим:

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

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

    :roll: :roll:

    2013-02-03 в 7:48 пп |
    Ответить
  13. Людмила Винокурова,

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

    2013-02-03 в 7:50 пп |
    Ответить
  14. Vitalik,

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

    2013-02-04 в 8:43 дп |
    Ответить
    • admin,

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

      2013-02-04 в 9:43 дп |
      Ответить
  15. Александр,

    Vitalik:

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

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

    2013-02-04 в 9:19 дп |
    Ответить
  16. Мишко,

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

    2013-02-05 в 3:35 пп |
    Ответить
    • admin,

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

      2013-02-05 в 4:08 пп |
      Ответить
  17. Александр,

    Степан:

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

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

    2013-02-05 в 7:12 пп |
    Ответить
  18. Елена Олейникова,

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

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

    2013-02-08 в 3:23 дп |
    Ответить
  19. Дима Актив,

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

    2013-06-25 в 7:04 пп |
    Ответить
  20. Илья,

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

    2013-07-13 в 9:19 дп |
    Ответить
  21. Марина,

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

    [tab name='tab_name_1']

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

    [/tab]

    [tab name='tab_name_2']

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

    [/tab] [end_tabset]

    2013-07-22 в 8:51 пп |
    Ответить
    • Константин Белан,

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

      2013-07-23 в 3:52 пп |
      Ответить
  22. Марина,

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

    2013-07-23 в 5:34 пп |
    Ответить
    • Константин Белан,

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

      2013-07-23 в 6:03 пп |
      Ответить
  23. Виталий,

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

    2013-10-31 в 1:23 пп |
    Ответить
  24. Руслан,

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

    2013-11-29 в 12:57 пп |
    Ответить
  25. Олександр,

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

    2013-11-29 в 6:09 пп |
    Ответить
  26. Мозгунова Ирина,

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

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

    2013-12-24 в 2:46 дп |
    Ответить
  27. Денис Скрипник,

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

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

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

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

    2014-01-10 в 9:44 пп |
    Ответить
  28. Денис Скрипник,

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

    2014-01-10 в 10:01 пп |
    Ответить
  29. Александр,

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

    2014-04-17 в 8:54 пп |
    Ответить
  30. Евгений,

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

    2014-09-18 в 2:26 пп |
    Ответить
  31. Виталий,

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

    2014-10-01 в 12:03 дп |
    Ответить
  32. ZenFut,

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

    2016-01-09 в 2:12 дп |
    Ответить
Оставить свой комментарий:

Эффективный блоггинг и инфобизнес с Белан Константином

Станьте моим партнером

© 2012-2015 | При копировании материала активная ссылка на сайт-первоисточник обязательна!

▲ Наверх