אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » יצירת תוספים עם shortcodes בוורדפרס

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

רן בר-זיק ספטמבר 2, 2012 7:55 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

וורדפרס היא אחת המערכות האהובות עלי בשנים האחרונות ובגרסאות האחרונות חל שיפור משמעותי ב-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"]') ?>

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
PHP וורדפרס

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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