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

Как сделать панель вкладок в сайдбаре на WordPres?

И снова здравствуйте. В данной статье мы с Вами поговорим о том, как сделать панель вкладок в сайдбаре на Вашем блоге. И самое интересное заключается в том, что реализовать данную штуку мы будем с помощью кода, то есть без плагинов!Как сделать панель вкладок в сайдбаре на WordPressНа моем блоге данная функция присутствует уже продолжительное время, но после смены дизайна, я немного подредактировал код и теперь готов поделиться им с Вами. Уверен Вам будет полезно!

Для чего нужна панель вкладок?

Конечно глупый вопрос, но я все же отвечу на него.

Если Вы сейчас взгляните на боковую панель моего блога, то увидите там такую панель с тремя вкладками: Рубрики, Планы и Курсы.

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

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

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

Нам понадобятся: блог, два специальных кода (которые я дам ниже) и Ваши прямые руки. Надеюсь все присутствует? 🙂

Так же, стоит учесть тот момент, каким образом у Вас отображаются Виджеты. Если непосредственно с помощью родной функции вывода виджетов (то есть Вы заходите в админку, там переходите на страницу «Виджеты» и устанавливаете нужный виджет), то делайте следующим образом.

Переходим в административную панель, выбираем «Дизайн» -> «Виджеты», добавляем новый виджет в нужном Вам месте и добавляем в него следующий код (вводить название виджета не нужно!):

1
2
3
4
5
6
7
8
9
10
11
<div class="widget_p">
<input type="radio" name="odin" checked="checked" id="vkl1">
<label for="vkl1">Название первой вкладки</label>
<input type="radio" name="odin" id="vkl2">
<label for="vkl2">Название второй вкладки</label>
<input type="radio" name="odin" id="vkl3">
<label for="vkl3">Название третьей вкладки</label>
<div>Содержимое первой вкладки</div>
<div>Содержимое второй вкладки</div>
<div>Содержимое третьей вкладки</div>
</div>

Сразу хочется предупредить, что PHP-код в виджетах может не работать. Нужно проделать еще небольшую махинацию, о ней я писал в статье «Как добавить PHP-код в виджет».

Если же Вы выводите виджеты вручную через код, тогда открываем файл под названием sidebar.php, который находится в файле с темой, выбираем нужное нам место, где будет отображаться панель вкладок и вставляем туда тот же код — все просто! Сохраняем и переходим дальше.

После чего, и в том и в другом случае, наша задача придать стиль вкладкам. Для этого открываем файл style.css и вставляем в него следующий стандартный стиль (рекомендую изменить под свой дизайн):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.widget_p{
padding: 5px 0 0 0;
width: 330px;
margin: 10px 10px 15px 10px;
}
.widget_p>div,.widget_p>input{
display:none;
}
.widget_p label{
padding: 4px 10px;
cursor: pointer;
position: relative;
background: #EFEFEF;
}
.widget_p input[type="radio"]:checked+label{
background: #E1E1E1;
cursor: default;
padding: 4px 10px;
text-align: center;
}
.widget_p>input:nth-of-type(1):checked~div:nth-of-type(1),
.widget_p>input:nth-of-type(2):checked~div:nth-of-type(2),
.widget_p>input:nth-of-type(3):checked~div:nth-of-type(3){
min-height: 200px;
display: block;
padding: 20px;
background: #f8f8f8;
}

Далее сохраняем данный файл стилей, переходим на блог и любуемся.

Конечно же пока любоваться то особо и не чем, потому что Вам нужно будет заполнить вкладки содержимом. Для этого вместо слов «Содержимое первой(второй, третьей) вкладки» из кода выше вставляем то, что хотим видеть. Ну и конечно же редактируем стиль вкладок под свой дизайн.

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

Так же, может быть такое, что вкладки не переключаются. То есть, все отображается, но при переходе на вторую или третью вкладку ничего не меняется. Это происходит из за того, что у Вас не подключен jQuery. Чтобы его включить открываем файл functions.php из папки с темой и вставляем туда следующий код до закрывающего тега ?> (ОБЯЗАТЕЛЬНО!):

1
2
3
4
5
6
// smart jquery inclusion
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}

И перед тем как вставлять данный код, рекомендую, даже настаиваю, сделать копию файла functions.php.

Далее снова обновляете страницу блога и проверяете работоспособность панели вкладок на WordPress. Если и сейчас не работает, что очень и очень странно, опять же напишите мне.

На этом у меня все.

Всем большое спасибо за внимание!

И до связи.

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

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

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

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

    выделения кода пустовато смотрятся 🙂 думаю ты язык явно не указывал 🙂

    • А зачем? 🙂

      • Ответить

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

        • Да я просто вручную прописываю pre для кода. И не помню как сделать выделение, не напомнишь?

          • Ответить

            #pre lang="язык" line="с какой строки начать нумерацию"#

            Полный список языком я у себя публиковал, глянь если есть желание

            • Спасибо!

        • Все, украсил 🙂 Так и правда красивей!

  2. Вот то, что я долго искал. Спасибо за инфу.

  3. Ответить

    Привет Костя! У меня вопрос! Ты написал это — «Для этого вместо слов «Содержимое первой(второй, третьей) вкладки» из кода выше вставляем то, что хотим видеть»

    А как вставляем?

    • Ответить

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

      • Спасибо, Александр, что опередил меня 🙂 Только начал отвечать.

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

        • Ответить

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

          Наверное Игорь просто ранее не использовал такие вещи поэтому у него возник вопрос. Думаю что сможет разобраться с легкостью.

        • Ответить

          Александр и Костя, спасибо! Почему-то сразу до меня не дошло, вроде не пил вчера 🙂

          Только что все сделал и...работает как надо! Класс

          • Не за что, Игорь! Заходите почаще 🙂

            • Ответить

              А куда ещё чаще? 🙂 я может быть не всегда комментирую, но читаю всегда!!!

              • Ну значит благодарю Вас за частое посещение моего блога 🙂

          • Ответить

            Вот видишь, ничего сложного на самом деле, просто наверное поспешил и что то упустил

  4. Ответить

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

  5. Погоди, не пойму, а чем оно отличается от обычных Рубрик??

    • Азик, привет. Как чем, это ведь сразу три вкладки, а не одна 🙂 Прочитай лучше статью и глянь на такую панель у меня сайдбаре, сам все поймешь)

  6. Ответить

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

  7. Константин, у меня все так криво 🙁 Не могли бы Вы мне помочь?

    • Ответить

      Ну что удалось разобраться или вам помочь?

  8. Ответить

    Вкладки находятся у меня на блоге последними в сайдбаре

    • Извиняюсь за беспокойство. Справился сам.

    • Иван, Вы молодцы! Панель вкладок смотрится на Вашем проекте очень кстати, мне нравится.

  9. Ответить

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

    • А чего так убрали?

  10. Ответить

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

    • Ответить

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

  11. Ответить

    Не знал, что это возможно реализовать на WordPress.

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

    В Maxsite CMS тоже такое есть:

    1. Ставишь плагин tabs.

    2. Заходишь в «Сайдбары и виджеты» и активируешь его.

    3. Активируешь все виджеты, которые хочешь выводить в табах.

    4. Настраиваешь их.

    5. Вырезаешь из текстового поля списка виджетов нужные и вставляешь в настройках виджета «Табы».

    6. Если необходимо вывести несколько групп табов, добавляешь к tabs_widget число «1», для второй группы «2» и так далее.

    7. Настраиваешь каждую из групп, вставляя нужные виджеты.

    Названиями табов являются заголовки виджетов.

    Я не знаю, как реализуется это кодом, поскольку каждый плагин весит менее 1 МБ и практически не нагружает хостинг.

  12. Ответить

    Я уже активно начал использовать, мне очень нравиться и не так долго пришлось все настраивать

  13. Привет. Каким образом сделать вкладки в линию (как у вас на сайте), а не в 3 строки (как в примере)?

    • Добрый день. Эта статья на примере моей панели вкладок. Видимо Вы что-то делаете не так.

      • а что там можно сделать не так?)

        [ссылка удалена] вот как получается

        • Пропишите в файле css в .widget_p label

          display: initial;

          и все заработает.

          Так же, можете изменить padding в .widget_p label и .widget_p input[type="radio"]:checked+label на следующее:

          padding: 4px 30px;

          • Нормалды, 1 способ подошел. Спасибо за помощь

  14. Ответить

    Пытаюсь применить ничего не получается( слетают все стили виджета, который хочу внутрь добавить)

    Можешь помочь?