Создание и улучшение интерфейса сайта — процесс практически бесконечный. Хочется сделать все лучше и лучше.

Если выводить в сайдбар сайта на WordPress много нужной и полезной, куда ж без этого, информации, то во-первых высота страницы, зависящая от высоты сайбара — боковой панели сайта, может разростись до совершенно невменяемой величины, а во-вторых найти что-то нужное среди кучи информации станет просто невозможно.

Выход из этой ситуации давно уже придуман, делаем на боковой панели вкладки примерно такого вида:

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

  1. Скачать плагин Tabbed Widgets с официального сайта.
  2. Установить и активировать плагин стандартным образом.
  3. Заходим в «Дизайн/Виджеты», находим новый виджет  Tabbed Widgets — переносим его в сайдбар.
  4. Замечаем, что под этим виджетом в сайдбаре появилась «Invisible Widget Area»
  5. - перетаскиваем туда виджеты, которые будут у нас во вкладках.
  6. Обновляем страницу.
  7. Добавляем в виджет Tabbed Widgets нужные нам виджеты — там будет выпадающий список, нужно только ткнуть мышкой в нужный виджет и задать название для вкладки.

Выглядит это так:

Осталось прояснить вопрос — зачем же нужна  «Invisible Widget Area». Дело в том, что в выпадающий список для выбора виджетов для вкладок попадают только либо активные виджеты с сайдбара (что неудобно, так как в итоге возникает дублирование информаци) либо скрытые активные виджеты — которые и берутся собственно с этой скрытой панели.

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

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

Постовой: Многие меняются ссылками, чтобы повысить ТИЦ и PR своего сайта, но знаете ли вы, что такое правильный обмен ссылками? Также не забывайте о том, что обмен ссылками может вам дать новых посетителей и читателей.


Подпишись на обновления блога по Сайтовед по RSSRSS, RSS по EmailEmail, twitter hennertwitter!


Интересные посты на "Сайтоведе":

Комментарии (9)

  1. Когда-то у вас я узнал о хостинге schneider-hos — пользуюсь второй месяц, претензий нет, грамотно помогли с решением одной проблемы. В общем, доволен.
    Теперь обустраиваю блог полезными плагинами и рад, что нашёл у вас описание того, что давно заприметил на некоторых блогах

    Ответить

  2. С левой панелью разобрался. :) По поводу правой вопрос открыт.

    Ответить

    • Тыкни в «оставить отзыв» — там в правом верхнем углу ссылка на сайт «Реформал», дальше разберешься.

      Ответить

  3. Пользуюсь плагином SidebarTabs. Функционал у него больше и симпатичней намного.

    Ответить

    • Попробовал ваш вариант. Он тоже очень интересный. Настроек много.

      А рекомендованный автором у меня не подошел по ширине боковой колонки.

      Ответить

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

    Ответить

    • Я на паре сайтов его использовал, тут без надобности. А вот шаблонов подобных не попадалось.

      Ответить

  5. Этот плагин у меня почему-то не работает, а вот другой, который в комментариях посоветовали, работает отлично. Очень много настроек (цвет текста, фон, границы, размер, изображения вместо текста), вообщем можете сами все посмотреть у меня на сайте.

    Ответить

  6. Полная хрень в 2-х словах!!!
    Изучи тему!

    Ответить

Добавить комментарий для Хэннер Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>