יצירת שורטקודים (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 בשם השורטקוד שלכם.

לסיכום

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