Создаем меню и сайдбары в WordPress. Управляем через админку

Сегодня мы научимся создавть меню и сайдбары 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). Далее во вкладке «Внешний вид» выбрать «Меню».
Внешний вид - Меню
Создаем меню с любым названием. Я создал меню с названием «Верхнее меню».
Верхнее меню WordPress
Теперь выберем в блоке «Области темы» для 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; ?>

Все сайдбары настраиваются через админку на странице «Виджеты». Вроде бы все что хотел вам рассказать — рассказал. Если у вас еще остались вопросы или что-то не получается — пишите в комментарии, обязательно поможем.

Создаем меню и сайдбары в WordPress. Управляем через админку: 2 комментария

  1. Ratnik

    Уважаемый автор.
    Если Вы пишете какие-то статьи, то потрудитесь не допускать ошибок.
    Файл functions.php, а не function.php

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *