Search

יצירת שורטקודים (shortcodes) בוורדפרס

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

שורטקודים המגיעים עם תוספים יכולים להיות מאד שימושיים ולקצר את זמן העבודה שלנו (או של הלקוח) בצורה משמעותית, אך האם לא יהיה נחמד אם תוכלו ליצור שורטקודים בעצמכם? במדריך זה אראה את הצעדים ליצירת שורטקודים משלכם שיעזרו לכם לבצע פונקציונליות מסויימת.

שורטקוד פשוט

ה API של שורטקודים עובד בצורה מאד פשוטה: הדבר הראשון שיש לעשות הוא ליצור פונקציה המחזירה תשובה (callback function) שתרוץ כל פעם שיש שימוש בשורטקוד; לאחר מכן יש לקשר את הפונקציה הזו לשורטקוד ספציפי ולגרום לו להיות מוכן לשימוש. הקוד ליצירת שורטקודים בדרך כלל יושב בקובץ functions.php, אך אם אתם מתכננים ליצור שורטקודים רבים, נכון יהיה לכתוב אותם בקובץ נפרד ולבצע include לקובץ זה ב functions.php.

בדוגמה הראשונה שנראה, ניצור שורטקוד פשוט, אשר יציג קצת לורם איפסום בכל פעם שנכתוב [lorem] בעורך של וורדפרס. כפי שאמרנו קודם, הדבר הראשון שניצור הוא פונקציה המחזירה תשובה (callback function) והתשובה שהיא תחזיר היא טקסט לורם איפסום.

שימו לב שביצירת שורטקודים איננו מדפיסים שום דבר בפונקציה אלא מחזירים ערך כלשהו. (we don't use echo, we use return)

function lorem_function() {
  return 'לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.';
}

הפעולה הבאה שנבצע היא לרשום את השורטקוד בוורדפרס באמצעות הפונקציה add_shortcode. פונקציה זו מוסיפה את השורטקוד ומקשרת אותו לפונקציה שהרגע יצרנו. הפונקציה add_shortcode מקבלת שני ארגומנטים בלבד, הראשון הוא השם אותו אנו בוחרים לשורטקוד (מה שנכניס בתוך הסוגריים המרובעים) והשני הוא שם הפונקציה שתרוץ ברגע שנשתמש בשורטקוד זה:

add_shortcode('lorem', 'lorem_function');

זה כל מה שנדרש על מנת ליצור שורטקוד בוורדפרס.

הוספת פרמטרים לשורטקוד

נמשיך על אותו רעיון של תוכן דמה, לפעמים כאשר אנו יוצרים מוקאפ (mockup), אנו צריכים להוסיף תמונות בגדלים שונים לתוכן שלנו. אז בואו ניצור שורטקוד שמוסיף תמונה באורך ורוחב שאנו קובעים בצורה הבאה:

[picture width="500" height="500"]

כאשר וורדפרס נתקלת בשורטקוד זה, אנו רוצים פונקציה שמכניסה תמונה לתוכן. הפונקציה צריכה לקבל את המשתנים רוחב וגובה (width, height) אך בכדי לכסות מקרה בו המשתמש אינו מכניס משתנים אלו, נוסיף לה ערכים של רוחב וגובה כברירת מחדל. לצורך הדוגמה נשתמש בשירות lorempixel.com בכדי לקבל תמונה אקראית כלשהי.

נתחיל ביצירת פונקציית החזרה:

function svv_picture($atts) {
   extract(shortcode_atts(array(
      'width' => 400,
      'height' => 200,
   ), $atts));
return '<img src="https://lorempixel.com/'. $width . '/'. $height . '" />';
}

קראנו לפונקציה זו svv_picture ומכיוון ופונקציה זו מקבלת ארגומנטים הגדרנו כי היא מקבלת את הפרמטר $atts. בכדי להשתמש בפרמטר זה אנו צריכים שתי פונקציות נוספות:

  • shortcode_atts – פונקציה של וורדפרס אשר מחברת את התכונות עם התכונות המוכרות וממלא את תכונות ברירת המחדל אם נדרש.
  • extract – פונקציה של PHP המחלצת את התכונות שנרשום כשנכתוב את השורטקוד.

לבסוף, הפונקציה תחזיר את הערך שאנו רוצים ובמקרה זה, קוד html עם תגית img בעלת המשתנים width ו height. הדבר היחיד שנשאר לעשות הוא לרשום את השורטקוד בוורדפרס:

add_shortcode('picture', 'svv_picture');

השורטקוד מוכן, כעת אם תוסיפו את השורטקוד [picture] בעורך של וורדפרס תקבלו תמונה אקראית ברוחב 400 ובגובה 200, אלא אם תתנו ערכים אחרים בכתיבת השורטקוד.

שורטקוד להוספת מוצר לעגלת בקניות בווקומרס והפנייה לעמוד התשלום

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

הצטרפו לרשימת התפוצה!

מכיוון והסברנו קודם לכן את הדרך ליצירת שורטקוד בוורדפרס המקבל פרמטרים, נראה זאת ללא חפירות מיותרות. פונקציית החזרה תהיה:

function add_product_to_cart($atts) {
	extract(shortcode_atts(array(
		'id' => 0,
	), $atts));
	$url = esc_url_raw( add_query_arg( 'add-to-cart', $id, wc_get_checkout_url() ) );
	return '"<a href="'.$url.'">הוסף מוצר</a>"';
}

ובכדי לרשום את השורטקוד בוורדפרס נשתמש בפונקציה הבאה:

add_shortcode('woo_product', 'add_product_to_cart');

כעת, בכל פעם שתוסיפו את השורטקוד [woo_product id=xxx] יתווסף קישור שבלחיצה יוסיף את המוצר בעל המזהה xxx לעגלת הקניות ויעביר את המשתמש לעמוד התשלום.

מספר טיפים על שורטקודים על הדרך

הוספת שורטקוד לטקסט ווידג׳ט

אולי חשבתם ששורטקודים מוגבלים לפוסטים ועמודים אך זה לא המצב. ניתן להשתמש בהם גם באיזור הווידג׳טים. פשוט הוסיפו טקסט ווידג׳ט לסרגל הצידי והוסיפו את השורטקוד בתוכו. שימו לב – האפשרות להכניס שורטקוד הווידג'טים אינה מופעלת כברירת מחדל בוורדפרס. על מנת לאפשר זאת עליכם להוסיף את הפילטר הבא לקובץ functions.php:

add_filter('widget_text', 'do_shortcode');

הוספת שורטקוד בקבצי התבנית

אם מסיבה כלשהי (ויש לא מעט כאלו) אתם מעוניינים להציג שורטקוד מסויים בתבנית עמוד כלשהי, ניתן לעשות זאת בקלות. נניח שבאיזור מסויים התבנית עמוד כלשהי אתם רוצים להציג שורטקוד של Contact Form 7, פשוט הוסיפו את הקוד הבא היכן במיקום שבחרתם:

<?php echo do_shortcode("[example_shortcode]"); ?>

הסתרה של שורטקוד סורר

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

ישנם שני דרכים לסדר זאת, אחת היא להסיר את השורטקוד מכל מקום בו הוא נמצא בצורה ידנית והשנייה היא להסתיר את אותו שורטקוד. כל מה שעליכם לעשות הוא להוסיף את הקוד הבא לקובץ functions.php:

add_shortcode( 'shortcodetag', '__return_false' );

קוד זה יגרום לשורטקוד הסורר לא להציג כלום. אל תשכחו להחליף את shortcodetag בשם השורטקוד שלכם.

לסיכום

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

רועי יוסף
רועי יוסף

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

16 תגובות...
  • Rubb 10 אוקטובר 2017, 8:41

    מעולה כמו תמיד

  • לאה 10 אוקטובר 2017, 22:17

    אהבתי מאוד את הקוד של הסתרת שורטקוד סורר!

    ובטח אתה מכיר, אבל רק כותבת ליתר ביטחון – ישנו התוסף Shortcake (Shortcode UI) שמספק ממשק גרפי לייצור ועריכה (!) של שורטקודים. הוא מאפשר לראות את היישום של השורטקוד כבר בעורך הטקסטים, וגם לערוך אותו בחלונית, בלי שמזין התוכן צריך לגעת בשורטקוד בכלל. מובן שמתכנת צריך לכתוב קוד כדי שהשורטקוד שייצרנו יופיע בממשק הזה, אבל די בקטנה (יצא לי להשתמש בזה. אחד המדליקים).

    • רועי יוסף 10 אוקטובר 2017, 22:22

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

      • לאה 10 אוקטובר 2017, 22:31

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

        • רועי יוסף 10 אוקטובר 2017, 22:51

          מעניין, אבדוק את התוסף בהזדמנות הראשונה 🙂

  • נתנאל 18 יולי 2019, 9:58

    איך ניתן לשלב ACF repeater בתוך שורטקוד?

  • עמיר ליברוס 9 ספטמבר 2020, 23:49

    היי,
    אשמח אם תיידע, אותי כאשר אני מנסה להתקין את widget google reviews. הורדתי את התוסף ואני מנסה להתקין אותו בשורטקוד, באלמנטור ואינני יודע איך להתקין אותו. אשמח לעזרתך…

    עמיר

    • רועי יוסף 10 ספטמבר 2020, 21:17

      צר לי עמיר, לא יודע איך לעשות זאת באלמנטור- אולי אחד הקוראים ידע לענות לך… בהצלחה!

  • ברק 14 אוקטובר 2020, 15:32

    שלום רועי, תודה רבה על הפוסט 🙂

    יש לי אלמנטור רגיל (לא פרו), אני משתמש פשוט… הצלחתי למצוא את השורטקוד של טופס שיצרתי ולהוסיף לעמוד והוא עובד! הידד. עכשיו אני מנסה למצוא מה הוא השורטקוד של טמפלט שיצרתי על מנת להוסיפו לעמודים אך לא מצליח למצואו אותו. אתה יודע מה עושים ?

    • רועי יוסף 14 אוקטובר 2020, 16:01

      היי ברק 🙂

      מה כוונתך בשורטקוד של טמפלייט? לא מכיר כזה דבר, ובכל מקרה אני לא בקיא באלמנטור, אבל אם תסביר אולי אחד הקוראים של הבלוג יידע לענות לך…

      • ברק 14 אוקטובר 2020, 16:30

        בשמחה,

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

        2. אני רוצה לעשות את אותו הדבר רק עם טמפלט של חלק מעמוד. כלומר להוסיף בסוף עמוד מסויים שורט קוד שיקשר לטמפלט מסויים. הבעיה היחידה שאני לא מוצא בטבלת הטמפלטים שורטקוד. האם ניתן לבצע את מה שאני רוצה? מישהו יודע?

  • משה 3 פברואר 2021, 12:44

    שלום
    האם תוכל להפנות אותי כיצד ליצור שורטקוד שיפעל במיילים של ווקומרס?

  • שוע 4 יולי 2021, 15:36

    היי רועי
    אני רוצה לשלוף תכונה אחת לטאבים בעמוד מוצר מבלי שיבואו כל התכונות
    אם תוכל לעזור לי בזה
    תודה
    המדריכים שלך הם אבן דרך בוורדפרס ובכלל

    • רועי יוסף 4 יולי 2021, 16:25

      היי שוע,

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

      • שוע 4 יולי 2021, 16:55

        אני בכל זאת אנסה להסתדר
        ואני יעדכן אותך פה איך עושים את זה

        • רועי יוסף 4 יולי 2021, 17:15

          אוקיי, בהצלחה ואשמח אם תעדכן…. 🙂

תגובה חדשה

ניווט מהיר

Up!
לבלוג