איך וורדפרס קוראת לתפריט מותאם אישית של סרגל ניווט משני/רב רמות?

הרבהשיווק באינטרנטאנשים בוחריםוורדפרסלבואבנה תחנה, אך סרגל הניווט של ערכות נושא מסוימות אינו תומך בתפריטים משניים/רב-רמות. אם אינך מרוצה, תוכל לנסות להוסיף או לשנות באופן ידני את סגנון התפריט של ערכת הנושא.

השינוי מתחיל מ-header.php פונקציה חשובה בקובץ תבנית זה היא הצגת התפריט.

אם אתה משתמש בקוד כדי לקרוא לקטגוריה כתפריט, זה גם אפשרי, אבל זה לא נוח למיין את פריטי התפריט.

הספרייה עם קטגוריות המשנה אינה קלה לטיפול, אז אני גם רוצה להוסיף פונקציית תפריט מותאמת אישית לנושא שלי כמו ערכות נושא אחרות.

זה לא קשה להוסיף פונקציית התאמה אישית של תפריט לנושא החדש שנוצר, יש בעיקר 2 שלבים.

השלב הראשון, רישום תפריט וורדפרס

כדי להשתמש בתפריט יש להירשם תחילה, לפתוח את קובץ הפונקציות תחת הנושא ולצרף את הקוד הבא ▼

<?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 תחת ערכת הנושא, צור קובץ חדש והעתק את הקוד שלמעלה כדי לשמור אותו.

登录קצה אחורי של וורדפרס, ולאחר מכן עבור אל מראה → תפריט.

אם אתה יכול לראות את המסך למטה, זה אומר שנרשמת כ-▼

האמור לעיל רושם 2 תפריטים:

1. תפריט עליון בסרגל התפריט העליון.
2. תפריט ראשי Main שורת תפריטים.

השלב השני, שיחת התפריט של וורדפרס

לאחר רישום התפריט ניתן לקרוא לו בקובץ תבנית הנושא, הכניסו את הקוד הבא בקובץ 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: תפריט הגדרות

לאחר רישום התפריט ומיקום התצוגה של התפריט מוגדר בקובץ ערכת הנושא, ניתן ליצור פריט תפריט חדש ברקע וורדפרס.

לאחר מכן, הקצה את פריט התפריט החדש שנוצר לתפריט הרשום, והצע את הקשר המתאים ▼

הפוך את שורת הניווט בתפריט מרובה של וורדפרס

עכשיו בואו נדבר על איך ליצור תפריט וורדפרס מרובה רמות:

תחילה מחק את קוד התפריט המקורי בקובץ הפונקציות של ערכת הנושא של וורדפרס משלך.

או הוסף קוד זה ישירות ▼

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

לבסוף, ייפוי בסגנון 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 של ערכת הנושא ושמור אותו.

לאחר השמירה, רענן את העמוד הראשי של האתר שלך, אתה יכול לראות את האפקט, האם זה מאוד פשוט?