שיתוף התוכן שלכם ברשתות חברתיות חשוב מהסיבות הברורות. אך המהירות וזמן הטעינה של האתר שלכם חשובה לא פחות. במאמר קצר זה נראה כיצד לטעון כפתורי שיתוף של רשתות חברתיות בצורה אסינכרונית על מנת לשפר את ביצועי אתר הוורדפרס שלכם.
מה זה אומר ״טעינה אסינכרונית״?
בלי להכנס לעומק – טעינה אסינכרונית אומר שכפתורי השיתוף (הסקריפטים) ייטענו באתר תוך כדי שהעמוד הנוכחי באתר שלכם נטען וטעינה זו לא תעכב את הפריסה של העמוד עד שאלו יסיימו להטען. מכאן, שהגולשים באתר שלכם ימתינו פחות זמן בכדי לראות את התוכן באתר הוורדפרס שלכם.
יתרונות:
- שיפור בזמן הטעינה של אתר הוורדפרס שלכם. טעינת האתר לא תתעכב בלהמתין לתגובה של שרתי הרשתות החברתיות.
- האתר שלכם יהיה בעצם ״עצמאי״ ואינו תלוי, כוונתי היא שבמידה והשרתים של פייסבוק או טוויטר עמוסים או לא פעילים מסיבה כזו או אחרת, תוכן האתר שלכם עדיין יוצג לגולשים.
- ישפר את יחס ההמרה ואת הקידום במנועי החיפוש – ידוע כי למהירות בה התוכן מוצג לגולשים ישנה השפעה ישירה על נתונים אלו.
הנה דוגמא כיצד לטעון אסינכרונית כפתורי שיתוף בתבניות וורדפרס. הרשתות החברתיות בהם נתמקד הינם פייסבוק, טוויטר, גוגל+, פינטרסט ולינקדין.
1. צרו קובץ Javascript
לצורך הדוגמא קראו לקובץ share.js
ושימו אותו בתיקיית ה js של התבנית שלכם (או כמובן תבנית הבת שלכם). זהו הקוד לקובץ זה:
2. בצעו קריאה ל share.js בתבנית שלכם
הוסיפו את קטע הקוד הבא לקובץ functions.php
של התבנית שלכם:
הקוד הבא ייטען את הסקריפטים של הרשתות החברתיות רק בדפי הפוסטים באתר שלכם (single posts). במידה ואתם מעוניינים לטעון אותם גם בעמודים (pages) שנו את is_single()
ל is_singular()
. אם תרצו לטעון אלו בכל העמודים פשוט הסירו את התנאי.
3. הוסיפו את ה html בתבנית שלכם
זהו בעצם השלב האחרון בו אנו מטמיעים את הכפתורים עצמם בתבנית שלכם, ברגע שהסקריפטים ייטענו אלו ייראו ככפתורי השיתוף. שימו לב כי אתם מוסיפים קוד זה בתוך הלולאה של וורדפרס, תמצאו אותה בקובץ single.php
או index.php
לדוגמא. הנה דוגמא בסיסית:
עד כאן. זוהי הדרך לטעינת כפתורי שיתוף של רשתות חברתיות בצורה אסינכרונית. יישמו דרך זו ובהתאם לפרמטרים שבחרתם לכל אחד מרשתות החברתיות התוצאה הסופית תראה משהו בסגנון הבא:
מקווה שנהניתם ואם ישנות שאלות או מחשבות שתפו אותנו בתגובות! 🙂
תוכל להוסיף הסבר על הקוד JS ? איך הוא עובד בדיוק ?
לצערי זה מעבר לסקופ של מדריך זה…
במקום להכניס קוד לתוך הלולאה עדיף להוסיף פילטר על the_content.
אמת חתול, זוהי גם אופציה..