wp bootstrap navwalker
v4.3.0: Version bump to 4.3.0
Этот код в основной ветке репозитория претерпевает большую переработку, чтобы привести его в соответствие с последними стандартами, а также объединить и протестировать накопившиеся у меня PR-запросы, которые я оставил слишком надолго. Пожалуйста, используйте тег v4.3.0 для стабильной версии, пока происходит этот процесс. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
Пользовательский класс WordPress Nav Walker для полной реализации стиля навигации Bootstrap 4 в пользовательской теме с использованием встроенного менеджера меню WordPress.
Это служебный класс, предназначенный для форматирования меню темы WordPress с использованием правильного синтаксиса и классов CSS для использования раскрывающейся навигации Bootstrap. Он не включает необходимые файлы Bootstrap JS и CSS — вам придется включить их вручную.
Этот браузер полностью соответствует всем рекомендациям Theme Review для подачи тем на wordpress.org. Для обеспечения совместимости не требуется никаких изменений, но вы можете при желании заменить текстовый домен wp-bootstrap-navwalker (который появляется дважды в fallback функции) текстовым доменом вашей темы.
Между версией 3 и 4 ходунка произошли существенные изменения в кодовой базе. Версия 4 ходунка создана для работы с Bootstrap 4 и не тестировалась на обратную совместимость с Bootstrap 3. Здесь поддерживается отдельная ветка для Bootstrap 3: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/дерево/v3-ветвь
Вот список наиболее заметных изменений:
class- чтобы лучше соответствовать соглашениям об именах стандартов PHP-кодирования.class-wp-bootstrap-navwalker.phpwp-bootstrap-navwalker.phpCSS Classes , а не через ввод Title .sr-only . Поместите class-wp-bootstrap-navwalker.php в папку темы WordPress /wp-content/themes/your-theme/
Откройте файл function.php темы WordPress — /wp-content/themes/your-theme/functions.php — и добавьте следующий код:
/**
* Register Custom Navigation Walker
*/
function register_navwalker (){
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );Если вы столкнулись с ошибками в приведенном выше коде, используйте подобную проверку, чтобы вернуть чистые ошибки и помочь диагностировать проблему.
if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
// File does not exist... return an error.
return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
// File exists... require it.
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
} Вам также нужно будет объявить новое меню в файле functions.php , если оно еще не существует.
register_nav_menus ( array (
' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) ); Добавьте или обновите любые функции wp_nav_menu() в вашей теме (часто встречающиеся в header.php ), чтобы использовать новый ходунок, добавив элемент 'walker' в массив аргументов wp_nav_menu.
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 , // 1 = no dropdowns, 2 = with dropdowns.
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' navbar-nav mr-auto ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );Теперь ваше меню будет отформатировано с использованием правильного синтаксиса и классов для реализации раскрывающейся навигации Bootstrap.
Обычно меню окружено дополнительной разметкой. Вот пример меню с fixed-top , которое сворачивается для обеспечения отзывчивой навигации в точке останова md.
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu ( array (
' 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> Чтобы изменить стиль меню, добавьте имена классов навигации Bootstrap в объявление menu_class .
Просмотрите параметры в документации Bootstrap для получения дополнительной информации о классах навигации.
Чтобы отобразить меню, вы должны связать свое меню с местоположением вашей темы. Вы можете сделать это, выбрав местоположение своей темы в списке «Местоположения тем» при редактировании меню в менеджере меню WordPress.
Был некоторый интерес к тому, чтобы сделать этот обходчик по умолчанию для всех меню. Это может привести к непредвиденным ситуациям, но этого можно добиться, добавив эту функцию в файл function.php.
function prefix_modify_nav_menu_args ( $ args ) {
return array_merge ( $ args , array (
' walker ' => new WP_Bootstrap_Navwalker (),
) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );Простого обновления ходунка может быть недостаточно для правильной работы меню, вам может потребоваться добавить оболочки или дополнительные классы, вы также можете сделать это с помощью вышеуказанной функции.
Bootstrap 5 использует атрибуты данных в пространстве имен. Все атрибуты data теперь включают bs в качестве инфикса. Новые атрибуты работают так же, как и старые. Вот кнопка переключения меню из приведенного выше примера с переименованными атрибутами данных.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button> Ходок также добавляет атрибут данных для переключения раскрывающегося списка с помощью метода start_el() . Вставьте это в свой файл function.php, чтобы ходун использовал атрибут фиксированных данных.
add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
* Use namespaced data attribute for Bootstrap's dropdown toggles.
*
* @param array $atts HTML attributes applied to the item's `<a>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @return array
*/
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
unset( $ atts [ ' data-toggle ' ] );
$ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
}
}
return $ atts ;
}На некоторых сайтах создание большого меню, которое редко меняется при каждом запросе страницы, является накладными расходами, которых следует избегать. В таких случаях я могу предложить вам рассмотреть возможность сохранения результатов меню во временном режиме.
Самый большой недостаток кэширования навигационных меню с помощью этого метода заключается в том, что он не может легко применить класс .current-menu-item или .active к текущему активному элементу, поскольку WP решает, что в данный момент активно при загрузке страницы, и поскольку меню кэшируется. он знает только активную страницу, на которой он изначально был кэширован.
Вы можете сами решить, хотите ли вы мириться с этими недостатками ради устранения времени создания меню при большинстве загрузок страниц. Вы можете прочитать эту статью Дэйва Клементса, чтобы узнать, как мы кэшировали навигационные меню, созданные этим ходунком: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
При этом обязательно установите для аргумента echo значение FALSE в вызове the wp_nav_menu() чтобы результаты можно было сохранять, а не отображать на странице.
См. также:
Этот скрипт включал возможность использования модов навигационных ссылок Bootstrap в ваших меню через пользовательский интерфейс меню WordPress. Поддерживаются отключенные ссылки, раскрывающиеся заголовки и раскрывающиеся разделители. Кроме того, поддержка значков встроена в Glyphicons и Font Awesome (примечание: вам нужно будет включить таблицы стилей или ресурсы значков отдельно).
Чтобы добавить значок к вашей ссылке, просто введите имена классов Glyphicons или Font Awesome в поле «Классы CSS ссылок» в пользовательском меню меню, а класс Walker сделает все остальное. IE glyphicons glyphicons-bullhorn или fa fa-arrow-left или fas fa-arrow-left .
Чтобы элемент отображался только со значком, примените класс чтения с экрана начальной загрузки sr-only к элементу вместе с любыми именами классов значков. Тогда будет скрыт только текст, который будет отображаться как текст ссылки.
Чтобы установить отключенную ссылку, просто добавьте disabled в поле «Классы CSS» в пользовательском меню, а класс Walker сделает все остальное. Примечание. Помимо добавления класса .disabled, это также изменит ссылку href на # чтобы по ней нельзя было перейти.
Заголовки, разделители и текстовые элементы можно добавлять в раскрывающиеся списки, добавив пользовательскую ссылку и добавив либо dropdown-header , dropdown-divider , либо dropdown-item-text во входные данные CSS-классов . Примечание. Это приведет к удалению href элемента и его изменению на <span> для заголовков или на <div> для разделителей.
Согласно документации для wp_nav_menu() необходимо предоставить экземпляр класса пользовательского обходчика, чтобы применить его к меню. Поскольку экземпляр не поддерживает сериализацию JSON, ярлык редактирования меню не будет отображаться в предварительном просмотре настройщика. Чтобы это исправить, сделайте следующее:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
- 'walker' => new WP_Bootstrap_Navwalker(),
+ 'walker' => 'WP_Bootstrap_Navwalker',
) );functions.php function slug_provide_walker_instance ( $ args ) {
if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
$ args [ ' walker ' ] = new $ args [ ' walker ' ];
}
return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );Пожалуйста, ознакомьтесь с журналом изменений.
