איך ליצור בעזרת wp_nav_menu תפריט רספונסיבי למובייל

במדריך הזה נלמד ליצור תפריט רספונסיבי מדליק למובייל בעזרת wp_nav_menu

רצויי  לקרא את המדריך הזה לפני.

רצויי מאוד ליצור child theme אך לא חובה. ( יצירת תבנית בת מאפשרת לעשות עידכון ולשמור על הקיים)

יש מליון דרכים אחרות לעשות את זה.

שלב ראשון:

לפתוח functions.php ולהדביק שם את הקוד הבא ( נמצא בספריית התבנית שלכם)

function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'twentythirteen' ));
}
add_action( 'after_setup_theme', 'extra_setup' );

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

שלב שני:

פתחו את הקובץ header.php

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

<?php wp_nav_menu( array( 'theme_location' => 'primary mobile', 'menu_class' => 'nav-menu' ) ); ?>;

שלב  שלישי:

נפתח שוב את functions.php ונדביק שם את הקוד הבא

function set_container_class ($args) {
$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav';
 return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')

 

שלב רביעי ואחרון

נוסיף לקובץ styles.css את הקוד הבא.

.primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}