יצירת תפריט בעל 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 Developer Reference. הנה אפשרויות ברירת המחדל לפונקציה זו:

$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 שבמצבו הראשוני מוסיף מזהים (IDs) וקלאסים לכל פריט בתפריט ומשתמש במספר פילטרים כדי לעשות זאת. במקרה הזה, זה פחות מתאים.

כדי להציג תפריט בעל markup נקי ומסודר, ניתן לכתוב Walker Class משלכם שידרוס את ברירת המחדל של Walker_Nav_Menu ויחסוך את השימוש באותם פילטרים. צרו קלאס PHP בקובץ functions.php בתבנית הבת שלכם ש"מרחיב" את 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="' . esc_url($url) . '">' . esc_html($item->title) . '</a>';
    }
    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= '</li>';
    }
}

שימו לב לשימוש ב-esc_url() ו-esc_html() בעת הדפסת ה-URL והכותרת. תמיד יש לבצע escaping לפלט כדי למנוע פרצות XSS, גם כשבונים Walker מותאם.

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

wp_nav_menu(array(
    'theme_location' => 'main-menu',
    '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 class="active-parent"><a 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 שמתווסף לאלמנט ה-<li> כאינדיקציה לעמוד בו אתם נמצאים. ניתן להשתמש בו כדי לעצב פריט זה בתפריט כרצונכם.

אפשרות אלטרנטיבית לניקוי 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 קודם.

שאלות נפוצות

שאלות נפוצות על markup של תפריטים ו-Walker Class בוורדפרס:

סיכום

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