יצירת תוספים עם shortcodes בוורדפרס

הסבר מקיף על עבודה עם shortcode ויצירתם באמצעות תוסף של וורדפרס

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

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

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


<?php
/*
Plugin Name: example plugin
Plugin URI: http://example.com
Description: Example Plugin for shortcode
Author: Ran Bar-Zik
Author URI: https://internet-israel.com
Version: 1.0
*/

באותו הדף אנו יכולים להכניס כל קוד או פונקציה שרלוונטיות לתוסף שלנו. בואו ונאפשר shortcode! עושים את זה באמצעות הפונקציה הזו:


/**
 * Initiating the add_shortcut WordPress call
 */
add_shortcode('example_shortcode_user', 'exampleFunction');

כאשר הפונקציה מקבלת שני פרמטרים. הראשון, שבדוגמה שלנו הוא example_shortcode_user, הוא ה-shortcode שאותו המשתמש יצטרך להכניס בעורך ה-WYSIWYG שלו.
הפרמטר השני הוא הפונקציה שמורצת כאשר המשתמש משתמש ב-shortcode. בדוגמה שלנו exampleFunction. מה שהפונקציה הזו מחזירה, יודפס על גבי הדף כאשר מישהו יראה אותו, לפיכך עדיף שזה יהיה HTML מסוג כלשהו.

אחרי שהגדרנו את ה-shortcode, עלינו ליצור את הפונקציה exampleFunction שמחזירה את הטקסט שאנו רוצים שיופיע. הפונקציה הזו מקבלת פרמטר אחד של attributes שעליו אדבר בהמשך:


/**
 * The shortcode init function of our example
 *
 * @param array $atts
 *   The attributes from the shortcode
 *
 * @return $result
 *   returning parsed HTML
 */
function exampleFunction($atts) {
    $result = "<div>Hello World!</div>";
}

אם נפעיל את התוסף ואם המשתמש יכתוב [example_shortcode_user] בעורך הטקסט שלו, אז כאשר נצפה בדף המוכן, אנו נראה שיהיה כתוב Hello World. פשוט, לא?

שימוש בפרמטרים

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

[example_shortcode_user key="value" foo="bar"]

כדי לקבל גישה מהפונקציה שלנו אל הפרמטרים שהכניס המשתמש, אנו צריכים להשתמש בארגומנט שהגיע עם ה-exampleFunction שלנו – במקרה הזה שמו הוא atts$ והוא מערך שמכיל את כל הפרמטרים שהכניס המשתמש ואנו כמובן יכולים לגשת אליו באופן הבא:


/**
 * The shortcode init function of our example
 *
 * @param array $atts
 *   The attributes from the shortcode
 *
 * @return $result
 *   returning parsed HTML
 */
function exampleFunction($atts) {
    $key = $atts['key'];
    $foo = $atts['foo']
    $result = "
Hello World!
"; }

קריאה ל-shortcode בקוד PHP

ניתן לקרוא ל-shortcode לא רק באמצעות עורך טקסט או טקסט שמופיע בתוך וידג'ט אלא גם מתוך קוד PHP שרץ בתבנית או במקום אחר בסקריפט שלכם. עושים את זה בקלות באופן הבא:


<?php echo do_shortcode('[example_shortcode_user key="value" foo="bar"]') ?>

בצורה כזו, אם אתם כותבים פונקציה/שירות/סקריפט שרץ על וורדפרס, אתם יכולים לארוז אותו יפה בתוסף ולקרוא לו מכל מקום שהוא בקוד – קל ופשוט, לא?

פוסטים נוספים שכדאי לקרוא

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

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