Каталог статей
багатоІнтернет-маркетинглюди вибирають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 меню:
- Верхнє меню Верхня панель меню.
- головне меню М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>
'menu_navi')); ?>
Викличте «нижнє меню» у файлі footer.php▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
Крок XNUMX: Меню налаштувань
Після реєстрації меню та визначення позиції відображення меню у файлі теми ви можете створити новий пункт меню у фоновому режимі WordPress.
Потім призначте щойно створений пункт меню зареєстрованому меню та запропонуйте відповідний зв’язок ▼
Зробіть багаторівневу панель навігації меню WordPress
Тепер поговоримо про те, як зробити багаторівневе меню WordPress:
Спочатку видаліть оригінальний код меню у файлі функцій вашої власної теми 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 теми та збережіть його.
Після збереження оновіть першу сторінку вашого веб-сайту, ви можете побачити ефект, це дуже просто?
Блог Hope Chen Weiliang ( https://www.chenweiliang.com/ ) поділився «Як WordPress викликає спеціальне меню вторинної/багаторівневої панелі навігації? , щоб допомогти вам.
Ласкаво просимо поділитися посиланням на цю статтю:https://www.chenweiliang.com/cwl-1521.html
Ласкаво просимо до каналу Telegram у блозі Чень Вейляна, щоб отримувати останні оновлення!
📚 Цей посібник має величезну цінність. 🌟Це рідкісна можливість, не пропустіть її! ⏰⌛💨
Поділіться та вподобайте, якщо вам подобається!
Ваші публікації та лайки є нашою постійною мотивацією!