Создание своего меню в WordPress без плагина

Создание своего меню в WordPress без плагинаБывает, что в WordPress возникает необходимость добавить свое меню — горизонтальное, вертикальное, выпадающее, со своим стилем и т. д. Чтобы создать меню в WordPress, мы напишем функцию добавления меню и разместим ее в нужной части темы WordPress. Добавим функцию создания меню в файл wp-content/themes/ваша_тема/functions.php. Если в папке с вашей темой этот файл отсутствует, просто создайте его.

Добавьте в functions.php:

function my_menu() {

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

echo "<ul class='my_menu'>";

Далее нужно создать пункт меню «Категории» и выпадающее меню категорий. Для генерации списка категорий будет использоваться функция wp_list_categories(). Подробнее про использование этой функции вы можете узнать из статьи как программно вывести список категорий и терминов таксономии в WordPress.

Я буду выводить список категорий без учета иерархии:

echo " <li>Категории";
echo "   <ul>"; //Выводим подменю
$args = array(
 'orderby' => 'name',
 'hierarchical' => false,
 'title_li' => "", //Скрываем заголовок у списка
);
wp_list_categories($args); //Выводим список категорий
echo '   </ul>';
echo ' </li>'; //Закрывающий тег пункта меню "Категории"

Далее выводим второй пункт — меню «теги» и его подменю — список тэгов:

echo " <li>Тэги";
echo '   <ul>';  //Выводим подменю
$args = array(
 'orderby' => 'name',
 'taxonomy' => "post_tag", //Указываем тип таксономии - список тэгов
 'title_li' => "", //Скрываем заголовок у списка
);
wp_list_categories($args); //Выводим список тэгов
echo ' </ul>'; //Закрывающий тэг подменю
echo ' </li>'; //Закрывающий тег пункта меню "Тэги"
echo '</ul>'; //Закрываем тэг меню 'my_menu'

Функция my_menu целиком:

<?php
  function my_menu() {
    echo "<ul class='my_menu'>";
    echo " <li>Категории";
    echo '  <ul>';
    $args = array(
      'orderby' => 'name',
      'hierarchical' => false,
      'title_li' => "", //Скрываем заголовок у списка
    );
    wp_list_categories($args); //Выводим подменю категорий
    echo '  </ul>'; //Закрывающий тэг подменю
    echo ' </li>'; //Закрывающий тег пункта меню "Категории"
    echo " <li>Тэги";
    echo ' <ul>';
    $args = array(
      'orderby' => 'name',
      'taxonomy' => "post_tag", //Указываем имя таксономии - список тэгов
      'title_li' => "", //Скрываем заголовок у списка
    );
    wp_list_categories($args); //Выводим подменю тэгов
    echo ' </ul>'; //Закрывающий тэг подменю
    echo ' </li>'; //Закрывающий тег пункта меню "Тэги"
    echo '</ul>'; //Закрываем тэг меню 'my_menu'
 }

После этого нужно вызвать функцию my_menu() в коде темы. Для примера я размещу эту функцию в файле шапки (header.php) моей темы. Вы можете  разместить эту функцию где угодно, в подвале (footer.php), или сайдбаре (sidebar.php) например:

<?php my_menu(); //Вставляем функцию в код скрипта темы, в моем случае в header.php ?>

HTML код полученного в результате работы функции меню:

<ul class="my_menu"> 
    <li>Категории  
        <ul>	
            <li class="cat-item cat-item-41"><a href="">CMS</a>
            </li>
            <li class="cat-item cat-item-4"><a href="">PHP</a>
            </li>
            <li class="cat-item cat-item-34"><a href="">PHP для новичков</a>
            </li>
            <li class="cat-item cat-item-5"><a href="">SQL</a>
            </li>
            <li class="cat-item cat-item-39"><a href="">Wordpress</a>
            </li>
            <li class="cat-item cat-item-10"><a href="">Администрирование UNIX</a>
            </li>
            <li class="cat-item cat-item-3"><a href="">Администрирование Web-сервера</a>
            </li>
            <li class="cat-item cat-item-9"><a href="">Администрирование Windows</a>
            </li>
        </ul> 
    </li> 
    <li>Тэги  
        <ul>	
            <li class="cat-item cat-item-12"><a href="">Apache</a></li>
            <li class="cat-item cat-item-40"><a href="">linux</a></li>
            <li class="cat-item cat-item-43"><a href="">VirtualBox</a>
            </li>
        </ul> 
    </li>
</ul>

Теперь осталось применить CSS стили к данному меню, сделав его к примеру, выпадающим. Как это сделать читайте в статье Создание горизонтального выпадающего меню на чистом CSS.

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

Ваш адрес email не будет опубликован.