كيف يستدعي WordPress قائمة مخصصة لشريط التنقل الثانوي / متعدد المستويات؟

كثير网络 营销يختار الناسWordPressتأتيبناء محطة، لكن شريط التنقل لبعض السمات لا يدعم القوائم الثانوية / متعددة المستويات. إذا لم تكن راضيًا ، يمكنك محاولة إضافة أو تعديل نمط قائمة السمة يدويًا.

يبدأ التعديل من header.php ، وتتمثل إحدى الوظائف المهمة في ملف القالب هذا في عرض القائمة.

إذا كنت تستخدم الرمز لاستدعاء الفئة كقائمة ، فمن الممكن أيضًا ، ولكن ليس من الملائم فرز عناصر القائمة.

ليس من السهل التعامل مع الدليل الذي يحتوي على فئات فرعية ، لذلك أريد أيضًا إضافة وظيفة قائمة مخصصة إلى السمة الخاصة بي مثل السمات الأخرى.

ليس من الصعب إضافة وظيفة تخصيص القائمة إلى المظهر الذي تم إنشاؤه حديثًا ، فهناك خطوتان أساسيتان.

الخطوة الأولى ، التسجيل في قائمة ووردبريس

لاستخدام القائمة ، يجب عليك أولاً التسجيل ، وفتح ملف الوظائف تحت الموضوع ، وإلحاق الكود التالي ▼

<?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' => __('底部菜单') ) );
}
?>

• إذا لم يكن هناك ملف function.php تحت السمة ، فأنشئ ملفًا جديدًا وانسخ الكود أعلاه لحفظه.

登录ووردبريس الخلفية، ثم انتقل إلى المظهر ← القائمة.

إذا كان بإمكانك رؤية الشاشة أدناه ، فهذا يعني أنك قمت بالتسجيل كـ ▼

يسجل أعلاه قائمتين:

1. أعلى قائمة أعلى Menubar.
2. القائمة الرئيسية مaiن مينوبار.

الخطوة الثانية ، استدعاء قائمة 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 الخاص بك.

أو أضف هذا الرمز مباشرة ▼

<?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>

• ملاحظة: تأكد من أن هذا الرمز لا يحتوي على divs أخرى ، وإلا فسيتم تقييده بواسطة 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 الخاص بالقالب واحفظه.

بعد الحفظ ، قم بتحديث الصفحة الأولى من موقع الويب الخاص بك ، يمكنك رؤية التأثير ، هل هو بسيط جدًا؟