Сегодня мы научимся создавть меню и сайдбары WordPress, которые будут управляться через Админ-панель WordPress (админка). Сайдбаров и меню можно создавать сколько угодно. Если не хотите читать про создание меню, можете сразу перейти к созданию сайдбара. Если у вас еще нет сайта на WordPress, то вот вам статья о том, как быстро и легко создать сайт.
Создание меню
Для начала нам нужно зайти в functions.php нашей темы. Прокручиваем страницу до конца и перед ?> вставляем этот код:
function register_my_menus() { register_nav_menus (array( 'header-menu' => 'Menu v Shapke', 'footer-menu' => 'Menu v podvale')); } if (function_exists('register_nav_menus')) { add_action( 'init', 'register_my_menus' ); }
Разберемся немножко в коде. На 4 строчке в скобках после array указываем меню:
‘header-menu’ — это название нужно для вывода меню на страницу;
‘Menu v Shapke’ — название, которое будет выводиться в админке в разделе «Внешний вид» — «Меню». Таким же образом я добавил нижнее меню(footer-menu). Через запятую перечисляем столько меню, сколько вам нужно.
Код if (function_exists(‘register_nav_menus’))… проверяет, поддерживает ли текущая версия WordPress функцию регистрации меню register_nav_menus (функция не поддерживается только в очень старых версиях).
При верстке этого шаблона я верхнее меню указал в файле header.php, так как это меню на всем сайте одно и то же. Переходим в header.php нашей темы и в том месте, где должно быть меню вставляем код:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
Аналогично и для футера:
<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
Теперь нам нужно создать меню через админку. Для этого зайдем в Админку (вашсайт.ру/wp-admin). Далее во вкладке «Внешний вид» выбрать «Меню».
Создаем меню с любым названием. Я создал меню с названием «Верхнее меню».
Теперь выберем в блоке «Области темы» для Menu v Shapke наше «Верхнее меню» и нажмем «Сохранить».
Создание сайдбара
Сайдбар нужен, чтобы в него можно было вставлять виджеты. Виджеты используют очень много плагинов и если ваша тема не поддерживает виджеты, нужно это срочно исправить.
Чтобы создать сайдбар для WordPress нужно зайти в functions.php и добавить новую функцию.
if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Left Sidebar', 'before_widget' => '<div id="%1$s" class="sidearea %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="widgettitle">', 'after_title' => '</h6>', )); }
Пояснения:
‘name’ — название сайдбара, которое выводится в разделе «Внешний вид» — «Виджеты»
‘before_title’ — до названия виджета.
‘before_widget’ — что будет стоять до виджета. Можно поставить тег <li>, но я привык работать через <div>. Через <div> легче будет настроить css оформление сайдбара.
‘after_widget’ — что будет стоять после виджета. Если вы в ‘before_widget’ использовали <div> (как я), то указываем закрывающий тег </div>, если прописывали <li>, то используем </li>.
‘after_title’ — после названия виджета.
В то место, где будет находится сайдбар (у меня это sidebar.php) вставляем:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?> <?php endif; ?>
Переходим в Админку — «Внешний вид» — «Виджеты» и добавляем несколько виджетов. Настраиваем css для красивого оформления сайдбара. Я уже при верстке знал, как будут выводится виджеты и заранее прописал оформление в style.css.
Несколько сайдбаров
Чтобы сделать несколько сайдбаров в functions.php нужно зарегистрировать пару сайдбаров.
Вот как это выглядит у меня:
if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Left Sidebar', 'before_widget' => '<div id="%1$s" class="sidearea %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="widgettitle">', 'after_title' => '</h6>', )); register_sidebar(array( 'name' => 'Right Sidebar', 'before_widget' => '<div id="%1$s" class="sidearea %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="widgettitle">', 'after_title' => '</h6>', )); register_sidebar(array( 'name' => 'Three Sidebar', 'before_widget' => '<div id="%1$s" class="sidearea %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="widgettitle">', 'after_title' => '</h6>', )); }
Как вы уже заметили, для добавления еще одного сайдбара нужно добавить код:
register_sidebar(array( 'name' => 'Tut Luboe Nazvanie', 'before_widget' => '<div id="%1$s" class="sidearea %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="widgettitle">', 'after_title' => '</h6>', ));
А чтобы вывести сайдбар на странице нужно вставить код
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(номер сайдбара) ) : ?> <?php endif; ?>
«Three Sidebar» в списке сайдбаров третий, поэтому код для вывода у него будет такой:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?> <?php endif; ?>
Все сайдбары настраиваются через админку на странице «Виджеты». Вроде бы все что хотел вам рассказать — рассказал. Если у вас еще остались вопросы или что-то не получается — пишите в комментарии, обязательно поможем.
Уважаемый автор.
Если Вы пишете какие-то статьи, то потрудитесь не допускать ошибок.
Файл functions.php, а не function.php
Спасибо, исправлю.