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

Скачать книгу!
Главная страница » Настройка сайта » Как сделать панель вкладок в сайдбаре на WordPres?

Как сделать панель вкладок в сайдбаре на 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. Если и сейчас не работает, что очень и очень странно, опять же напишите мне.

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

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

И до связи.

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

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

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

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

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

    2014-12-28 в 5:40 пп |
    Ответить
    • Константин Белан,

      А зачем? :-)

      2014-12-28 в 6:04 пп |
      Ответить
      • Денис Тумилович,

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

        2014-12-28 в 6:06 пп |
        Ответить
        • Константин Белан,

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

          2014-12-28 в 6:12 пп |
          Ответить
          • Денис Тумилович,

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

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

            2014-12-28 в 6:16 пп |
            Ответить
            • Константин Белан,

              Спасибо!

              2014-12-28 в 6:17 пп |
              Ответить
        • Константин Белан,

          Все, украсил :-) Так и правда красивей!

          2014-12-28 в 6:16 пп |
          Ответить
  2. Суламбек,

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

    2014-12-28 в 6:49 пп |
    Ответить
  3. Игорь Черноморец,

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

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

    2014-12-29 в 12:54 дп |
    Ответить
    • Александр,

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

      2014-12-29 в 11:33 дп |
      Ответить
      • Константин Белан,

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

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

        2014-12-29 в 11:35 дп |
        Ответить
        • Александр,

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

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

          2014-12-29 в 11:38 дп |
          Ответить
        • Игорь Черноморец,

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

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

          2014-12-29 в 11:42 дп |
          Ответить
          • Константин Белан,

            Не за что, Игорь! Заходите почаще :-)

            2014-12-29 в 12:07 пп |
            Ответить
            • Игорь Черноморец,

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

              2014-12-29 в 1:17 пп |
              Ответить
              • Константин Белан,

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

                2014-12-30 в 11:01 пп |
                Ответить
          • Александр,

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

            2015-01-18 в 5:29 дп |
            Ответить
  4. Александр,

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

    2014-12-29 в 11:36 дп |
    Ответить
  5. Азик,

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

    2014-12-29 в 9:55 пп |
    Ответить
    • Константин Белан,

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

      2014-12-30 в 11:00 пп |
      Ответить
  6. Александр,

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

    2014-12-30 в 1:40 дп |
    Ответить
  7. Иван,

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

    2014-12-30 в 11:41 дп |
    Ответить
    • Александр,

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

      2015-01-18 в 5:29 дп |
      Ответить
  8. Иван,

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

    2014-12-30 в 11:42 дп |
    Ответить
    • Иван,

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

      2014-12-30 в 11:54 дп |
      Ответить
    • Константин Белан,

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

      2014-12-30 в 10:58 пп |
      Ответить
  9. Роман Рей,

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

    2014-12-30 в 3:59 пп |
    Ответить
    • Константин Белан,

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

      2014-12-30 в 10:59 пп |
      Ответить
  10. Павел,

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

    2015-01-05 в 4:40 пп |
    Ответить
    • Александр,

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

      2015-01-18 в 5:31 дп |
      Ответить
  11. Денис Скрипник,

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

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

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

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

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

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

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

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

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

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

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

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

    2015-01-31 в 1:40 пп |
    Ответить
  12. Александр,

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

    2015-01-31 в 11:09 пп |
    Ответить
  13. Алексей,

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

    2015-03-06 в 3:32 пп |
    Ответить
    • Константин Белан,

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

      2015-03-06 в 5:14 пп |
      Ответить
      • Алексей,

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

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

        2015-03-06 в 5:22 пп |
        Ответить
        • Константин Белан,

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

          display: initial;

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

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

          padding: 4px 30px;

          2015-03-06 в 6:16 пп |
          Ответить
          • Алексей,

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

            2015-03-06 в 8:02 пп |
            Ответить
  14. Сергей Иванисов,

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

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

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

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

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

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

▲ Наверх