Как сделать левый сайдбар в wordpress. Меняем местами сайдбар и основное текстовое поле. Не отображаем боковую панель без виджетов

Иногда попадаются темы, где всего 1 сайдбар и они используются для нужд самой темы, и новые виджеты вы там разместить не сможете. Возможно вам понадобилось изменить существующий шаблон темы и добавить дополнительный сайдбар, допустим в теме он слева, а вам надо добавить еще один справа.

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

Для начала необходимо зарегистрировать новый сайдбар. Это делается в файле functions.php в папке с шаблоном. register_sidebar(array("name" =>"Новый сайдбар", "id" => "secondary-widget-area", "before_widget" => "
  • ", "after_widget" => "
  • ", "before_title" => "

    ", "after_title" => "

    ",));

    Готово, в панели управления виджетами появился новый сайдбар. Остается только немного настроить его внешний вид в файле style.css (можно скопировать вид из существующего)

    Что есть что в коде

    Name – название сайдбара (sidebar), оно будет отображаться в админ панели Виджеты.
    id – уникальный идентификатор. Понадобиться при добавлении на страницу.
    before_widget – код или текст, который будет вставлен перед каждый виджетом.
    after_widget – код или текст, который будет вставлен после каждого виджета.
    before_title – код или текст, который будет вставлен перед заголовком виджетов.
    after_title – код или текст, который будет вставлен после заголовка виджетов.

    Обратите внимание на ID, имя сайдбара, в данном случае это «secondary-widget-area». Оно должно быть точно таким же, как имя указанное при регистрации в файле functions.php.

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

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

    После небольшого отступления перейдем к нашим «баранам» и окунемся в суть работы с темами, а именно рассмотрим боковое меню WordPress.

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

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

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

    Регистрация сайдбара в WordPress. Как добавить сайдбар в WordPress

    Вывод сайдбара WordPress происходит по определенному принципу, при помощи вызова в файлах шаблона и регистрации в файле functions.php функцией register_sidebar().

    Будьте внимательны, перед регистрацией сайдбара убедитесь что он ранее не был зарегистрирован. При наличии нескольких регистраций с одним и тем же id, возможно возникновение ошибок. Перед редактированием сторонних шаблонов, стоит убедиться что сайдбар не «завязан» к каким-то функционалом шаблона.

    Первым делом откроем файл functions.php и напишем функцию регистрации сайдбара:

    Function my_register_sidebars() { /* регистрация правого сайдбара */ register_sidebar(array("id" => "right-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Правая колонка", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "

  • -списком "after_widget" => "
  • ", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "

    "after_title" => "

    ")); /* регистрация левого сайдбара */ register_sidebar(array("id" => "left-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Левая колонка", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "

    ", // если оставить пустым, будет выводиться в

    "after_title" => "

    ")); /* регистрация сайдбара для футера */ register_sidebar(array("id" => "footer-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Нижний сайдбар", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "
    ", // по умолчанию виджеты выводятся
  • -списком "after_widget" => "
  • ", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "

    ", // если оставить пустым, будет выводиться в

    "after_title" => "

    ")); } add_action("widgets_init", "my_register_sidebars");

    Вставив этот код в файл functions.php мы зарегистрировали сразу два сайдбара боковых - правый, левый и отдельно сайдбар для футера. Также вы можете регистрировать только один сайдбар или добавить еще по необходимости, к примеру в средину страницы.

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

    Как добавить sidebar в wordpress тему

    Принцип добавления сайдбаров

    Если вы пишите тему для своего сайта, и регистрировали сайдбар для виджетов WordPress что бы в нем что-то находилось, тогда смело можете выводить его в нужном месте используя следующий код:

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

    Мы проверили существуют ли виджеты в правом сайдбаре и вывели их на странице. По аналогии, заменяя лишь значение ID сайдбара (right-side) на нужный нам, мы сможем вывести все блоки на страницу в необходимом месте.

    Куда добавить код для вывода сайдбара в WordPress

    Для сайдбаров в вордпресс зарезервирован файл шаблона sidebar.php. Именно в нем в большинстве случаев описывается все необходимое (обертки панелек, условия для вывода на определенных страницах и т.д.)

    Если у вас один сайдбар, тогда добавляйте его код в sidebar.php, и подключайте его в нужном месте в файле index.php с помощью функции:

    При использовании нескольких сайд баров вам нужно будет создавать дополнительные файлы к примеру sidebar-right.php, sidebar-left.php и sidebar-footer.php.

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

    Месторасположение подключения вы выбираете самостоятельно. Значение в скобках должно соответствовать названию файла (sidebar-right .php), выделено жирным.

    Как убрать сайдбар в WordPress?

    Я детально рассказал как добавить сайдбар в WordPress, теперь пойдем от обратного и начнем удалять. Составлю небольшой план как убрать сайдбар в WordPress (перед редактированием файлов обязательно сделайте их копии и пользуйтесь , не редактируйте с админки):

    • Заходим в папку с темой и открываем следующие файлы functions.php, sidebar.php и index.php;
    • ищем и удаляем регистрацию сайдбара в файле функций, как он выглядит описано выше в статье.
    • переходим к файлу sidebar.php и удаляем вызов боковой колонки (нужно удалить все что связано с dynamic_sidebar(), пример так же есть выше).
    • идем в индексный файл и удаляем подключение файлов сайдбара (get_sidebar()).

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

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

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

    Давайте выберем в редакторе темы файл function.php . Для подключения сайдбара к ядру WordPress используется хук widgets_init .

    Add_action("widgets_init", "theme_slug_widgets_init");

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

    Сайдбар подключает функция register_sidebar() . Мы можем зарегистрировать свой собственный сайдбар, который будет показываться на другой тематической странице. Для этого скопируйте код регистрации в function.php дефолтного сайдбара, прямо из редактора кода в админке и вставьте внизу файла.

    Register_sidebar(array(
    "name" => esc_html__("Мой Sidebar", "my_theme"),
    "id" => "sidebar-my",
    "description" => esc_html__("Добавьте свои виджеты.", "my_theme"),
    "before_widget" => "",
    "after_widget" => "",
    "before_title" => "

    ",
    "after_title" => "

    ",
    ));

    Функция register_sidebar() принимает несколько настроек, в кодексе WordPress перечислены все настройки, практически все они уже используются в шаблоне. Точно такой же код, вы можете скопировать прямо из примера в кодексе, он ничем не отличается от стартовой темы.

    Надо изменить некоторые параметры у нового сайдбара:

    Дать ему новое название "Мой Sidebar"

    "name" => esc_html__("Мой Sidebar", "my_theme"),

    Параметр id должен быть уникальным, назовем его - sidebar-my

    "id" => "sidebar-my"

    Описание сайдбара придумаем то же своё - "Добавьте свои виджеты"

    "description" => esc_html__("Добавьте свои виджеты.", "my_theme"),

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

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

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

    После регистрации, нам надо вывести новый сайдбар на странице contact.php , созданной на основе пользовательского шаблона на этом уроке . У страницы с контактами пока нет сайдбара.

    Сделаем копию файла sidebar.php и переименуем в - sidebar-contact.php . В коде нашего сайдбара произведем замену, в передаваемых параметрах заменим id дефолтного сайдбара - "sidebar-1" , на id нового сайдбара - "sidebar-my" .

    Теперь подключим на странице контактов наш новый сайдбар. В параметрах, пропишем какой сайдбар надо подключить, указываем свой "my" , если содержимое скобок оставить пустым, то на странице выведется дефолтный сайдбар.

    Но, мы сделали все правильно и на контактной странице вывелся новый сайдбар. Таким образом можно создавать для каждой страницы свой персональный сайдбар без каких-либо ограничений.

    Изучать, как устроен WordPress и пользоваться этой CMS на уровне профи невозможно без базовых знаний PHP , рекомендую к просмотру толковый .

    Подвалы и сайдбары WordPress – это элементы дизайна сайта, заложенные установленным шаблоном. Сайдбар – это боковая колонка. Большинство современных шаблонов для WordPress поддерживают наличие сайдбаров. Поэтому туда можно поместить какой-то материал. А что в эти области сайта можно поставить и как это правильно сделать, мы расскажем в этой статье.

    Сколько нужно сайдбаров, и что полезного туда добавить

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

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

    Что помещать в сайдбары? Сайдбары в программном плане представляют собой область для виджетов. Поэтому в любую боковую колонку сайта можно поместить один из стандартных виджетов. О виджетах мы рассказывали . Также можно поместить туда какие-то сторонние виджеты, созданные установленными плагинами.

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

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

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

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

    Кроме этого в сайдбаре WordPress может располагаться реклама. Это одно из лучших мест для неё, так как она не разбавляется с контентом и не мешает читать, но при этом не теряется из виду и привлекает внимание. Расположение рекламы в сайдбаре называется ещё «белым» (честным) маркетингом.

    Сайдбаром (sidebar) называется специальное поле на сайте, куда встраиваются виджеты. Иными словами — это колонка с динамическим содержимым. Практически все шаблоны имеют такие колонки и их количество может быть различным. Зачастую используется от 1 до 4 колонки.

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

    Смена расположения сайдбара и основного текста

    Итак, допустим, что в шаблоне, который мы используем, есть одна колонка под виджеты, то есть один сайдбар, и одна основная колонка, где размещается текст наших статей и страниц:

    Пусть колонка с виджетами располагается справа, а нам нужно переместить её влево до самого края. Соответственно колонка с основным текстовым содержимым переместиться вправо до самого края.

    Чтобы всё это сделать, нужно немного изменить стили. Текстовое содержимое зачастую имеет стиль #content, а содержимое с виджетами — #sidebar. Всё что нужно — это сменить свойства у первого с float: left; на float: right; и в другой последовательности для второго.

    Смена расположения сайдбара в теме Twenty Twelwe

    Рассмотрим всё вышесказанное на примере стандартной адаптивной темы для Вордпресс.