כיצד ליצור תוסף יישומון עבור וורדפרס

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


שלב 1: צור את תוסף הווידג’ט שלך

יצרתי לאחרונה תוסף שנקרא “Freelancer Widgets Bundle”, ויש אנשים ששאלו אותי כיצד ליצור תוסף כזה, אז החלטתי לכתוב את הפוסט הזה. השלב הראשון הוא יצירת התוסף. וכפי שתראה, זה החלק לא הכי קשה. תוסף הוא קוד נוסף שנוסף לוורדפרס ברגע שאתה מפעיל אותו. וורדפרס יוצר לולאה דרך תיקיה כדי לאחזר את כל התוספים הזמינים ולפרט אותם במשרד האחורי. כדי ליצור את התוסף שלך, תזדקק לעורך כגון Coda (Mac) או Dreamweaver (PC ו- Mac). אני ממליץ לך ליצור את התוסף שלך בהתקנה מקומית של וורדפרס, מה שהופך אותו לשרת חי יכול לגרום לבעיות מסוימות אם אתה מבצע שגיאה. אז בבקשה, המתן לבדיקת התוסף שלנו לפני שתניח עליו את האירוח שלך.

פתח עכשיו את התיקיה wp-content / plugins. כאן אתה הולך להוסיף את התוסף שלך. צור ספריה חדשה וקרא לה “יישומון-תוסף” (למעשה, שם זה יכול להיות מה שאתה רוצה). גם אם התוסף שלנו יכלול קובץ אחד בלבד, עדיף תמיד להשתמש בתיקיה עבור כל תוסף. בספריה שלך, צור קובץ חדש בשם “widget-plugin.php” (ניתן לשנות גם שם זה) ופתח אותו. אנו עומדים כעת להוסיף את שורות הקוד הראשונות שלנו. ההגדרה של תוסף תחת WordPress עוקבת אחר כמה כללים שתוכלו לקרוא כאן בקודקס. כך מגדירה וורדפרס תוסף:

לכן עלינו לשנות קוד זה כך שיתאים לצרכים שלנו:

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

שלב 2: צור את הווידג'ט

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

// מחלקת הווידג'ט
המחלקה My_Custom_Widget מרחיבה את WP_Widget {

// בנאי ראשי
פונקציה ציבורית __construct () {
/ * ... * /
}

// טופס הווידג'ט (לתכנית)
טופס פונקציה ציבורית (מופע $) {
/ * ... * /
}

// עדכן את הגדרות הווידג'ט
עדכון פונקציה ציבורית ($ new_instance, $ old_instance) {
/ * ... * /
}

// הצג את הווידג'ט
רכיב widget לפונקציה ציבורית ($ args, $ מופע) {
/ * ... * /
}

}

// רשום את הווידג'ט
פונקציה my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

קוד זה מעניק לוורדפרס את כל המידע הדרוש למערכת כדי שתוכל להשתמש בווידג'ט:

  1. ה בנאי, כדי להפעיל את הווידג'ט
  2. ה צורה () פונקציה כדי ליצור את טופס הווידג'ט בממשל
  3. ה עדכון () פונקציה, לשמירת נתוני ווידג'ט במהלך המהדורה
  4. וה פונקצית widget () כדי להציג את תוכן הווידג'ט בקצה הקדמי

1 - הקבלן

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

// בנאי ראשי
פונקציה ציבורית __construct () {
הורה :: __ לבנות (
'my_custom_widget',
__ ('הווידג'ט המותאם אישית שלי', 'text_domain'),
מערך (
'customize_selective_refresh' => נכון,
)
);
}

אנא לא להשתמש ב- __ () סביב שם הווידג'ט, פונקציה זו משמשת WordPress לתרגום. אני ממש ממליץ לך להשתמש תמיד פונקציות אלה, כדי להפוך את הנושא לתרגום מלא. והשימוש בפרמטר 'התאמה אישית_סלקטיבי_פרץ' מאפשר לרענן את הווידג'ט תחת מראה> התאמה אישית בעת עריכת הווידג'ט כך שבמקום לרענן את הדף כולו רק הווידג'ט רענן בעת ​​ביצוע שינויים.

2 - פונקציית הטופס ()

פונקציה זו היא זו שיוצרת את הגדרות טופס הווידג'ט באזור הניהול של וורדפרס (בין תחת מראה> ווידג'טים או מראה> התאמה אישית> ווידג'טים). זה אם הזנת את הנתונים שלך שיוצגו באתר. אז אסביר כיצד ניתן להוסיף שדות טקסט, אזורי טקסט, תיבות בחירה ותיבות סימון להגדרות טופס הווידג'ט שלך.

// טופס הווידג'ט (לתכנית)
טופס פונקציה ציבורית (מופע $) {

// הגדר ברירת מחדל של יישומון
ברירת מחדל של $ = מערך (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// ניתוח הגדרות נוכחיות עם ברירת מחדל
לחלץ (wp_parse_args ((מערך) מופע $, ברירות מחדל של $)); ?>


/>

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

3 - פונקציית העדכון ()

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

// עדכן את הגדרות הווידג'ט
עדכון פונקציה ציבורית ($ new_instance, $ old_instance) {
מופע $ = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instans ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instans ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: שקר;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
להחזיר מופע $;
}

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

4 - פונקציית הווידג'ט ()

פונקציית הווידג'ט () היא זו שתפיק את התוכן באתר. זה מה שהמבקרים שלך יראו. ניתן להתאים פונקציה זו כך שתכלול שיעורי CSS ותגים ספציפיים שתתאימו באופן מושלם לתצוגת הנושא שלך. הנה הקוד (אנא לא שניתן לשנות קוד זה בקלות כך שיתאים לצרכים שלך):

// הצג את הווידג'ט
רכיב widget לפונקציה ציבורית ($ args, $ מופע) {

תמצית ($ args);

// בדוק את אפשרויות הווידג'ט
$ title = isset ($ מופע ['title'])? Apply_filters ('widget_title', $ מופע ['כותרת']): '';
$ text = isset ($ מופע ['טקסט'])? מופע $ ['טקסט']: '';
$ textarea = isset ($ מופע ['textarea'])? $ מופע ['textarea']: '';
$ select = isset ($ מופע ['select'])? מופע $ ['select']: '';
תיבת סימון $ =! ריק ($ מופע ['תיבת הסימון'))? מופע $ ['תיבת הסימון']: false;

// ליבה של וורדפרס לפני וו וויג'ט (כלול תמיד)
הד $ לפני_widget;

// הצג את הווידג'ט
הד '
'; // הצג כותרת של יישומון אם מוגדר אם ($ title) { הד הדהה לפני $ כותרת. כותרת $. $ after_title; } // הצגת שדה טקסט אם ($ טקסט) { הד '

'. טקסט $. '

'; } // הצג שדה טקסטורי אם ($ טקסטריה) { הד '

'. $ טקסטריה. '

'; } // הצגת שדה בחירה אם (בחר $) { הד '

'. בחר $. '

'; } // הצג משהו אם תיבת הסימון נכונה אם (תיבת סימון $) { הד '

משהו מדהים

'; } הד '
'; // וופרפרס הליבה after_widget וו (כלול תמיד) הד $ after_widget; }

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

קוד התוסף של יישומון השלם

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

צפה בקוד המלא ב- Github

סיכום

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map