יצירת תפריט עם HTML משלכם בוורדפרס

יוצא לי לא מעט לעבוד עם וורדפרס שמשתבחת מגרסה לגרסה (חוץ מזה שהיא כתובה ב-PHP והספגטי כמו באיטליה!). אחד מהתוספים שאני הכי אוהב לעבוד איתם הוא התוסף Advanced custom field שהופך את כל ההגדרה והממשקולוגיה של custom fields שאפשר להצמיד לדפים ולפוסטים לממש ממש קל. אני בדרך כלל משתמש ב-custom fields באופן די מקיף באתר ואפילו משתמש בפונקציה גנרית עם static caching כדי לקרוא לערכים שאני רוצה בלי להעיק יותר מדי על מסד הנתונים. הנה דוגמה לפונקציה כזו שקוראת לתמונה שמוגדרת כ-custom field:


function get_image_type($id = NULL, $image_custom_name) {
    if($id == NULL) {
        $id = get_the_ID();
    }
    static $result = array();
    if(isset($result[$image_custom_name][$id]))
        return $result[$id];
    $icon_meta = get_post_meta($id, $image_custom_name);
    $result[$image_custom_name][$id] = wp_get_attachment_image($icon_meta[0]);

    return $result[$image_custom_name][$id];
}

ואפשר כמובן לשחק עם זה עוד ועוד.

אחד הדברים שמעצבים אוהבים לעשות זה להצמיד כל מיני אייקונים קטנים לתפריטים. במקום להגדיר את האייקונים ב-CSS וכך לשנות את הקוד בכל פעם שלמעצב מתחשק לשנות איזה אייקון ארור, אני מאוד אוהב להגדיר לדפים/פוסטים שיש בתפריט custom field בתור תמונה ואז הלקוח צריך להגדיר את התמונה במקום שאני אתעסק איתה. מה הבעיה? הבעיה היא שליצור walker לכל תפריט כדי להדפיס את התמונה הקטנה מאוד מאוד מבאס. למה? כי אני נורא שונא לערבב OO עם פרוצדורלי וזה מטריף אותי הברדק הזה. לא רוצה להשתמש ב-Walker אם אני יכול להמנע מזה. חוץ מזה, עבור רוב הדברים שאני צריך זה די להשמיד יתוש עם תותח.
איך פתרתי את זה? באמצעות פונקציה קטנה שבונה את התפריט מאפס ומאפשרת לי שליטה מלאה על ה-HTML שלו – כולל גישה ל-ID של כל פריט בתפריט (ה-ID האמיתי, לא ה-ID של התפריט).

איך זה נראה? ממש ממש כך:


function internet_il_get_my_menu($menu_name) {
    $current_id = get_the_ID();
    if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
        $menu = wp_get_nav_menu_object($locations[$menu_name]);
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_list = "<nav class="$menu_name">\n";
        $menu_list .= "<ul>\n";
        foreach ($menu_items as $key => $menu_item) {
            $title = $menu_item->title;
            $url = $menu_item->url;
            if($current_id == $menu_item->object_id) {
                $current_class = "current";
            } else {
                $current_class = '';
            }
            $menu_list .= "<li class='$current_class'><a href='$url'>$title</a></li>\n";
        }
        $menu_list .= "</ul>\n";
        $menu_list .= "</nav>\n";
    } 
    return $menu_list;
}

באופן עקרוני אין כאן גליק גדול ובסופו של דבר מדובר בקוד מבחיל אך שימושי למדי שמייצר HTML מאובייקט באופן לא אלגנטי אבל מאוד לעניין. מה שחשוב הוא שאני יכול בכל שלב להשתמש ב $menu_item->object_id על מנת לעשות קריאה לפונקציה כמו הפונקציה הראשונה על מנת לקבל את נתוני ה-custom field ולהשתמש בהם בתפריט. בין אם מדובר באייקון או בין אם מדובר במשהו אחר. מאוד מאוד שימושי לתפריטי 'מומלצים' או תפריטים של 'מוצרים נבחרים' ושאר הג'אז הזה.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

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

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.

מאמרים אחרונים