Добавление блока виджетов в тему WordPress

Опубликовано: 01.09.2018

видео Добавление блока виджетов в тему WordPress

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

При помощи виджетов,  можно очень легко добавлять на блог различные элементы.


Что такое ВИДЖЕТЫ? Добавление и настройка ВИДЖЕТОВ на сайт Wordpress

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

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


Добавляем виджет ВК и "социальные кнопки" на сайт wordpress

В этом уроке мы и рассмотрим добавление блока виджетов в тему WordPress. Практически все современные темы уже поддерживают виджеты однако в некоторых случаях вам может понадобиться добавить дополнительные виджеты.

Пригодиться вам это может в следующих случаях:

если нужно добавить виджет, в то место темы, где вывод виджета не предусмотрен (в некоторых темах вывод виджетов предусмотрен в сайдбаре, но не предусмотрен в футере); если вы создаете новую тему и вам нужно добавить данный функционал; если вы хотите в одном сайдбаре иметь несколько блоков виджетов; если вы используете тему, в которой нет поддержки виджетов.

Управлять виджетами вы можете, перейдя в админ панели WordPress в пункт «Внешний вид» >> «Виджеты». Если ваша тема поддерживает виджеты, то перед вами появится две области. Слева буду располагаться доступные виджеты, а справа блоки, в которые вы их можете добавлять.

Если тема не поддерживает виджеты, у вас появится сообщение:

Теперь рассмотрим, как добавить блок виджетов в вашу тему. Вначале в файл functions.php вашей темы необходимо добавить следующий код:

if ( function_exists('register_sidebar') ) register_sidebar(array('name'=>'Правая колонка', 'before_widget' => '<div class="neobhodimui-klass">', 'after_widget' => '</div>', 'before_title' => '<div class="title">', 'after_title' => '</div>', ));

Этот файл вы можете найти, пройдя в пункт: пака с вашим блогом/wp-content/themes/название вашей темы. Редактируйте данный файл редактором, сохраняющим в кодировке UTF8, можете воспользоваться редактором Notepad2 . Обращаю ваше внимание на то, что содержимого этого файла должно начинаться с <?php и заканчиваться ?>, ели вы создаете этот файл сами то обязательно добавьте эти элементы.

Теперь пройдемся по коду. Первая строка параметр 'name' здесь вам необходимо указать название блока виджетов. Чтобы не было путаницы, название можете давать в соответствии с тем, где размещается данный блок. Вторая строка -before_widget, здесь укажите тот HTML код который вы хотите добавить перед виджетом, третья строка after_widget, здесь укажите код который будет располагаться после виджета.

Т. е. в данном случае весь виджет будет помещен в <div class="neobhodimui-klass"></div>. В четвертой и пятой строке можно указать необходимый код который отобразится до и после заголовка соответственно. Это позволяет управлять внешним видом  вашего виджета при помощи добавления необходимых стилей в файле style.css шаблона.

После внесения всех необходимых исправлений сохраните файл functions.php.

Теперь нам необходимо вывести данный блок виджетов в определенном месте вашего блога. Поэтому здесь открываете для редактирования тот файл, вашей темы, который отвечает за необходимый вам элемент. Если хотите добавить в сайдбар, открываете файл sidebar.php, если футер открываете файл footer.php. Название файлов может отличаться в зависимости от темы. И добавляете туда следующий код:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Правая колонка') ) { ?> <!-все что вы вставите в это место, будет отображаться ели нет активных виджетов в этой колонке--> <?php } ?>

Здесь как вы видите необходимо указать то имя блока, которое мы задали в файле functions.php, в данном случае это «Правая колонка». После этого можете сохранить редактируемый файл.

Теперь можете перейти в админ панели WordPress в пункт: «Внешний вид» >> «Виджеты» и если вы все сделали правильно, то справа отобразится только что созданный вами блок, в который вы можете перетащить доступные вам виджеты.

После добавления необходимых элементов можете проверить, отображаются ли они на станицах самого блога.

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

Материал подготовлен сайтом:  WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности

Опубликовано: 30 Июль 2011

Обновлено: 08 Сентябрь 2013

Просмотров: 16290

rss