בניית תוסף שיתוף לרשתות חברתיות בוורדפרס – WP-Socialight

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

(התוסף עודכן מאז כתיבת הפוסט – ניתן להוריד הגירסה המעודכנת מה repository של וורדפרס).

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

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

אם אינכם מעוניינים לקרוא את המדריך אתם מוזמנים להוריד את התוסף כאן:

מספר מילים על התוסף WP-Socialight

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

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

יתרונות התוסף WP-Socialight:

  • תמיכה מלאה ב RTL ובשפה העברית (קיים רק לשפה העברית בשלב זה).
  • ידידותי למשתמש וקל לתפעול.
  • קל משקל לעומת תוספים אחרים ומכאן יהיה שיפור במהירות אתר הוורדפרס שלכם, (40Kb) בלבד.
  • ריספונסיבי ובעל תמיכה מלאה במובייל.
  • אין שימוש כלל בתמונות, השימוש הוא באייקונים של Socicon.
  • ללא inline scripts ו inline css כלל.

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

הקבצים והתיקיות של התוסף

הנה רשימת הקבצים והתיקיות בתיקייה wp-socialight:

wp-socialight-files-folders

 

יצירת התוסף WP-Socialight

ניצור קובץ בשם wp-socialight.php לו נוסיף את הקוד הבא על מנת לאפשר את הפעלת תוסף:

יצירת התפריט בלוח הבקרה של וורדפרס

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

הנה הקוד על מנת ליצור את עמוד האפשרויות אשר יופיע בלוח הבקרה:

בקוד זה אנו מוסיפים פריט בשם WP-Socialight לתפריט הגדרות בעזרת הפונקציה add_submenu_page לה אנו קןראים בתוך הוק (hook) הנקרא admin_menu. הפונקציה wp_socialight_page היא callback function הנדרשת על מנת להציג את התוכן של עמוד האפשרויות.

תנו מבט על התפריט שיצרנו:

wp-socialight-wordpress-admin-menu

על הדרך, הצטרפו לרשימת התפוצה !

יצירת עמוד האפשרויות

נכתוב את הקוד לפונקציה wp_socialight_page על מנת להציג את התוכן של עמוד האפשרויות:

בקוד זה, אנו מוסיפים חלק בשם wp_socialight_config_section, ורושמים את ההגדרות כ wp-socialight. כעת, נוסיף את הקוד המציג את את אותו חלק ואת השדות שלו:

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

כך נראה עמוד האפשרויות שלנו:

wp-socialight-options-wordpress

הצגת כפתורי השיתוף באתר

על מנת להציג את כפתורי השיתוף אני משתמש בפונקציה הבאה:

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

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

עיצוב כפתורי השיתוף

בכדי לעצב את כפתורי השיתוף ולדאוג כי הם יוצגו כראוי, אנו משתמשים ב style.css וב  wp-socialight-script.js. הנה הקוד המבצע enqueue לקבצים אלו:

קובץ ה css אחראי להגדרות העיצוב של התוסף וקובץ ה javascript אחראי בעיקר ליצירת popup שיקפוץ ברגע שנלחץ על אחד מכפתורי השיתוף.

בתוסף עצמו שניתן להורדה בסוף המדריך, אני טוען את קובץ ה css וקובץ ה Javascript מכווצים (minified).

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

הנה התוכן של wp-socialight-script.js, על מנת ליצור את ה popup ברגע לחיצה על כפתור שיתוף, נעזרתי בפונקציה הנקראית PopupCenter שמצאתי ב StackOverflow.

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

מה הלאה?

זה היה מדריך מתומצת על הדרך בה בניתי את תוסף השיתוף WP-Socialight. אני מקווה כי תמצאו את המדריך ובמיוחד את התוסף מועילים לכם. בשלב זה, ישנה האפשרות לבחור רק חמש רשתות חברתיות (הרשתות המרכזיות), אך בעתיד, אעלה את התוסף ל Repository של וורדפרס ותוכלו לעדכן אותו. המטרה בעתיד היא לאפשר את הפונקציונליות הבאה:

  • להרחיב את מספר רשתות חברתיות.
  • לאפשר את בחירת צבע הרקע של כל אחת מהן.
  • להוסיף תמיכה בסוגי תוכן מותאמים אישית (Custom Post Types).
  • לאפשר להוסיף את כפתורי השיתוף מעל ומתחת לפוסט.
  • להוסיף אפשרות ל LTR ותמיכה בקבצי שפה.

אם יש לכם רעיונות ו/או דרכים לשיפור הקוד אתם מוזמנים לשתף, אשתדל לתת תמיכה לתוסף בעמוד זה דרך התגובות… 🙂 תתפנקו!

רועי יוסף

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

תגובות פייסבוק

{ 9 תגובות… הוסף אחת }
  • עבדאללה מרהג' 21 באוקטובר 2016, 11:19

    מגניב!!!
    תקנתי את תוסף השיתוף ואני מאוד מרוצה, זה בהחלט מקפיץ את האתר בכמה רמות, אין מילים פשוט ישר ולעניין, כל הכבוד
    רק 2 דברים ברשותך:
    1. התוסף מופיע רק בדף הבית ובבלוג, לא רואים אותו בשאר הדפים, לידיעתך אני משתמש בתבנית Wipi
    2. במובייל זה מסתיר כרבע מהמסך שממלא קטן וזה לא נוח רק בדפדפן של אנדרואיד אבל בכרום זה מעולה, כל האייקונים מצומצמים לשורה אחת בתחתית המסך (בחרתי רק 3 רשתות חברתיות)
    הנה קישור לאתר שלי אם בא לך לבדוק…

    תודה

    • רועי יוסף 21 באוקטובר 2016, 17:07

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

    • רועי יוסף 18 בנובמבר 2016, 19:25

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

  • חתול 31 באוקטובר 2016, 9:33

    כמה הערות באיחור מה.
    1. לא כדאי להכניס מחרוזות לקוד, השתמש ב־gettext. זה יאפשר לך לתרגם את התוסף לשפות אחרות בקלות.
    2. כדאי להוסיף לדף ההגדרות wpnonce כדי למנוע CSRF.

  • ראובן 9 בנובמבר 2016, 1:29

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

    בנוסף, שמתי לב שאצלך רואים את הוואצאפ גם במחשב הרגיל ואצלי לא…

    איפה אני טועה? לא מצאתי איפה להגדיר את זה…

    תודה רבה!

  • ראובן 9 בנובמבר 2016, 1:31

    סורי, אני רואה שכבר רשמו לך…
    אגב, אני בתבנית פוג'ו

  • איתי בנר 3 בדצמבר 2016, 12:49

    הי רועי, תודה על השיתוף. בתוך הפונקציה generate_shares_code אתה מציב תנאים שאם הם מתקיימים, אז echo add_wp_socialight_icons(); – ועל כך יש לי 2 שאלות (מבקש להבין, לא לבקר):
    – פרט לנוחות (האנושית) של הכתיבה והקריאה של הקוד – למה לא איחדת את כל התנאים ל-IF אחד עם אופרטור "OR"? האם לא יהיה חסכוני יותר לאחד לסטייטמנט אחד?
    – בסוף הפונקציה add_wp_socialight_icons מה היה השיקול שלך "להסתפק" ב-return $html במקום echo $html, שהיה חוסך את הצורך לכתוב echo בתוך generate_shares_code?

    • רועי יוסף 3 בדצמבר 2016, 16:16

      היי איתי,

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

      הקוד במאמר אינו עדכני מכיוון והתוסף שודרג מאז 🙂

השאירו תגובה

כבר הולכים ? הרשמו לרשימת התפוצה !

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

לעולם לא נשתף את הפרטים שלכם...

קראו גם את:
התאמה אישית של לוח הבקרה בוורדפרס
התאמה אישית של לוח הבקרה בוורדפרס בעזרת ACF

סגור