אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » יצירת תפריט עם HTML משלכם בוורדפרס

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

רן בר-זיק אפריל 6, 2014 10:30 am אין תגובות

כך תשלטו שליטה מלאה על התפריט שלכם ותוכלו לשלב בו קריאה ל-Custom fields

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 ולהשתמש בהם בתפריט. בין אם מדובר באייקון או בין אם מדובר במשהו אחר. מאוד מאוד שימושי לתפריטי 'מומלצים' או תפריטים של 'מוצרים נבחרים' ושאר הג'אז הזה.

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

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

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

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

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

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

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד