Каталог статей
Кута网络 营销люди выбираютWordPressПриходитьПостройте станцию, но панель навигации некоторых тем не поддерживает вторичные/многоуровневые меню. Если вас это не устраивает, вы можете попробовать вручную добавить или изменить стиль меню темы.
Модификация начинается с header.php, важной функцией в этом файле шаблона является отображение меню.
Если использовать код для вызова категории как меню, то тоже можно, но не удобно сортировать пункты меню.
Каталог с подкатегориями непрост в обращении, поэтому я также хочу добавить в свою тему пользовательскую функцию меню, как и в других темах.
Добавить функцию настройки меню в только что созданную тему несложно, в основном это 2 шага.
Первый шаг, регистрация меню WordPress
Чтобы использовать меню, вы должны сначала зарегистрироваться, открыть файл функций в теме и добавить следующий код ▼
<?php //自定义菜单 if (function_exists('register_nav_menus')) { register_nav_menus( array( 'top_navi' => __('顶部菜单') ) ); register_nav_menus( array( 'menu_navi' => __('站点导航') ) ); register_nav_menus( array( 'foot_navi' => __('底部菜单') ) ); } ?>
- Если в теме нет файла functions.php, создайте новый и скопируйте приведенный выше код, чтобы сохранить его.
登录Серверная часть WordPress, а затем перейдите в «Внешний вид» → «Меню».
Если вы видите экран ниже, это означает, что вы зарегистрировались как ▼
Вышеупомянутое регистрирует 2 меню:
- Верхнее меню Top Menubar.
- главное меню Мain строка меню.
Второй шаг, вызов меню WordPress
После регистрации меню его можно вызвать в файле шаблона темы.Поместите следующий код в файл header.php, и вы сможете вызывать его там, где хотите отобразить меню.
В файле header.php вызвать «верхнее меню»▼
//顶部菜单调用 <?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>
В файле header.php вызвать "главное меню"▼
//主菜单调用 <div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul')); } ?> </div>
'меню_навигация')); ?>
Вызвать «нижнее меню» в файле footer.php▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
Шаг XNUMX: Меню настроек
После того, как меню зарегистрировано и положение отображения меню определено в файле темы, вы можете создать новый пункт меню в фоновом режиме WordPress.
Затем назначьте вновь созданный пункт меню зарегистрированному меню и предложите соответствующую связь ▼
Сделать вордпресс многоуровневую навигационную панель меню
Теперь поговорим о том, как сделать многоуровневое меню WordPress:
Сначала удалите исходный код меню в файле functions вашей собственной темы WordPress.
или добавьте этот код напрямую ▼
<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
- Примечание: должен быть вДобавлен снаружи.
Потом найти PHP код темы для вызова меню, если сырое, то обычно так▼
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
удалите его и замените на ▼
<div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div>
- Примечание. Убедитесь, что этот код не содержит других элементов div, иначе он будет ограничен внешним элементом div.
Следующим шагом будет добавление кода JS-функции раскрывающегося списка и следующего кода в JS-файл темы ▼
jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});});
CSS-стили меню WordPress
Наконец, украшение в стиле CSS.
Какой должен быть эффект, дайте волю своему воображению, CSS может это сделать ▼
#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");} #menu li{border-right:0px #ace solid;} #nav{margin-left:30px;width:900px;height:36px;} #nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid} #nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;} #nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;} .sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;} .sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}
- Добавьте приведенный выше код CSS в файл style.css темы и сохраните его.
После сохранения обновите главную страницу вашего сайта, вы увидите эффект, это очень просто?
Блог Хоуп Чен Вейлян ( https://www.chenweiliang.com/ ) поделился «Как WordPress вызывает пользовательское меню вторичной/многоуровневой панели навигации? , чтобы помочь вам.
Добро пожаловать, чтобы поделиться ссылкой на эту статью:https://www.chenweiliang.com/cwl-1521.html
Добро пожаловать на Telegram-канал блога Chen Weiliang, чтобы быть в курсе последних обновлений!
📚 Это руководство содержит огромную ценность. 🌟Это редкая возможность, не упустите ее! ⏰⌛💨
Делитесь и ставьте лайк, если хотите!
Ваш обмен и лайки - наша постоянная мотивация!