Как сделать wordpress вкладки или табы WordPress?
Привет всем, с вами на связи Евгений Смецкий, много кто задает мне вопрос, как сделать такие вкладки или их еще называют табы, как у тебя на блоге, и не знаю что и ответить, по тому что нет статьи у меня на данную тему, приходится говорить что вот поищите в интернете.
Но понимаю что отправил человека искать непонятно что, поскольку я знаю сам, что я потратил примерно 2 дня в поиске чтоб что-то подобное найти, и все напрасно, все равно ничего хорошего не нашел, я то что-то нашел, но нужно было вносить все равно свои изменения, так как меня мало что может удовлетворить.
Плагины все никудышные, либо старые лет по 2-3 не было обновления, либо такое что и время не хочется тратить на это гав-о. Так что сейчас, дам вам все что я сделал у себя на блоге, кстати данные вкладки можно использовать не только в сайд-баре, но и в статье, давайте перейдем к делу, и для начала я покажу что и как выглядит:
Ну вот такие красивые табы у меня получились, я их использую пока что только в сайд-баре, теперь поэтапно рассмотрим как это сделать:
Создать красивые вкладки (табы)
Для начала вставим наш скрипт, его можно вставить как в файл header.php вашей темы сайта, так и в основной файл где находятся все скрипты scripts.js, у меня допустим этот код, там где все скрипты:
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function() { $('ul.tabs').each(function() { $(this).find('li').each(function(i) { $(this).click(function() { $(this).addClass('active').siblings().removeClass('active'); var p = $(this).parents('div.tabs_container'); p.find('div.tab_container').hide(); p.find('div.tab_container:eq(' + i + ')').show(); }); }); }); }) |
Ок, вставили код, теперь идем дальше и вставляем CSS код, в файл 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .tabs_container { padding: 20px; } .tabs{ padding: 0; } .tabs_container .tabs{ margin: 0 !important; } .tabs_container .tabs li { cursor: pointer; background: #FFFFFF; border-bottom: 1px solid #E2E2E2; padding: 5px 8.6px; margin: 0 !important; } .tabs_container .tabs li.active { border: 1px solid #DADADA; border-bottom: 1px solid #FFFFFF; border-top-left-radius: 5px; border-top-right-radius: 5px; } .tab_container { display: none; background: #FFFFFF; border: 1px solid #e0e0e0; padding: 10px; margin: -1px 0 0 0; } .tab_container ul li { margin: 0 0 8px 0; } .inl-bl{ display: inline-block; } |
Что может кому то не понравится в стилях, то можете под себя настроить, или может у кого то что-то будет не ровно, ну вообще пишите в коментах. И последнее, это код вставки в виджет, вот он:
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="tabs_container"> <ul class="tabs"> <li class="inl-bl active">Первая вкладка</li> <li class="inl-bl">Вторая вкладка</li> </ul> <div class="tab_container" style="display: block;"> Текст для первой вкладки. </div> <div class="tab_container"> Текст для второй вкладки. </div> </div> |
Ну вот в принципе и все, данный код можно и использовать в записях, не только в сайд-баре, так что пробуйте, пишите вопросы в комментариях, может у кого то возникнут какие то проблемы. Все всем большое спасибо за внимание пока пока.
Полезные статьи
— Как сделать красивое выделение цитаты?
— Как добавить php код в виджете wordpress?
С уважением Евгений Смецкий
38 комментариев
Обязательно попробую на своем блоге. Такая вещь по моему мнению экономит место в сайдбаре.
ДА ) Очень крутая штука, экономка !
Нужно тоже сделать на своем автомобильном сайте. Я там добавил в сайдбар виджеты групп социальных сетей. Очень много места занимает, буду наверное делать группы во вкладки
Я даже не знал, что ты ведешь сайт еще и на автомобильную тематику — молодец Санек!
Евгений, спасибо большое! Недавно как раз задавалась вопросом, как блоггеры это делают, но в интернете еще не искала, времени не было. Приятно удивил, спасибо еще раз. Обязательно воспользуюсь, хочу тоже рубрики на вкладки, а второе и третье пока не придумала, что поставить.)
Пожалуйста 😉 если что ищите то пишите в Онлайн Заявка
Этого не знал, спасибо
В header.php не работает. Отображается код на эеране. Где может быть файл со скриптами в каких папках
Вот, wp-content/themes/Ваша тема/scripts.js
Отображается на экране потому что его нужно в теги заключать, в таком случае это
здесь код скрипта
Евгений, поправь мой коммент
Спасибо большое тебе спасибо за статью, я на одном из своих блогах обязательно использую Вашу методику «таба». Для экономии места в сайдбаре и эстетическое восприятие не плохое
Что-то не совсемь у меня получается с этим разобраться может особенности шаблона
Я надеюсь если Вы Александ зададитесь этой целью у Вас неодменно получится
Возможно просто что-то где-то пропустил. Проверь внимательно, уверен работать должно. Другие файлы скриптов на твоем блоге работают или нет?
Если код вылазиет в шапке, где то может нет скобки , как скрипт подключаеш?
Все четко по инструкции как написано в статье, с первого раза все пошло нормально. Видимо что то где то упустили
У меня из за библиотеки непроканывало.
А код в шапке вылазиет потому что код надо, а он без тегов ставил.
Здравствуйте, Евгений. Статью взял на заметку. Как время будет обязательно сделаю в сайдбаре такую вкладку. И вмещу в нее рубрики, свеж. записи, и ,например облако тегов. Будет норм. Кстати, я давно хотел такую вкладку, думал плагин хакнуть.
А зачем велосипед изобретать? Возьму у тебя да и все.
С меня твит.
P.S. Я то-же за МИР !
А ты скрипт в header.php закинул, или ко всем скриптам ?
Я вот только собрался подключать, на тестовом сайте все обкатаю.
Я буду скрипт выводить (регистрировать) через файл functions.php. Как сделаю, напишу.
Ну что получилось сделать вкладки? Как результаты?
Да, получились, можешь глянуть 😎
Я версию библиотеки iqery свою отключил, была вообще левая, подулючил iqery min1.8.4
все скрипты от нее работают.
Здравствуйте! Я скрипт в header.php закинул. Почему то у меня не переключаются вкладки. В чем может быть дела?
А если не scripts.js что делать?
Где у вас все скрипты прописаны ?
Для скриптов на хостинге сделал отдельную папку и все скрипты кидаю туда, наверное так удобно и советую такое делать многим
Евгений, посмотри еще раз скрипт, может когда выкладывал где ошибка была? Я то знаю как скрипты подключаются, но что-то не идет, по всякому пробовал.
Этот скрипт не требует подключения определенной версии библиотеки? На двух шаблонах проверял, и 0 эмоций.
В header.php до закрывающего тега , в style.css в самом низу, и во вкладке виджеты
Жека, короче разобрался я почему у одних работает, у других нет. Для этого скрипта нужна библиотека jquery-версия?.min.js
Я нашел подобный скрипт с библиотекой. Только теперь стили нужно править и все работает. Ты глянь какая у тебя версия, выложи ее в пост, да и все.
Где посмотреть ?
В хеад или функшен файле. скрипт типа jquery-версия?.min.js Я сейчас глянул, неразобрался, нет времени.
Привет!!! Евгений добавь немного изменений в статью! Коротка расскажу. Да по возможности старайся немного быстрей отвечать на вопросы, хотя бы, что не будь или что не знаешь. ОК! А то жду ответ как такие таблицы делать, а в ответ тишина. Где написан .tabs_container { как выводить такую форму таблицы красивую? Вообщем что нужно исправить первый код в файл jquery-1.4.4.js, но это моя версия, у каждого свая, до тега jQuery.noConflict ();, затем в файле header.php до закрывающего тега водите это указываете где именно этот файл находиться, но это где у меня находиться файл, а у других может может находиться wp-includes/js или wp-admin/js. да указываете версию свою, моя 1.4.4. И все работает. Я помог, теперь помоги мне, как же такую форму создавать для кода, мне очень нужно, так как я открыл рубрику WordPress. Жду помощи.
что-то не добавилось, вообщем исправишь. коммент
Да, Рома, ты правильно все написал. Если таба не работает, то нужно подключить библиотеку jquery, в вордпресс они уже должны быть в папках js надо смотреть такой файл jquery-1.4.4.js, только версии разные могут быть.
У меня, например jquery-1.7.2.min.js, но также все работает, только сайдбар узкий и нужно свои стили прописывать.
Я тоже себе сначала хотел так сделать, но потом передумал лазить в кодах.
Очень удобная штука и место экономит !