Блог веб разработчика

Подключение дополнительных файлов стилей замедляет работу сайта и будет негативно расценено тестом скорости от гугл. Проще всего свои дополнительные стили добавлять в style.css, лежащий в корневой директории темы. Однако, если стоит задача все-таки подключить еще один файл, то делать это надо так:

function add_theme_styles() {
    // вместо style.css имя вашего файла стилей
    wp_enqueue_style( 'main-stylesheet', get_template_directory_uri() . '/style.css', false, '1.0.0' 'all' );
}
 
add_action( 'wp_enqueue_scripts', 'add_theme_styles' );

Данный код необходимо добавить в файл functions.php вашей темы.

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

1. В файле functions.php надо добавить тип меню:

   register_nav_menus(array(   
     'footer_menu' => 'Меню в footer'
   ));

2. В то место верстки, где раньше была конструкция ul>li>a добавляем код:

   wp_nav_menu(array(
     'theme_location' => 'footer_menu', // расположение меню в теме
     'menu' => '', // название меню
     'container' => 'div', // контейнер для меню, по умолчанию 'div', в нашем случае ставим 'nav', пустая строка - нет контейнера
     'container_class' => '', // класс для контейнера
     'container_id' => '', // id для контейнера
     'menu_class' => 'footer-menu', // класс для меню
     'menu_id' => '', // id для меню
   ));

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

   Теперь как быть с многоуровневым меню? Как правило его верстают с использованием bootstrap и приведенное ниже решение подходит только для сайтов, сверстанных с использованием данного фрэймворка. Тут алгоритм будет следующий:  в functions.php прописываем код:

   /* Nav Walker for bootstrap menu */
   add_action( 'after_setup_theme', 'wpt_setup' );
   if ( ! function_exists( 'wpt_setup' ) ):
   function wpt_setup() {
   register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
   } endif;
   // Register custom navigation walker
   require_once('wp_bootstrap_navwalker.php');

   wp_bootstrap_navwalker.php есть на github. Именно он и реализует вывод вложенного меню, для этого, в то место верстки, где располагалось меню необходимо внести:

   <nav class="navbar navbar-default" role="navigation">
   
   <div class="container-fluid">
   
   <!-- Brand and toggle get grouped for better mobile display -->
   
   <div class="navbar-header">
   
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
   
   <span class="sr-only">Toggle navigation</span>
   
   <span class="icon-bar"></span>
   
   <span class="icon-bar"></span>
   
   <span class="icon-bar"></span>
   
   </button>
   
   
   </div>
   
    
   
   <?php
   
   wp_nav_menu( array(
   
   'menu'              => 'primary',
   
   'theme_location'    => 'primary',
   
   'depth'             => 2,
   
   'container'         => 'div',
   
   'container_class'   => 'collapse navbar-collapse',
   
   'container_id'      => 'bs-example-navbar-collapse-1',
   
   'menu_class'        => 'nav navbar-nav',
   
   'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
   
   'walker'            => new wp_bootstrap_navwalker())
   
   );
   
   ?>
   
   </div>
   
   </nav>

   После этого, возможно придется немного подкорректировать стили, но самое главное — появится меню. Само меню еще нужно корректно настроить в админке сайта

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

Затем в файле functions.php прописывается функция хлебных крошек: Читать далее «Хлебные крошки на вордпресс без плагина»