טעינת כפתורי שיתוף בצורה אסינכרונית בוורדפרס

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

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

מה זה אומר ״טעינה אסינכרונית״?

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

יתרונות:

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

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

שלב ראשון – צרו קובץ Javascript

לצורך הדוגמא קראו לקובץ share.js ושימו אותו בתיקיית ה js של התבנית שלכם (או כמובן תבנית הבת שלכם). זהו הקוד לקובץ זה:

 

שלב שני – בצעו קריאה ל share.js בתבנית שלכם

הוסיפו את קטע הקוד הבא לקובץ functions.php של התבנית שלכם:

הקוד הבא ייטען את הסקריפטים של הרשתות החברתיות רק בדפי הפוסטים באתר שלכם (single posts). במידה ואתם מעוניינים לטעון אותם גם בעמודים (pages) שנו את is_single() ל is_singular(). אם תרצו לטעון אלו בכל העמודים פשוט הסירו את התנאי.

שלב שלישי – הוסיפו את ה html בתבנית שלכם

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

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

רועי יוסף

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

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

{ 4 תגובות… הוסף אחת }

השאירו תגובה

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

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

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

קראו גם את:
עיצוב התוסף contact form 7 - וורדפרס
משחקים עם עיצוב התוסף Contact Form 7

סגור