כיצד ליצור תוסף וורדפרס: צעד אחר צעד

אתה רוצה ליצור א התוסף וורדפרס ? מדריך זה ילמד אותך כיצד לעשות זאת.

תוספים תורמים לפופולריות של וורדפרס מכיוון שהם מאפשרים למשתמשים ללא ידע בקידוד ליצור אתרים מדהימים.

ישנם למעלה מ-50 תוספים ב- rספריית וורדפרס  מיועד למטרות שונות. תוכל למצוא תוספים וורדפרס לשפוך הרשמה לניוזלטר , אבטחה et  מסחר אלקטרוני . רק תן שם.

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

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

שאלות על תצלומי שאלות

האם תוספי וורדפרס מרוויחים כסף?

כן. ה תוספים וורדפרס להביא כסף. אתה יכול למכור את התוסף באתר שלך או בשוק של צד שלישי.

CodeCanyon,  ThemeForest ומוג'ו שוק  הם 3 האתרים הטובים ביותר למכירת תוספים.

אתה יכול גם להוסיף גרסה חינמית של התוסף שלך למאגר וורדפרס ולהציע גרסת פרימיום עם תכונות נוספות.

האם קשה ליצור תוספים וורדפרס?

יצירת א התוסף וורדפרס קל וקשה יחסית, תלוי בתכונות הרצויות.

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

כמה מרוויחים מפתחי תוספים?

לפי Zip Recruiter, התעריף הממוצע לשעה למפתחים תוספים וורדפרס בארצות הברית הוא 35 דולר לשעה. זה מגיע לכ-72 דולר לשנה ו-000 דולר לחודש.

אם אתה מוכר את התוסף שלך, אתה יכול להרוויח עד $5 לחודש, תלוי במספר המכירות. מתן שירותי התאמה אישית של תוספים יכול להרוויח לך בין $000 ל-$20 לשעה.

מה אתה צריך כדי ליצור תוסף וורדפרס

כדי ליצור תוסף, אינך צריך להיות מפתח וורדפרס מומחה. אתה צריך רק ידע בסיסי בקידוד כדי להתחיל.

• ידע בסיסי בתכנות PHP: תוספי וורדפרס כתובים ב-PHP, אז כדאי להבין את השפה והתחביר שלה לפני שתתחיל.
• HTML ו-CSS בסיסיים:  HTML ו-CSS מאפשרים לך לשלוט בתצוגה ובמראה של התוספים שלך. לכן חיוני להבין את היסודות שלהם כדי ליצור תוסף וורדפרס.
• היכרות עם וורדפרס:  כדאי להכיר את פלטפורמת וורדפרס ואת הפונקציות העיקריות שלה, כמו גם את וורדפרס קודקס (המדריך המקוון לפיתוח וורדפרס).
• סביבת פיתוח: כדי לפתח ולבדוק את התוסף שלך, עליך להתקין את וורדפרס במחשב המקומי שלך או באתר פיתוח. זה יאפשר לך לבדוק את התוסף שלך מבלי להשפיע על אתר אינטרנט חי. אנו נראה לך כיצד לעשות זאת בסעיף הבא.
• עורך טקסט: תזדקק לעורך טקסט כדי לכתוב את קוד הפלאגין שלך. אפשרויות רבות זמינות, כגון Sטקסט נשגב, אטום et קוד Visual Studio.

כיצד ליצור תוסף וורדפרס ב-7 שלבים

שלב 1: הבן כיצד פועלים תוספי וורדפרס

מכיוון ש-WordPress כתוב בשפת תכנות, כל מי שיש לו ידע בקידוד יכול לגשת ולשנות את קוד וורדפרס.

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

יצירת תוסף וורדפרס והוספת קוד יעשו משהו רק אם תתקשר לפונקציית PHP באמצעות הוק. הוקס הם המאפשרים לתוסף שלך לקיים אינטראקציה עם וורדפרס מבלי שתצטרך לערוך קבצי ליבה.

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

פונקציות וורדפרס:

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

Voici un exemple:

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

אתה יכול לקרוא לפונקציה זו ישירות בתוסף וורדפרס שלך על ידי הקלדת sticky_header() במקום שבו אתה רוצה שהקוד יפעל. אבל זה מנהג רע כי אתה עלול להיתקל בבעיות. הנה עוד שתי סיבות מדוע לא כדאי לקרוא לפונקציות ישירות בקוד שלך.

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

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

ווי וורדפרס:

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

אקשן הוקס

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

add_action('hook_name', 'my_custom_function');

Le  Hook_name  הוא השם של הווק הפעולה שבו ברצונך להשתמש.

ישנם מספר ווי פעולה בוורדפרס. אתה יכול למצוא אותם ב codex וורדפרס.

הפונקציה_המותאמת_שלי  היא הפונקציה המכילה את הקוד שברצונך לבצע. יש להגדיר פונקציה זו לפני הפונקציה ADD_ACTION.

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

add_action( 'wp_footer', 'sticky_header' );

פונקציה זו מבצעת את הפונקציה sticky_header() כאשר קוראים ל-wp_footer action hook. אתה יכול גם לצרף את הפונקציה להוק ספציפי על ידי החלפת wp_footer בשם הוק לבחירתך.

לדוגמא:

add_action( 'init', 'sticky_header' );

זה יפעיל את פונקציית הכותרת הדביקה כאשר פעולת ה-init של WordPress נקראת.

ווי סינון

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

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

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

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

ההבדל בין ווי פעולה למסנן

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

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

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

שלב 2: הגדר סביבת בדיקה

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

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

אתה יכול להשתמש במחשב שלך כשרת מקומי כדי לארח אתר וורדפרס לבדיקה שבו תוכל ליצור ולבדוק את התוסף שלך.

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

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

לאחר השלמת ההורדה, הפעל את התוכנה במחשב ולחץ סמל + בפינה השמאלית התחתונה כדי ליצור אתר מקומי חדש.

לבחור מ צור אתר חדש ולחץ על הכפתור להמשיך.

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

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

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

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

שלב 3: צור את תיקיית התוספים שלך

לאחר שסביבת הבדיקה שלך מוקמה, הדבר הראשון שאתה צריך לעשות הוא ליצור קובץ תוסף בספריית האתר שלך. כברירת מחדל, וורדפרס מאחסנת את כל התוספים בספרייה wp-content/plugin.

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

עבור הדרכה זו, נעבור לתיקיה wp-content/plugin במדריך האתר המקומי שלנו. הנה איך.

הערה:  התהליך זהה אם אתה משתמש באתר מתווך.

בלוח המחוונים המקומי שלך, לחץ על  עבור אל תיקיית האתר . אתה תופנה אל ספריית האתר המקומי שלך.

בחר אפליקציות באפשרויות, לחץ על ציבורי אז wp-תוכן. תראה תיקיות שונות בספרייה זו.

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

שלב 4: צור את קובץ ה-PHP הראשי עבור התוסף שלך

לאחר יצירת תיקיית הפלאגין שלך, השלב הבא הוא הוספת קובץ PHP לתיקיה זו. זה המקום שבו הקודים והפונקציונליות של הפלאגין שלך יהיו זמינים.

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

עבור פלאגינים מורכבים יותר עם פונקציונליות מתקדמת, עשויים להיות סוגי קבצים שונים בתיקיית הפלאגין, כגון CSS ו-javascript. במקרה שלנו, קובץ PHP בודד יספיק.

לשם כך, צור קובץ PHP בתיקיית הפלאגין, כמו בצילום המסך למטה.

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

שלב 5: הגדר את פרטי הפלאגין שלך

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

זה המידע שאתה רואה בדף הפלאגין של וורדפרס לאחר התקנת תוסף.

אתה יכול למצוא את כותרת קובץ תוסף בקודקס וורדפרס . זה נראה כמו זה.

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

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

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

היכנס ללוח המחוונים של אתר הבדיקה שלך וורדפרס ועבור אל Plugins>Plugins installés.

תראה את הפלאגין Sticky Header עם פרטים. הנה זה.

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

שלב 6: הוסף קוד לפלאגין שלך

לשם כך, נוסיף את קוד הכותרת הדביק בו השתמשנו בעת לימוד הפונקציות וה-hooks של וורדפרס למעלה. הנה איך.

פתח את קובץ ה-PHP של התוסף שלך. מתחת לפרטי הכותרת, העתק והדבק את קטעי הקוד הללו בקובץ ה-PHP הראשי של התוסף שלך ושמור אותו.

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

הקוד הזה עושה שני דברים חיוניים,

לה פונדק sticky_header מופעל כאשר המשתמש גולל את העמוד ומפסיק כאשר הגלילה נפסקת.

שנית, הפעולה add_action('wp_footer', 'sticky_header'); השתמש בכתובת…..

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

שלב 7: הפעל את הפלאגין. בִּפְעוּלָה.

חזור לאתר שלך והפעל את הפלאגין.

כאשר תגללו בגרסה החיה של האתר, כותרת האתר שלכם תישאר בראש העמוד.

לאחר שראית את ההשפעה של התוסף החדש על אתר ההדגמה שלך, הגיע הזמן לנסות אותו באתר האמיתי שלך.

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

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

ואם אתה רוצה להרוויח כסף עם התוסף שלך, אתה יכול למכור אותו באחד מהאתרים שמנינו למעלה

סיכום

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

יצירת תוספים מורכבים פועלת באותה שיטה. יותר פונקציונליות פירושה יותר פונקציות בקובץ הפלאגין שלך.

ניסית פעם ליצור תוסף וורדפרס? בוא נדבר על החוויה שלך בקטע ההערות למטה.