Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Панель вкладок в сайдбаре на WordPress

Привет! Функциональность и юзабельность блога зависит от того, как он настроен и какие прибамбасы на нем имеются. В этой статье хочу разобрать с вами то, как сделать панель вкладок в сайдбаре вашего блога. Для этого можно найти и использовать какой-нибудь плагин, но мы реализуем такую штуку при помощи кода и не будем использовать никакие плагины.

панель вкладок, сделать панель вкладок, сайдбар

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

панель вкладок, сделать панель вкладок, сайдбар

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

Делаем панель вкладок в сайдбаре

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

Для начала зайдите в административную панель вашего блога и перейдите по вкладке «Внешний вид» -> «Виджеты». Далее добавьте текстовый виджет в нужное место, при этом название не вводите и добавляете в него следующий код:

<div class=»widget_p»>

<input type=»radio» name=»odin» checked=»checked» id=»vkl1″>

<label for=»vkl1″>Название вкладки №1</label>

<input type=»radio» name=»odin» id=»vkl2″>

<label for=»vkl2″>Название вкладки №2</label>

<input type=»radio» name=»odin» id=»vkl3″>

<label for=»vkl3″>Название вкладки №3</label>

<div>Содержимое вкладки №1</div>

<div>Содержимое вкладки №2</div>

<div>Содержимое вкладки №3</div>

</div>

Если ваша тема не поддерживает работу PHP-кода в виджетах, то вам нужно добавить код в файлы своей темы и об этом я писал в в своей статье «PHP-код в виджетах».

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

Теперь нам нужно придать стили для нашей панели вкладок. Для этого откройте файл темы style.css и вставляем в него код стилей:

.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;

}

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

Мы с вами вывели вкладки в виджет и настроили их отображение, но теперь еще нужно заполнить их содержимым. Для этого необходимо вместо «Название вкладки №1(№2, №3)», прописанного в первом приведенном коде, дать названия своим вкладкам, а вместо «Содержимое вкладки №1(№2, №3)» вставить то,  что вы хотите видеть.

Если при переключении между вкладками ничего не меняется и не отображается, то вам нужно проверить подключена ли библиотека jQuery на вашем сайте. При отсутствии подключения сделайте резервную копию файла functions.php вашей темы и после вставьте в него код подключения библиотеки jQuery. Как это сделать можете почитать в моей статье «Выезжающий блок на JQuery без плагинов».

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

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

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ