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

Данный пост будет достаточно коротким, но крайне полезен для тех, кто собирается сэкономить место на своем сайте или блоге, но одновременно разместить на нем как можно больше полезной информации. Разговаривать мы будет об установке вкладок в сайдбар или табов WordPress без плагинов. Табы в WordPress — это вкладки, которые предназначены для вывода информации. И так, давайте приступим к разбору вопроса, как установить табы wordpress без плагинов.

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

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

Вывод табов WordPress в сайдбаре. Для этого необходимо разместить код, который опубликован ниже, либо в один из виджетов или статью в режиме HTML, либо скопировать в файл sidebar.php.

Вкладка №1

Содержание вкладки №1
Вкладка №2

Содержание вкладки №2
Вкладка №3

Содержание вкладки №3

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

Оформление стиля. Чтобы придать более человечный табам в WordPress, следует в файл 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;}

Необходимые значения можно подправить, чтобы подогнать форму под дизайн сайта. А мы тем временем переходим к третьему шагу.

Java — скрипт. Далее в файл header.php перед тегом  разместите следующий скрипт, который поможет более лучшему функционированию системы.

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

Jquery. Откройте файл function.php  и после тега вставьте следующий код, которым подключим дополнительные библиотеки.

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 без плагинов закончена. Подписывайтесь на обновление блога, для того чтобы не пропустить выход новых статей.

С уважением, Дороднов Иван

(4 голос, средний: 5,00 из 5)

 Loading ...