Главная » Wordpress » Табы без плагинов на WordPress
табы без плагина

Табы без плагинов на WordPress

Здравствуйте уважаемые читатели блога history-of-blog.ru. Одним из изменений на блоге, которое я упомянул в 7 выпуске, является установка вкладок или табов в сайдбар без плагина. Табы – это своеобразные вкладки для вывода различной информации в одном и том же месте. Переключаясь между табам мы открываем то одну, то другую информацию.табы без плагина

Если Вы еще не поняли что это, то посмотрите в сайдбар этого блога: под формой подписки располагаются два таба: “Рубрики” и “Популярное”.

Табы без плагина.

Реализовать табы на блоге WordPress можно при помощи плагина, но я выбрал вариант с кодом так как он наиболее экономичен.

Код будет поделен на три части, которые нужно вставить в разные файлы:

1 часть. Вывод табов. Этот код вставляется в то место, где непосредственно следует вывести табы (у меня это файл sidebar.php). Так же табы можно выводить например в тексте статьи, вставляя код через HTML.

<dl class="tabs">
    <dt class="selected">Таб1</dt>
    <dd class="selected">
        <div class="tab-content">содержимое первого таба</div>
    </dd>
    <dt>Таб2</dt>
    <dd>
        <div class="tab-content">содержимое второго таба</div>
    </dd>
    <dt>Таб3</dt>
    <dd>
        <div class="tab-content">содержимое третьего таба </div>
    </dd>
</dl>

Надписи в коде: “Таб1″, “Таб2″ и “Таб3″ – это названия ваших табов, которые отображаются на вкладках (в моем примере это “Рубрики” и “Популярное”).  А “содержимое первого(второго, третьего) таба” – это непосредственно само содержимое :) например тот же список рубрик.

2 часть. Визуальное оформление. Эта часть кода табов ответственна за дизайн наших вкладок и их содержимого. Открываем файл style.css и в самом конце вставляем строки:

.tabs { overflow:hidden; margin:10px auto; zoom:1; padding:1px; position:relative; }
.tabs dt { border:1px solid #BABABA; border-bottom:none; font:16px Arial, Helvetica, sans-serif; color: #157ABA; position: relative; float:left; height:2em; line-height:2; background:#F1F1F1; padding:0 1em; position:relative; margin:0 0 0 6px; cursor:pointer; border-radius:8px 8px 0 0;}
.tabs dt:hover { background-color:#ffffff; text-decoration:underline;}
.tabs dt.selected { background:#F1F1F1; z-index:3; cursor:auto; color:#4C4C4C; text-decoration:none; }
.tabs dd { background:#F1F1F1; display:none; float:right; width:368px; margin:32px 0 0 -100%; position:relative; z-index:2; border-radius:2px 8px 8px 2px;}
.tabs dd.selected { display:block; }
.tabs .tab-content { border-top:1px solid #BABABA; border-left:1px solid #BABABA; padding:5px 5px 5px 5px; border-radius:2px 8px 8px 2px;}

Так оформлены табы у меня. Например, ширина здесь порядка 370 пикселей. Думаю, подредактировать данные строки не составит труда, если Вы не полный 0 :)

3 часть. Java-скрипт. Эта часть кода нужна для того,чтобы автоматически выделить первую вкладку. Открываем файл header.php и перед закрывающим тэгом </head> вставляем следующее:

<script type="text/javascript">
    $(function(){
        $('dl.tabs dt').click(function(){
            $(this)
                .siblings().removeClass('selected').end()
                .next('dd').andSelf().addClass('selected');
        });
    });
</script>

Эти части кода позволили мне вывести в сайдбаре вот такую конструкцию из табов без плагинов:табыА как Вы считаете, нужно ли ставить табы на свой блог WordPress?

Добавлено.

Для того чтобы работали табы необходимо чтобы к блогу была подключена библиотека  jquery (так же она нужна например для эффекта прокручивания кнопки “Наверх”) – в общем нужная штука. Чтобы подключить библиотеку jquery необходимо в файл function.php сразу после <?php добавить следующие строки:

// smart jquery inclusion подключаем библиотеку jquery для wordpress

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');
}
Комментировать через ВКонтакте:
Отзывов к посту "Табы без плагинов на WordPress" уже 56:
  • Резеда | 22.04.2012 в 13:38

    Антон, только я отправила комментарий о табах,а статья уже тут как тут))) Спасибо :idea:

  • Владимир Жданов | 23.04.2012 в 16:16

    Отличная статья! Спасибо :smile:

  • Владимир Жданов | 23.04.2012 в 16:18

    А по делу. Я тоже пытался ставить табы, но не подошло к дизайну. Тоже пришлось самому писать, так как с плагином я не совладал. Все таки код иногда проще ))) Так вот. Было бы здорово если бы ты пояснил читателям какой код за что отвечает. То есть что пихать в места где написано “содержимое первого таба, второго и третьего”.

    Отличная статья! Спасибо

    • admin | 23.04.2012 в 16:20

      Так вроде написано “Содержимое первого таба” :smile: хммм. Щас попробую чуть более подробнее расписать :|

      • Владимир Жданов | 23.04.2012 в 16:22

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

        • admin | 23.04.2012 в 16:26

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

  • Владимир Жданов | 23.04.2012 в 16:29

    Во, вот это хорошая статья! Жду ее! Ну блоггер хочет поместить в таб Архивы записей, он не знает что за это отвечает функция wp_get_archive(). Вот по таким кодам было бы супер статью почитать. А не хочешь создать опросник какие статьи хочет читать “читатель”? :smile:

    • admin | 23.04.2012 в 16:31

      Да читателей то по пальцам посчитать пока, думаю еще рановато.. А так хорошая идея, заодно и узнаю как опросник создать и еще напишу статью как его сделать :)

  • Владимир Жданов | 23.04.2012 в 17:04

    Так приходят с поисковиков как раз по этим запросам ) А про опросник и мне потом расскажи. Но по мойму есть плагин wp-polls

    • admin | 23.04.2012 в 17:06

      Попробуем кодом сначала, а уж если не получится, то плагином :smile:

      • Владимир Жданов | 24.04.2012 в 11:52

        Посмотри скрипты на woweb.ru

  • Евгений | 24.04.2012 в 11:50

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

    • Владимир Жданов | 24.04.2012 в 11:53

      Эт точно. Я уже по его статьям блог делаю

  • Женя | 08.05.2012 в 16:17

    Хорошо что подали такую инфу. Люди понапихивают плагинов, а потом сайты тормозят. Буду читать твой блог. Понравился!

  • Олег | 14.05.2012 в 2:13

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

    • admin | 14.05.2012 в 2:16

      Да теги нормально смотрятся, как раз заполняется вся строчка! :smile: Кстати, только закончил изменять шапку – перенес подписку туда. Интересно узнать со стороны: стало хуже или все таки лучше, у меня такое чувство что чего-то не хватает :twisted:

    • admin | 24.06.2012 в 17:36

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

    • admin | 24.06.2012 в 17:40

      Так названы контейнеры для табов:
      dl – общий контейнер,
      dt – та часть, где название таба,
      dd – а здесь содержится содержимое таба.

  • VkBablo.ru | 19.07.2012 в 14:39

    У меня тема Twenty Ten и у меня не работают табы. На нескольких сайтах одна и та же инструкция, все делаю по ней – не работает. Взял и тупо скопировал строчки с твоего сайта – ничего не дало. Скопировал с другого сайта – тоже самое. Подскажите, что не так. Тестировал на сайте ZisiZ.Ru. Зайдите и посмотрите, пожалуйста. Может быть там еще какой-нибудь скрипт нужен, например gogle ajax?

    • admin | 19.07.2012 в 16:38

      Немного поразмыслил и думаю, что возможно если к теме не подключена библиотека jquery, то некоторые фишки не будут работать. Отправил Вам на почту код – если все заработает, то отпишитесь. Спасибо

  • VkBablo.ru | 19.07.2012 в 20:33

    Спасибо. Погуглил и нашел, чего у меня не было:

    • admin | 19.07.2012 в 20:36

      Так код, что я Вам на почту отправил решил вопрос?

    • admin | 19.07.2012 в 20:42

      Да у меня так же – может глюк какой. Недавно такое же с Яндекс.Директом было, в течении дня починили

  • Павел | 30.07.2012 в 18:40

    Возникает проблема при реализации данного метода.
    Делаю вормы для комментирования во вкладках. В бесплатном шаблоне от TooTheme (MasterTheme) при заключении формы для комментирования во вкладку, боковая колонка съезжает в самый низ.
    Не подскажете, как лечить?

    • admin | 30.07.2012 в 20:10

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

  • Игнат | 06.08.2012 в 17:54

    Сделал так, как описано. Табы съезжают, их содержимое не отображается(даже если я там пишу обычные слова).Может вы что то забыли написать?

    • admin | 06.08.2012 в 23:07

      Съезжают потому что табы рассчитаны и подогнаны под определенную ширину, которую нужно отрегулировать самому. Нужно изменить параметры width – так как того требует сайдбар (если табы ставятся туда).
      “их содержимое не отображается” – это не возможно – содержимое 1го таба мы видим в любом случае. Если табы не переключаются, тодобавьте библиотеку jquery – в конце написано как это сделать

  • Влад Кошман | 10.09.2012 в 10:39

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

    • admin | 10.09.2012 в 15:58

      Если библиотека jquery прописана в файле function.php, то табы должны переключаться. А так, удаленно, мне остается только гадать что сделано не совсем корректно

    • admin | 18.09.2012 в 21:17

      Привет. Сижу не за своим ноутом – свой залил кофе, но не могу оставить Вас без ответа. В общем нужно немного подверстать комментарии – попытался это сделать прямо в браузере, за 5 минут у меня вот что получилось: http://history-of-blog.ru/wp-content/uploads/2012/09/fot.jpg – нужно еще граватар переместить и можно сделать стили какие нравится. Если не получится обратитесь на фриланс например – к верстальщику. Так же обнаружил новые Див классы %)
      А так в этом месте табы отлично смотрятся :idea: сам как-то хотел так сделать, но отказался здесь от комментариев от контакта и фейсбука

  • Sergey | 18.01.2013 в 11:15

    Здравствуйте. Сделал все как описано – все работало до недавнего времени. Никаких глобальных изменений на сайте не проводил, кроме публикации статей, но скрипт отказывается работать – табы не переключаются. Подскажите пожалуйста, в чем может быть дело. Код на месте. Сайт http://www.sunturs.ru – табы на главной и в сайдбаре.

    • admin | 18.01.2013 в 13:29

      :) все работало – и перестало. Я не знаю почему перестало)) Проанализируйте что меняли в последнее время. Может WP обновился. Проверьте библиотеку jquery – когда ее нет табы и не переключаются.

      • Владимир Жданов | 13.02.2013 в 17:57

        Вот, та же петрушка, работало и перестало…

    • Sergey | 18.01.2013 в 16:32

      Проверил все коды, даже пробовал установить все заново – переключение табов не работало. Проверил страницу Firebug-ом, в ошибках появилась функция из п.3. Скопировал весь кусок из п.3 в Dreamweaver, он выдал что во фрагменте синтаксическая ошибка. Если удалить обрамления кода: и , то сообщение об ошибке пропадает. Сохранил кусок из п.3 в отдельный файл, залил на сервер и в шапке (до ) подключил, как внешний .js файл:
      И табы заработали!

      • admin | 18.01.2013 в 23:49

        Хех))) прикольно. Отличное решение. Можно все пихать в header или footer, или выносить в отдельные файлы. Но реально в чем разница, и почему в одном случае работает, а во втором нет – странно. Возможно какой-нибудь конфликт кодов, как знать, как знать. Рад, что у Вас все заработало :|

  • DenPorsche | 28.04.2013 в 14:16

    Перелопатил кучу плагинов и скриптов… ничего не работает… только на Вашем блоге в Дополнении написано про то, что нужно подключить jquery в function.php. Спасибо! Молоток!

  • Дмитрий | 18.06.2013 в 17:10

    После установки все работает хорошо, только при вставке кода в любое место, например, сайдбара, у меня пропадает задний фон сайдбара (не страницы) и, кроме того, у всего, что находится ниже установленных табов (в сайдбаре), пропадают стили, а у всего, что выше – все ок. Не могу найти причину :oops:

    • admin | 18.06.2013 в 17:22

      Внимательней с открывающимися и закрывающимися тегами div – скорее всего причина в них. А вообще сложно говорить “зная симптомы, и не видя пациента”, так что тут можно только гадать :|

  • Дмитрий | 18.06.2013 в 17:55

    Спасибо, получилось!!! Дело в том, что сначала я взял сам код с другого сайта, а там в конце действительно стоял лишний закрывающийся тег div. Вот как у меня получилось – muzhik-v-dome.ru, в сайтбаре. :shock:

  • Ирина | 26.10.2013 в 19:19

    Здравствуйте, Антон! Зашла к Вам с поиска. Искала как-раз вставку табов кодом. Прочитала, подумала. Поняла, что не понимаю, что писать на месте где “содержание табов”. Хотела вывести в табы: популярные записи, новости сайта (последние статьи), главные рубрики и последние комментарии. Но может быть и только первые два.
    Главные рубрики у меня большой список – будет он показываться или нет?
    Что нужно вставлять в “содержание таба”?
    Если я хочу расположить табы в сайдбаре, то вставлять код в файл sidebar.php в конце? Или на какое-то определенное место в файле?
    И еще вопросы не по теме статьи. А почему Вы показываетесь как admin, а не по имени? Лучше, когда читатель знал, как лучше к Вам обращаться. А лучше все-таки по имени!
    И еще! Почему у Вас в комментариях текст зачеркнутый? Очень не удобно читать комментарии.Осилила только штук 10 прочитать. А потом глаза устали.

    • admin | 26.10.2013 в 23:05

      Содержание табов – это собственно их содержание =))) ну например на скрине в первом табе – это список рубрик (список рубрик надо выводить кодом, у меня получалось так http://history-of-blog.ru/wordpress/vyvodim-spisok-rubrik-wordpress-kodom/). Другой пример – хотите под табом с названием “автор” вывести свою фотографию, то эта фотография и будет содержанием таба.
      На счет сайдбара – если используете виджеты, то можете попробовать добавить через виджет обычным текстом или php-текстом (вроде был подобный плагин) – и посмотрите будет ли рабоотать. А так я добавляю все именно через sidebar.php, виджеты не использую.
      На счет имени – так уж повелось, как-то не правил. Людичасто находят и по имени обращаются (наверное футер яркий :) )
      На блоге текста зачеркнутого нет, скорее всего у вас установлено расширение в Хроме под названием RDS bar (бомбочка с тицем). Кликните правой кнопкой мышки и зайдите в настройки – отключите все подсветки и т.п. – они ни к чему, а когда понадобятся, если вдруг, включите на время.

  • Руслан | 30.10.2013 в 16:33

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

    • admin | 30.10.2013 в 16:53

      Привет.
      Все что я могу сделать, это так же просто по статье перекопировать и т.д. – По идее должно работать, так как у меня раньше работало, а искать причину может быть долго. Оттести на другом блоге или просто на новой страничке – создай html-файл и к нему css (если одностраничники умеешь делать).

      • Руслан | 30.10.2013 в 19:18

        Одностраничники умею, но сейчас завал и времени нет. А если я тебе дам логин с паролем от админки, помочь с можешь?

  • Олег | 04.11.2013 в 13:24

    Вроде все вставляется,но не работет переключение.

  • Andrew | 12.02.2014 в 23:11

    Скажите пожалуйста, а есть ли возможность сделать автоматическое переключение вкладок через заданный промежуток времени и кнопки навигации?

  • ann | 20.03.2014 в 22:51

    Антон спасибо за статью. ТОлько тоже какая-то фигня. Если ставлю табы на страницу, то все ок. Файл стилей отредактирован. А если вставляю в сингл, и в код впихнула комментарии обычные,гугль плюс и вконтакте, так офомрление меняется.Может чем поможешь???? Вот тут табы на странице нормально отображаются http://multicooker-recipes.ru/otzyvy-o-multivarkax/otzyvy-o-multivarke-delta-dl6502/.
    А в любой статье, где комментарии – так там оформление съежает.

  • Игорь | 30.05.2014 в 14:03

    Привет. Все прекрасно работает. Только один вопрос. Как надо настроить СSS чтобы табы коректно переносились во вторую строку . Тоесть они переносятся но содержимое табов в первой строке перекрывают табы во второй и получается что на них даже нажать нельзя.

  • Ml | 26.08.2015 в 15:24

    А есть еще что то похожее на эту тему?

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