יצירת תפריט בעל markup נקי בתבניות וורדפרס

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

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

יצירת תפריט בוורדפרס

הצעד הראשון ביצירת תפריט מותאם בוורדפרס הוא לרשום את התפריט באמצעות הפונקציה register_nav_menu. בכדי לעשות זאת הוסיפו את הקוד הבא לקובץ functions.php בתבנית הבת שלכם:

function register_my_menu() {
    register_nav_menu( 'main-menu', __( 'Main Menu' ) );
}
add_action( 'after_setup_theme', 'register_my_menu' );

הפונקציה מגיעה עם לא מעט פרמטרים אותם ניתן למצוא ב wordpress codex. הנה אפשרויות ברירת המחדל לפונקציה זו:

$args = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth' => 0,
    'walker' => ''
);

פרקטית, נדירים המצבים בהם תאלצו להתאים את כל הפרמטרים הללו, להסביר אותם גם כן מעבר לסקופ של מדריך זה. אך שימו לב לפרמטר הראשון והחשוב theme_location. פרמטר זה קובע איזה תפריט יוצג לפי ה slug שקבענו כאשר רשמנו את התפריט באמצעות הפונקציה register_nav_menu().

הצגת התפריט בתבנית וורדפרס

בכדי להציג את התפריט נשתמש בפונקציה wp_nav_menu, הוסיפו את הקוד הבא היכן שתרצו להציג את התפריט בתבנית הבת שלכם:

wp_nav_menu( array(
    'theme_location' => 'main-menu'
) );

בדקו את התפריט החדש שיצרתם, מאד נחמד ופשוט. אך אם תתנו מבט ב markup שהפונקציה wp_nav_menu() הדפיסה, תגלו משהו בסגנון הבא:

<div class="menu-test-container">
    <ul id="menu-test" class="menu">
        <li id="menu-item-6"
            class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6">
            <a href="http://example.com/">בית</a></li>
        <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a
                href="http://example.com/demos/">דמו</a></li>
        <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a
                href="http://example.com/downloads/">הורדות</a></li>
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a
                href="http://example.com/docs/">דוקומנטציה</a></li>
    </ul>
</div>

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

יצירת תפריט עם markup נקי באמצעות Walker Class

אם תחפרו בקוד הליבה של וורדפרס תגלו כי הפונקציה wp_nav_menu() משתמשת ב Walker_Nav_Menu המובנה בוורדפרס בכדי לרנדר ולהדפיס את התפריט. Walker_Nav_Menu הוא קלאס ב php שלצערינו  (במקרה זה) ובמצבו הראשוני מוסיף את אותם מזהים (ID's) וקלאסים לכל פריט הנמצא בתפריט שלכם ומשתמש במספר פילטרים בכדי לעשות זאת.

בכדי להציג תפריט בעל markup נקי ומסודר נכתוב Walker Class בעצמינו שידרוס את ברירת המחדל של Walker_Nav_Menu ויחסוך את השימוש באותם פילטרים. בכדי לעשות זאת צרו php class בתבנית שלכם ״המרחיב״ את Walker_Nav_Menu כבדוגמא הבאה:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
	public function start_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= '<ul>';
	}

	public function end_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= '</ul>';
	}

	public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$classes = array();
		if( !empty( $item->classes ) ) {
			$classes = (array) $item->classes;
		}

		$active_class = '';
		if( in_array('current-menu-item', $classes) ) {
			$active_class = ' class="active"';
		} else if( in_array('current-menu-parent', $classes) ) {
			$active_class = ' class="active-parent"';
		} else if( in_array('current-menu-ancestor', $classes) ) {
			$active_class = ' class="active-ancestor"';
		}

		$url = '';
		if( !empty( $item->url ) ) {
			$url = $item->url;
		}

		$output .= '<li'. $active_class . '><a href="' . $url . '">' . $item->title . '</a></li>';
	}

	public function end_el( &$output, $item, $depth = 0, $args = array() ) {
		$output .= '</li>';
	}
}

כעת יש ברשותנו Walker המדפיס markup מינימלי. בכדי להשתמש בו פשוט מוסיפים ארגומנט לפונקציה wp_nav_menu() בתבנית כבדוגמא הבאה:

wp_nav_menu(array(
    // Whatever you used to register the nav menu with
    'theme_location' => 'main-menu',
    // Instantiate our class & pass it as an argument
    'walker' => new My_Walker_Nav_Menu(),
));

בגדול ניתן לעצור כאן, אך אם אנו רוצים לנקות אף יותר את ה markup נוסיף עוד שני ארגומנטים בקריאה ל wp_nav_menu():

wp_nav_menu(array(
    'theme_location' => 'main-menu',
    'walker' => new My_Walker_Nav_Menu(),
    'container' => false,
    'items_wrap' => '<nav id="%1$s"><ul>%3$s</ul></nav>'
));

שימו לב כיצד נראה ה markup של התפריט שלנו עכשיו, נקי ומסודר כמו שכולנו אוהבים 🙂

<nav>
    <ul>
        <li><a class="active-parent" href="http://example.com/">בית</a></li>
        <li><a href="http://example.com/demos/">דמו</a></li>
        <li><a href="http://example.com/downloads/">הורדות</a></li>
        <li><a href="http://example.com/docs/">דוקומנטציה</a></li>
    </ul>
</nav>

שימו לב לקלאס active-parent שמתווסף כאינדיקציה לעמוד בו אתם נמצאים. ניתן להשתמש בו בכדי לעצב פריט זה בתפריט כיצד שנבחר.

אפשרות אלטרנטיבית לניקוי markup מהתפריט

ישנן האמת עוד מספר אפשרויות להדפיס markup נקי כאשר משתמשים ב wp_nav_menu(), אחת מהן היא באמצעות שימוש בפילטרים. הוסיפו פשוט את הקוד הבא לקובץ functions.php בתבנית הבת שלכם:

function wp_nav_menu_filter( $var ) {
    return is_array( $var ) ? array_intersect( $var, array( 'current-menu-item' ) ) : '';
}

add_filter( 'nav_menu_css_class', 'wp_nav_menu_filter', 100, 1 );
add_filter( 'nav_menu_item_id', 'wp_nav_menu_filter', 100, 1 );
add_filter( 'page_css_class', 'wp_nav_menu_filter', 100, 1 );

נראה מאד פשוט ואתם בטח תוהים מדעו בכלל השתמשנו ב Walker Class אם ניתן לעשות זאת באמצעות פילטרים. הסיבה, או יותר נכון החיסרון של השימוש בפילטרים הוא שאיננו מקבלים קלאס מיוחד ואינדיקציה לפריט בתפריט שכרגע פעיל, כפי שקיבלנו את הקלאס active-parent לפני כן.

לסיכום

במדריך זה ראינו בקצרה כיצד לבנות תפריט מותאם בתבניות וורדפרס והסברנו כיצד להשתמש ב Walker Class על מנת להציג את ה markup של התפריט בצורה נקייה יותר. אשאיר לכם לחשוב באילו מצבים נכון יותר להדפיס את התפריט בצורה זו…