0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Создание сайдбаров WordPress

Для того, что-бы сайдбары для начала отобразились в админке, нам нужно их зарегистрировать. Другими словами добавить в файл functions.php код:

Разбираю вышепреведенный код для создания сайдбаров WordPress

Тут не так все сложно, как на первый взгляд кажется.

  • ‘name’ => __( ‘Правая колонка’, ‘fwbs’ ) — название зоны виджетов, можете писать любое название, только аккуратно между скобками, смотрите на скрине видно, где оно выводится;
  • ‘id’ => ‘sidebar-1’ — ID уникальный идентификатор, присваиваемый сайдбару, у всех сайдбаров должен быть свой, отличный от других ID;
  • ‘description’ => __( ‘Правая боковая колонка’, ‘fwbs’ ) — описание, аналогично названию зоны виджетов;
  • ‘before_widget’ => » — HTML тег открывающий сайдбар, обозначающий начало зоны сайдбара, плюс к которому присваивается динамически класс widget ;
  • ‘after_widget’ => ‘ ‘ — закрывающий зону сайдбара HTML тег. Как мы знаем, что все HTML теги, за некоторым исключением должны быть парными (открывающий и закрывающий);
  • ‘before_title’ => ‘

‘ — заголовок виджета будет обернут в тег H4 с классом

, можно менять значимость заголовка H1, H2, H3, H4, H5, H6 и присваивать свои классы;
‘after_title’ => ‘

Теперь заходим в адмику, в раздел «виджеты» и смотрим результат. Вот картинка того, что получилось у меня:

Данным кодом я зарегистрировал две зоны виджетов WordPress, теперь нужно вывести их на экран.

Шаг 1. Регистрация сайдбара

Для начала скажу, что в разных темах WordPress сайдбары регистрируются по-разному, в некоторых ещё до сих пор используется способ 2007-го года. Почему? Да просто некоторые липовые разработчики любят неосознанно копировать код из других тем, их даже не волнует, что тема, которую они используют в качестве своего «на все случаи» шаблона, не обновлялась более 5 лет.

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

Как я уже говорил, мы будем создавать два сайдбара — в боковой колонке и в футере, в этом нам поможет функция register_sidebar() (если что-то будет непонятно в коде — смотрите документацию функции). Хук widgets_init обязателен!

Код для файла functions.php :

Вот что получилось у меня на странице Внешний вид > Виджеты:

Уже сейчас вы можете добавлять и настраивать виджеты в сайдбарах, теперь осталось только вывести их на сайте.

Что можно добавить в сайдбар

Из-за боковой панели может страдать контент: площадь размещения уменьшают, шрифты делают мельче, чтобы поместить больше информации. Чтобы сделать sidebar на сайте эффективным, стоит размещать только полезные элементы.

Элементы навигации и управления

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

Социальные виджеты

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

Информация об авторе или о компании

Биография автора, краткий рассказ о становлении компании – это важная информация для пользователей. Подобная информация может говорить об успешности бренда и повысить лояльность клиентов.

Конверсионные элементы

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

Реклама

Реклама на сайдбаре – рискованная затея. Ее размещение рассеивает внимание посетителей, заставляя избегать всех элементов, представленных на боковой панели. Поэтому ее нужно делать визуально привлекательной, но не выбивающейся из общего дизайна страницы. Также необходимо учитывать такое явление как «баннерная слепота» — игнорирование навязываемой рекламы.

Для наибольшей эффективности используют следующие приемы:

  • добавляют яркие цвета;
  • внедряют привлекательные символы;
  • пишут продуманные заголовки.

Анонсы контента

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

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

Вывод сайдбаров WordPress

Чтобы вывести сайдбары в любом месте шаблона, логично в нужном месте прописать следующий код:

Немного пояснений по коду:

  • — PHP код, который дает команду, если в сайдбаре под id=sidebar-1 находятся виджеты, то его нужно выводить на экран, если виджетов нет, сайдбар не выводится;
  • — PHP код вызывающий сайдбар под id=sidebar-1 в месте, где вы его прописали в коде шаблона.

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

Создание файла sidebar.php

Создайте файл, например sidebar-right.php , задайте ему заголовок, и вставьте в него вышеприведенный код. Все вместе это будет выглядеть таким образом:

Как видно из примера, я дополнил код дополнительной HTML разметкой. Теперь, чтобы вывести зону виджетов, в нужном месте остается прописать следующее:

Для левой боковой колонки соответственно создается файл sidebar-left.php и в нужном месте шаблона выводим так:

Как говорится, найдите в коде одно отличие.

Все, сайдбары созданы, теперь осталось дело за малым, создать для них в шаблоне разметку и прописать стили CSS.

Шаг 1. Регистрация сайдбара

Для начала скажу, что в разных темах WordPress сайдбары регистрируются по-разному, в некоторых ещё до сих пор используется способ 2007-го года. Почему? Да просто некоторые липовые разработчики любят неосознанно копировать код из других тем, их даже не волнует, что тема, которую они используют в качестве своего «на все случаи» шаблона, не обновлялась более 5 лет.

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

Как я уже говорил, мы будем создавать два сайдбара — в боковой колонке и в футере, в этом нам поможет функция register_sidebar() (если что-то будет непонятно в коде — смотрите документацию функции). Хук widgets_init обязателен!

Код для файла functions.php :

Вот что получилось у меня на странице Внешний вид > Виджеты:

Уже сейчас вы можете добавлять и настраивать виджеты в сайдбарах, теперь осталось только вывести их на сайте.

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

В двух словах о том, для чего нужны эти функции:

  • — проверяет, есть ли в сайдбаре виджеты,
  • — выводит сайдбар;

Давайте теперь выведем те два сайдбара, которые мы создавали в прошлом шаге. И начнем с боковой колонки:

Куда вставлять код? Ну где хотите вывести сайдбары, туда и вставляйте. Не уверены в какой файл? Ну, вообще это полностью зависит от вашей темы, но вероятнее всего, что код боковой колонки вставлять в sidebar.php , а код футера в footer.php . Возможно вам ещё пригодится документация функций и .

Каждый из нижеперечисленных советов поможет избежать весьма серьёзных багов на сайте, однако, если вы хорошо разбираетесь в PHP и WordPress, ничего нового из этих советов вы не узнаете.

    Если выводимый садбар не имеет виджетов, то при помощи if и else можно задать код, который будет выполняться в этом случае:

if ( is_active_sidebar( «true_foot» ) ) : dynamic_sidebar( «true_foot» ) ; else : // код по умолчанию на случай, если сайдбар пустой endif ;

  • Не нужно использовать PHP-функцию function_exists() для функции и других функций WordPress. Просто иногда используют. Это ни к чему.
  • Некоторые подключают файл sidebar.php через include() или require() . Чего вы хотите этим добиться? Увеличения производительности? Сомневаюсь, что причина медленной загрузки вашего сайта кроется именно в этом. А для подключения sidebar.php используем специально предназначенную для этого функцию
  • На чтение 3 мин. Опубликовано 29.11.2016

    Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о Супер полезном плагине, который позволит вам создавать новые сайдбары для своего сайта, в неограниченном количестве! Вы сможете выводить сайдбары в любом месте вашего сайта. Добавлять сайдбары на сайт можно с помощью простого шорткода или php кода. Сайдбары можно будет очень просто добавлять в записи, страницы, виджеты, боковые панели, подвал сайта (footer), заголовок сайта (header) и т.д.

    Вы сможете создавать сайдбары для определённых страниц или записей, указав в настройках название страницы. Например, можно создать сайдбар, который будет отображаться только для одной записи. Можно настроить показ сайдбаров для определённых пользователей. Очень простые настройки. Супер полезный плагин!

    Как сделать сайдбар

    Боковую панель можно спроектировать с помощью CSS и HTML или через WordPress. Для этого понадобится готовый макет сайта , чтобы правильно распределить ширину желаемого блока.

    При создании сайдбара вручную нужно:

    1. Открыть кодовый редактор.
    1. Создать общий блок div, где будут располагаться колонки, и выбрать ему класс (например, layout).
    2. Выбрать позиционирование для контейнера и свойство колонок .
    3. Настроить дизайн панели: цвета, шрифты.

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

    В WordPress не нужно писать код вручную, что значительно упрощает процесс. Работа проходит в конструкторе, где регистрируется навигационная панель с добавлением виджетов. Для этого нужно записать несколько функций в PHP файлы. Потребуются массивы с данными, которые будут ссылаться на виджеты и их теги div.

    Читать еще:  Манул антивирус яндекс. Установка веб-антивируса манул от яндекс. Как им пользоваться
    Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector