כאשר shortcode מוכנס בפוסט או דף בוורדפרס, הוא מוחלף בחלק מהתכנים אחרים. במילים אחרות, אנו מורים לורדפרס למצוא “סימן” שהוא בסוגריים מרובעים ([]) ולהחליף אותו בתוכן הדינמי המתאים, אשר מופק על ידי פונקצית PHP.

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

[recent-posts]

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

[recent-posts posts="5"]

אם נלך צעד אחד קדימה, אנחנו יכולים להגדיר כותרת לרשימה של ההודעות האחרונות:

[recent-posts posts="5"]Posts Heading[/recent-posts]

שורקטקודס פשוטים

נתחיל ביצירה של הקוד לshortcode פשוט:
[recent-posts]
תהליך היצירה הוא פשוט ואינו דורש כל ידע PHP מתקדם. השלבים הבסיסיים הם:
  • יצירת הפונקציה, אשר תאותר על ידי וורדפרס כאשר היא מוצאת shortcode.
  • הגדרת shortcode ידי קביעת שם ייחודי.
  • לקשר את הפונקציה לפעולה וורדפרס.
כל הקודים במדריך זה יכולים להיות ממוקמים בfunctions.php או בקובץ PHP נפרד שייכלל בfunctions.php.
יצירת פונקציית ה-CALLBACK
 כאשר וורדפרס מוצאת shortcode , הוא מוחלף על ידי חתיכת קוד, שהוא הפונקציה של הקריאה חוזרת( callback  function) . בואו ניצור פונקציה שמביאה הודעות אחרונות ממאגר המידע.
<div>
<div>function recent_posts_function() {
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
endwhile;
endif;
wp_reset_query();
return $return_string;
}</div>

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

מחרוזת עם קישור אליו.

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

רגיססרציה ל- SHORTCODE

עכשיו, אנחנו אומרים לורדפרס שהפונקציה הזו היא shortcode:

</div>
<div>function register_shortcodes(){</div>
<div>add_shortcode('recent-posts', 'recent_posts_function');</div>
<div>}</div>
<div>

אם ה-shortcode של[recent-posts] נמצאת בתוכן של הפוסט, אז ()recent_posts_function

– הפונקציה שיצרנו, נקראת באופן אוטומטי.

אנחנו צריכים לוודא ששמו של הshortocode הוא ייחודי ואין עוד shortocode שאנחנו יצרנו

או מובנים בתבנית כדי למנוע התנגשויות.

על מנת לבצע()register_shortcodes של הפונקציה, אנו “קושרים” אותו לפעולת הinitialization

של וורדפרס:

<div><code>add_action( </code><code>'init'</code><code>, </code><code>'register_shortcodes'</code><code>);</code></div>
<div>
<div>

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

[recent-posts]
<div>

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

Shortcodes מתקדמים

פרמטרים של Shortcodes

Shortcodes הם גמישים משום שהם מאפשרים לנו להוסיף פרמטרים כדי להפוך אותם יותר פונקציונליים. נניח שאנחנו רוצים להציג מספר מסוים של הפוסטים האחרונים. כדי לעשות זאת, אנחנו צריכים להוסיף אופציה נוספת לshortcode שמציינת את כמות הפוסטים האחרונים להצגה.עלינו להשתמש בשתי פונקציות. הראשונה היא פונקציה מובנית בוורדפרס ()shortcode_atts אשר משלבת shortcode attributes של המשתמש עם  attributes דיפולטיבים של וורדפרס . הפונקציה השנייה היא פונקצית php -() extract  , שעושה מה שהשם שלה מרמז: היא שולפת את תכונות shortcode.הרחבת(extand) הפונקציה של הCALLBACK שלנו, אנו מוסיפים argument, שהוא מערך של attributes שממנו אנו מחלצים את הפרמטר למספר הפוסטים שאנחנו רוצים להציג. אז אינחנו שולחים שאילתא(query) לדתה בייס כדי לקבל את המספר הרצוי של הפסוטים ויוצרים HTML list כדי להראות אותם.

<div>
<div>function recent_posts_function($atts){</div>
<div>extract(shortcode_atts(array(</div>
<div>'posts' => 1,</div>
<div>), $atts));</div>
<div>$return_string = '
<ul>';</ul>
</div>
<div>query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));</div>
<div>if (have_posts()) :</div>
<div>while (have_posts()) : the_post();</div>
<div>$return_string .= '
<ul>
	<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>
</ul>
';</div>
<div>endwhile;</div>
<div>endif;</div>
<div>$return_string .= '
';</div>
<div>wp_reset_query();</div>
<div>return $return_string;</div>
<div>}</div>
<div>
<div>

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

["recent-posts posts="5]
<div>

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

תוכן בתוך השורטקוד

אם ניקח את השורטקוד שלנו צעד אחד קדימה ונוסיף לו יכולת להעביר תוכן מסוים כ-argument כאשר במקרה שלנו הוא יהיה הכותרת של הרשימה של הפוסטים האחרונים – בשביל לעשות את זה אנחנו נשתמש בפרמטר שני – $content בפונקצית הקלבק ונוסיף אותו בתוך תג h3 לפני הרשימה.

הפונקציה החדשה נראית ככה:

function recent_posts_function($atts, $content = null) {
extract(shortcode_atts(array(
'posts' => 1,
), $atts));

$return_string = '
<h3>'.$content.'</h3>
';
$return_string .= '
<ul>
<ul>';</ul>
</ul>
<ul>
<ul>query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));</ul>
</ul>
<ul>
<ul>if (have_posts()) :</ul>
</ul>
<ul>
<ul>while (have_posts()) : the_post();</ul>
</ul>
<ul>
<ul>
<ul>$return_string .= '</ul>
</ul>
</ul>
&nbsp;
<ul>
<ul>
	<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>
</ul>
</ul>
<ul>
<ul>';</ul>
</ul>
<ul>
<ul>endwhile;</ul>
</ul>
<ul>
<ul>endif;</ul>
</ul>
<ul>$return_string .= '</ul>
';

wp_reset_query();
return $return_string;
}
<div>

הסוג הזה של השורטקוד דומה מאוד לתג html כעת נסגור את השורטקוד והוא יראה כך:

[recent-posts posts="5"]זאת הכותרת לרשימת הפוסטים האחרונים[/recent-posts]
<div>

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

 שורטקודס בוידג’טים

בתור ברירת מחדל וידג’טים מתעלמים משורטקודס – לדוגמא – אם אני כותב את השורטקוד הבא:

[recent-posts posts="5"]
<div>

בתוך וידג’ט מה שאני אקבל יהיה משהו כזה:

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

add_filter('widget_text', 'do_shortcode');
<div>

כעת השורטקוד יוצג בתוך הוידג’ט,
אותו כנ”ל לגבי תגובות

add_filter( 'comment_text', 'do_shortcode' );
<div>

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

add_filter( 'the_excerpt', 'do_shortcode');
<div>

הוספת כפתור שורטקוד בעורך של וורדפרס

למרות ששורטקוד הוא דרך יחסית נוחה וקלה להוספת תוכן דינאמי – הוא עשוי להיות קצת מורכב ומבלבל למשתמש הקצה הרגיל…במיוחד כאשר זה שורטקוד שמקבל פרמטרים מרובים וכ’ – בלי לדבר על חשיבות הסינטקס המדויק(תכל’ס – סלש במקום הלא נכון וזה לא יעבוד…).
הדרך לפתור את זה היא להוסיף לחצן לעורך הסטנדרטי של וורדפרס המאפשר למשתמשים יצירת שורטקוד באמצעות הכפתור ללא אפשרות להסתבכות(חוץ מכאלה מוכשרים במיוחד…) – ישנם 2 שלבים ליצירת הלחצן:
  • יצירת קובץ JavaScript לכפתור.
  • רגיסטרציה לכפתור ולקובץ ה-JavaScript.

קובץ הJavaScript עבור הכפתור

קובץ הג’אווה סקריפט משמש לרגיסטרציה של TinyMCE plugin דרך הapi של TinyMCE, אנחנו ניצור קובץ חדש שנקרא לדוגמא:recent-posts.js בתוך תיקיית הjs של התבנית שלנו ואז נכתוב בתוכו את הקוד הבא:

<div>
(function() {
   tinymce.create('tinymce.plugins.recentposts', {
      init : function(ed, url) {
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url+'/recentpostsbutton.png',
            onclick : function() {
               var posts = prompt("Number of posts", "1");
               var text = prompt("List Heading", "This is the heading text");

               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
               }
               else{
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
               }
            }
         });
      },
      createControl : function(n, cm) {
         return null;
      },
      getInfo : function() {
         return {
            longname : "Recent Posts",
            author : 'Konstantinos Kouratoras',
            authorurl : 'http://www.kouratoras.gr',
            infourl : 'http://wp.smashingmagazine.com',
            version : "1.0"
         };
      }
   });
   tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);
})();
<div></div>
<div>
<div>

כמו שנראה אנחנו יוצרים תוסף חדש קוראים לפונקציית – tinymce.create() ומעבירים בתוכה את שם הפלאגאין וה-attributes שלו, החלק הכי חשוב של הקוד הזה הוא פונקציית ה- init() שבה מוגדרים שם,קובץ איקון וה-event handler עבור הכפתור כאשר מתבצעת קריאה לפונקציית ה-onclick() - (כאשר לוחצים על הכפתור).

ב2 השורות הראשונות של פונקציית הonclick – המשתמש מתבקש להזין את הפרמטרים למספר הפוסטים ולכותרת של ה-shortcode, לאחר מכן, בהתאם לערכים של פרמטרים אלו, צורת ה-shortcode המתאימה הוכנסה לעורך.

לבסוף, תוסף TinyMCE מתווסף לPluginManager באמצעות פקודת ה-add.

עכשיו שילבנו את  ה-shortcode בהצלחה בתבנית וורדפרס שלנו.

רגיסטרציה לכפתור ולקובץ ה-JavaScript

לאחר יצירת קובץ ה-JavaScript, אנחנו צריכים לבצע רגיסטרציה לכפתור ולקובץ ה-JavaScript  , אנו יוצרים שתי פונקציות ומקשרים אותם לפילטרים המתאימים של WordPress .הפונקציה הראשונה נקראת register_button ודוחפת את ה-shortcode לתוך המערך של הכפתורים, ומוסיפה מחיצה בין הכפתור החדש לכפתורים הקיימים:
</div>
function register_button( $buttons ) {
   array_push( $buttons, "|", "recentposts" );
   return $buttons;
}
הפונקציה השנייה, add_plugin, מצביעה על הנתיב והשם של קובץ ה-JavaScript:
function add_plugin( $plugin_array ) {
$plugin_array['recentposts'] = get_template_directory_uri() . '/js/recentposts.js';
return $plugin_array;
}
<div>

(כמובן שאם הקובץ שלכם ממוקם במקום שונה – כאן המקום לעדכן את הנתיב עבור הקובץ…)

השלב הבא הוא להוסיף פילטר עם הפונקציות הקודמות.  פונקצית Register_button  מקושרת לפילטר mce_buttonsfilter , המבוצע כאשר העורך טוען את התוספים, ופונקציית add_plugin מקושרת לפילטר mce_external_plugins , אשר פועלת כאשר הכפתורים עומדים להיטען.


function my_recent_posts_button() {

if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}

if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}


}
<div>

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

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


add_action('init', 'my_recent_posts_button');
<div>

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

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

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

אם פרמטר כלשהו נשאר ריק – הוא לא יופיע בשורטקוד,והנה השורטקוד שלנו בתוך העורך!

נערך ותורגם מהמאמר המקורי