יצירת תוספים עם 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"]') ?>

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

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

רספברי פיי

הרצת גו על רספברי פיי

עולם הרספברי פיי והמייקרים ניתן לתפעול בכל שפה – לא רק פייתון או C – כאן אני מסביר על גו

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

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

רספברי פיי

מה זה AIoT? ואיך אפשר להתחיל?

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

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