Всем привет, ребята. Помните, я вам говорил, что собираюсь рассказать о том, как можно сделать вкладки (табы) на сайте WordPress. Так вот, сегодня я расскажу, как можно сделать вкладки в боковой колонке (сайдбаре, sidebar) WordPress. Я такие вкладки использую для размещения на них своей подписки в социальных сетях. Я рассказывал уже, как можно добавить на сайт WordPress виджет сообщества FaceBook, а также как создать группу ВКонтакте и разместить виджет сообщества на сайте.
Такие вкладки очень удобны, так как их можно использовать не только для подписки, но например и для целей, а также других необходимых данных. Данные вкладки только сэкономят место на вашем ресурсе.
Ну что, давайте приступим. Для начала я создал отдельный файл в папке с темой, который назвал subscribe.php. Собственно, в данном файле и будут располагаться наши вкладки, а также в каждой вкладке необходимая подписка. Чтобы у нас вкладки работали, мы воспользуемся скриптом JQuery — jquery-1.7.1.min.js. Вы его скачиваете, создаете в папке с темой – директорию, которую я назвал library и туда уже закачиваете файл jquery-1.7.1.min.js. Не обязательно действовать прямо как я, вы можете забацать в любую другую папку, любое другое место, просто у вас потом путь изменится.
Сейчас открываем файл header.php или тот файл, где у вас имеется тег <head>. Обычно это файл header.php. В данном файле мы будем подключать вышеописанный JQuery-скрипт. Поэтому, скачиваем header.php, открываем его и сразу после тега <head> вставляем строку:
< type="text/javascript" src="<?php bloginfo('template_directory'); ?>/ library/jquery-1.7.1.min.js"></>Здесь все понятно, я указал путь, где лежит моя тема с помощью =»<?php bloginfo(‘template_directory’); ?> (сюда автоматически подставится путь к теме), а затем я указал папку lib и сам скрипт. Как я говорил выше, путь к скрипту можно изменить на ваш. Сохраняем и заменяем файл на фтп.
Чтобы наши вкладки были красивыми (табы) необходимо открыть ваш файл style.css и вставить следующий css-код оформления вкладок:
ul.tabs { margin: 0 0 0 20px; padding: 0; float: left; list-style: none; height: 32px; width: 100%; }
ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #fff; }
ul.tabs li a { text-decoration: none; color: #aaa; display: block; font-size: 1.0em; padding: 0 10px; border-bottom:#fff 1px solid; }
ul.tabs li a:hover { background: #fff;color: #000; border-bottom:#fff 1px solid; }
html ul.tabs li.active { background: #fff; border-top-left-radius:5px; border-top-right-radius:5px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; color:#000; border-bottom: #fff 1px solid; }
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin-bottom:0px; background:#fff; border-top:#eee 1px solid;}
.tab_content { padding:0; }
html ul.tabs li.active a, html ul.tabs li.active a:hover {color:#000;}С помощью данного кода вкладки будут обычными, белыми, вот такими:
Вы можете откорректировать данный код по своему усмотрению и стилю, см. юзабилити сайта. Идем дальше. Открываем файл subscribe.php и вставляем туда следующий код:
<ul class="tabs">
<li><a rel="nofollow" href="#tab1">Вконтакте</a></li>
<li><a rel="nofollow" href="#tab2">Twitter</a></li>
<li><a rel="nofollow" href="#tab3">FaceBook</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
ЗНАЧЕНИЕ ПЕРВОЙ ВКЛАДКИ
</div>
<div id="tab2" class="tab_content">
ЗНАЧЕНИЕ ВТОРОЙ ВКЛАДКИ
</div>
<div id="tab3" class="tab_content">
ЗНАЧЕНЕ ТРЕТЕЙ ВКЛАДКИ
</div>
</div>В каждую вкладку вставляете свое значение. И таких вкладок можно создать сколько угодно, просто проставляете нумерацию необходимую вам. Сохраняем файл subscribe.php. Нам осталось его подключить в нужное место. В моем случае, я подключал его в сайдбар, вы же можете сделать это в любое другое место. Делается легко:
<?php include (TEMPLATEPATH . '/subcribe.php'); ?>Хотя код с файла subscribe.php вы сразу можете вставить в файл sidebar.php, либо же при помощи виджета Текст. Как видите, ничего сложного в этом нет, а самое главное, что получается как красиво и просто, удачи вам, дорогие друзья.
Также советуем почитать на PressDev.RU
Короткая ссылка: http://pressdev.ru/?p=2923
Loading...
Здравсвуйте! очень хорошие получились табы, и не слишком мало кода
Интересуюсь тем что, можно ли сделать так, что бы не нажимать на табы когда нужно посмотреть вкладку, а просто если подвинуть мышкой на нее, она открывается автоматически 
Буду использовать на своем блоге
Можно. Если найдете такую библиотеку, либо отредактируете уже существующую. В данном случае, у меня используется библиотека, где необходимо нажимать
У меня на сайте получилось так, что все кнопки расположены в столбик и сразу отображаются все три виджета друг под другом. Все сделал, как описано, нашел одну опечатку: subcribe.php (нужно subscribe.php). Подскажите, пожалуйста, что не так я сделал?
Либо у Вас узкий сайдбар, либо у Вас не видит Ваши стили css
Здравствуйте!
Извините, не по теме, скажите у меня в папке шаблона имеется папка lib, в ней имеется папка shortcodes в ней папка css а уж в ней сам файл — bootstrap.css. «Беда» в чем, при проверке сайта на валидность CSS — 340 ошибок!!! Экспериментом, удалила файл с сервера — bootstrap.css, проверила — 8 ошибок! Самое главное и с ним и без него сайт работает.
Сам вопрос! Скажите почему такое может быть и, что Вы бы посоветовали, как поступить? Спасибо!
Здравствуйте! У меня два предположения: раз проверяли на валидность, значит этот файл был прописан в Вашем сайте, по идеи его туда зачем-то прописали, во-вторых, если сайт работает без него, то просто сделать бекап файла, затем удалить с сервера и понаблюдать, действительно ли нет никаких сбоев.