יצירת shortcodes מותאמים אישית ב-WordPress

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

אז מהם shortcodes וכיצד הם יכולים לעזור לכם?

shortcodes הם קטעי קוד הנכתבים מראש ולרוב מקבלים ערכים שיוטמעו בקוד שיווצר. על ידי מילת מפתח קצרה באפשרותנו "לקרוא" לקוד שכתבנו ובכך לחסוך זמן ומאמץ ביצירת תוכן שבדרך כלל חוזר על עצמו.
לצורך דוגמא, במידה ובאתרנו נרצה להציג כפתורים מעוצבים באופן דומה במספר מקומות באתר, לא נרצה לכתוב את קוד הכפתור בכל פעם מחדש, לכן, הדבר החכם והנכון לעשות הוא ליצור shortcode מותאם אישית לכפתור זה.
קוד ה-shortcode נכתב בקובץ functions.php שנמצא בתיקיית התבנית שלנו.

להלן דוגמא פשוטה:

function contactUsText() {
    return 'Please feel free to contact us if you need more information.';
}
add_shortcode('contactus', 'contactUsText');

אז מה עשינו כאן בעצם?
יצרנו פונקציה שנקראת contactUsText וכל פעולתה היא להחזיר לנו את התוכן "Please feel free to contact us if you need more information.".
לאחר מכן "רשמנו" את הפונקציה שיצרנו (את ה-shortcode כלומר) באמצעות הפונקציה המובנית ב-WordPress הנקראית add_shortcode.
"contactus" מסמל את המחרוזת שאותה נצטרך לרשום בין סוגריים מרובעים בעורך התוכן של האתר על מנת שקוד ה-shortcode יוצג.
לסיכום, במידה ובעורך התוכן של האתר נכתוב [contactus], הטקסט שכתבנו יופיע לגולשינו.
כמובן שעבור דוגמא כזו לא בטוח שהטרחה בכלל משתלמת, אבל מה יקרה במידה ונרצה להציג תוכן טיפה יותר מתוחכם כגון כפתור בעל סגנון עיצוב דומה אך בצבעים שונים וכיתוב שונה בכל פעם? בבקשה:

function myButton($atts){
    $atts = shortcode_atts(
    array(
        'text' => 'Send',
        'backgrount' => '#1d9128',
        'color' => '#FFFFFF'
        ), $atts);
    return '<button style="color:'.$atts['color'].'; background: '.$atts['background'].'">'.$atts['text'].'</button>';
}
add_shortcode( 'mybutton', 'myButton');

השונה בדוגמא זו הוא שהשתמשנו בפרמטרים אשר מוטמעים בקוד שיווצר.
הערכים הנכתבים בתוך המערך הם ערכי ברירת מחדל של הפרמטרים, במידה ובקריאה ל-shortcode לא נזין ערך שונה, זהו הערך שיוטמע בקוד, כלומר, במידה ונקרא ל-shortcode בעורך התוכן של העמוד על ידי [mybutton], נקבל כפתור עם הכיתוב "Send" בצבע לבן על גבי רקע בצבע #1d9128.
לעומת זאת, [mybutton color="#000000" background="#FFFFFF" text="Contact Us"] ייצור בעבורנו כפתור בעל הכיתוב "Contact Us" בצבע שחור על גבי רקע בצבע לבן.

באפשרותנו גם להשתמש בתוכן שהוצב בין תגי ה-shortcode בתוך קוד ה-shortcode שלנו על ידי שימוש בפרמטר content, דוגמא:

function customOrderLink( $atts, $content = null ) {
    return '<a class="orderLink">"'.$content.'"</a>';
}
add_shortcode("orderlink", "customOrderLink");

נקרא ל-shortcode:

[orderlink]Order Now![/orderlink]

כעת נקבל את הכפתור שלנו עם הכיתוב "Order Now!".

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

חשוב לציין כי לכל shortcode ניתן "לקרוא" לא רק בעורך התוכן של WordPress אלא גם בקוד האתר, באמצעות פונקציה פשוטה ב-PHP הנקראית do_shortcode.
דוגמא:

echo do_shortcode('[orderlink]Order Now![/orderlink]');

סיכום

shortcodes היא תכונה נפלאה ש-WordPress מאפשרת לנו.
שימוש ב-shortcodes מותאמים אישית תחסוך לכם זמן ותהפוך את תוכן שלכם לגמיש יותר ואסתטי יותר.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *