]]>eTXT]]>

Сервис анализа и проверки траста xt сайтов в Яндексе

]]>Анализ сайта:]]> Проверка Траста

]]>]]>

Создание вкладок для вывода любого контента

Размещать контент во вкладках удобно и красиво. Особенно эта фишка будет полезной, если вы в сайдбар поместили много разных виджетов и боковое меню стало неприлично длинным по сравнению со статьей на отдельной странице.

Для реализации вкладок в wordpress есть несколько плагинов. Например, SidebarTabs, Fun with Sidebar Tabs, Tabbed Widgets, Tabber Tabs Widget и другие. Но с ними не всегда можно настроить вывод контента по своему вкусу и потребностям. Поэтому мы сделаем вкладки без плагинов. Начнем с самого простого и универсального метода. Он позволяет создавать разные блоки в любых количествах.

 

Что нам нужно будет сделать – сначала в общих чертах.

  1. Настроить в виджетах обработку php кода.
  2. Подключить скрипт jquery.
  3. Создать скрипт переключения вкладок.
  4. Подключить скрипт для вкладок.
  5. Выводим вкладки в сайдбаре.
  6. И оформляем внешний вид с помощью стилей css.
  7. Заполняем каждую вкладку своим содержимым – это будет код для любых виджетов из социальных сетей.

Как видите, всего 7 шагов и компактная красота будет и у нас с вами на блоге.

 

Шаг первый. Как вывести php в сайдбаре.

В друпал нужно подключить фильтр ввода php, а затем при добавлении в блок своего кода, отметить его галочкой.

В вордпресс есть хорошие плагины Плагин PHP Code Widget и inPHP Widget.

Можно создать и собственный php виджет, который затем перетащить в нужное место на блоге.

 

Делаем пользовательский виджет с готовым кодом.

Для этого вставим в файл functions.php темы этот код:

 
<?php
function my_widget ()
{
  
Здесь наш код
   
}
?>
<?php
register_sidebar_widget
('Вывод нашего виджета', 'my_widget);
?>

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

 

Мы пойдем другим путем и настроим поддержку имеющегося текстового виджета php.

Нам понадобится файл темы  functions.php

Вставляем этот код внизу:

/* Разрешить выполнение PHP в виджетах */
add_filter('widget_text','sp_widget_execute_php',100);
function sp_widget_execute_php($text) {
    if(strpos($text,'') !== false) {
        ob_start();
        eval('?>'.$text);
        $text = ob_get_contents();
        ob_end_clean();
    }
    return $text;
}

Таким образом, мы сможем добавлять php коды в текстовые виджеты. Первая задача выполнена.

 

Шаг второй. Подключение скрипта jquery.

Добавьте в исходный код страницы между тегами head следующую строчку:

Подключение скрипта jquery
 

Или проверьте, такая строка у вас уже может быть, как правило.

 

Шаг третий. Создать сам скрипт переключения вкладок.

Как пишутся скрипты? Просто. Нужно создать пустой файл, назвать по своему усмотрению. Главное, расширение файла .js.

Теперь в него вставим этот код:

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

Заливаем наш скрипт в любую папку.

 

Шаг четвертый. Подключаем скрипт переключения вкладок.

Добавляем также между тегами head.

Подключение скрипта переключения вкладок

Шаг пятый. Выводим вкладки в виджете, например, в сайдбаре.

Идем в админку вордпресс «Внешний вид – Виджеты - Текст». Перетягиваете в то место на блоге, где хотите видеть вкладки с социальными сетями. И размещаете в нем код.

Пример на три вкладки:

Как вывести вкладки в виджете

 

Шаг шестой. Оформляем дизайн вкладок в стилях CSS.

Пример:

/* Вкладки в сайдбаре */
.box {
display: none; /* по умолчанию прячем все блоки */
border: 1px solid #777;
padding: 10px;
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
border: 1px solid #777;
padding: 10px;
}
ul.tabs {
height: 27px;
background: #FFF;
border: none;
margin: -4px -4px 0 !important;
padding: 0 4px;
overflow: hidden;
list-style: none;
}
.tabs li.current {
background: #777;
}
.tabs li {
float: left;
line-height: 27px;
margin: 0 1px 0 0;
padding: 0 0 0 11px;
font-weight: bold;
cursor: pointer;
border: none;
}
.tabs li.current span {
color: #FFF;
}
.tabs li span {
float: left;
padding: 0 11px 0 0;
height: 27px;
color: #777;
}
 

Шаг седьмой. Добавляем социальные сети.

Мы сделали три вкладки. В них будут виджеты от вконтакте, фейсбук и твиттер.

Как реализовать, читайте во второй части «Как добавить виджеты фейсбук, вконтакте, твиттер во вкладках».

Обновления SEO-руководств "SEO Винчестер" и "SEO Коллайдер" на момент июня 2018 года с учетом всех последних изменений алгоритмов ПС.

Предлагаю для своих читателей  50% скидку на любую книгу без ограничения по времени!

Для получения скидки и обеих книг пишите напрямую Михаилу Шакину на globatorseo@gmail.com С КОДОМ master-live.ru  

Обе книги по 80 страниц каждая практики. Всего 160 страниц. 

Винчестер - это эффективные методы оптимизации коммерческих сайтов. 

Коллайдер - 20 методов продвижения, которые использует на практике Михаил Шакин. Очень подробно про ссылочное. При этом о многих наработках он нигде не писал для открытого доступа.

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





* Нажимая на кнопку "Отправить" я соглашаюсь с политикой конфиденциальности