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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

יוצא לי לא מעט לעבוד עם וורדפרס שמשתבחת מגרסה לגרסה (חוץ מזה שהיא כתובה ב-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 = "\n";
        $menu_list .= "\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 .= "$title\n";
        }
        $menu_list .= "\n";
        $menu_list .= "\n";
    } 
    return $menu_list;
}

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

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

השארת תגובה

לכל המאמרים

RSS Feed

עקבו אחרי בטוויטר

ערוץ הטלגרם של אינטרנט ישראל

הפרויקטים שלי בגיטהאב