דף הבית » וורדפרס » וורדפרס מהירות אופטימיזציה עם מותאם אישית שיתוף חברתי סמלים
וורדפרס מהירות אופטימיזציה עם מותאם אישית שיתוף חברתי סמלים
זה אולי נראה משימה קלה, אבל הוספת טוב שיתוף פעולה כפתורי שיתוף חברתי לאתר וורדפרס יכול להיות מטרד. כשאני אומר מתנהג אני מתכוון פשוט, קל משקל, ידידותי למשאבים, מהיר - שיתוף חברתי ביותר plugins בחוץ לא ככה. הם נוטים לאכול את המשאבים כמו משוגע, ו למה שמישהו ירצה להגדיל את זמן לטעון תוסף על ידי 25-35% רק כדי להציג כמה סמלים באתר שלהם?
החדשות הטובות הן שאתה לא בהכרח צריך תוסף כדי לבצע משימה זו. במדריך זה, אני אראה לך איך אתה יכול בקלות להוסיף אישית לחצני שיתוף חברתי עד סוף ההודעות באתר וורדפרס שלך עם רק כמה שורות קוד.
שלב 1: יצירת לחצני שיתוף חברתי
אנו נשתמש בלחצנים פשוטים לחלוקת לחצנים, כלי אינטרנט נוח וקל לשימוש כדי ליצור את סמלי השיתוף. היתרון העיקרי של יישום זה הוא כי הכפתורים שהיא יוצרת לרוץ על frontend, ולכן הם לא יכבידו על השרת שלך ואתה יכול גם לשמור על פעילות המשתמשים שלך באופן פרטי.
כדי ליצור לחצנים מותאמים אישית, עבור לכאן ולחץ על התחל. בחר 1 מתוך 6 סגנונות לחצנים שונים. לחץ על הבא ו סמן את רשתות חברתיות אתה רוצה להוסיף לאתר שלך. לאחר שתסיים, יהיה עליך למלא את פרטי האתר שלך.
במסך זה (להלן) תמצא שתי אפשרויות: 'אין JavaScript' ו 'JavaScript'. טיק JavaScript, שכן הוא יאפשר לדפדפן לזהות את כתובת האתר באופן דינמי ולכן המבקרים יוכלו לשתף כל הודעה בנפרד ולא רק את כתובת האתר של דף הבית.
לבסוף תסתכל על תצוגה מקדימה לחיות, להוריד את סמל בחר נבחר, לתפוס את הקוד שיצרת.
שלב 2: יצירת ערכת נושא של ילד
עכשיו תצטרך להוסיף את הסמלים שנוצר ואת הקוד לאתר שלך. קודם כל תצטרך ליצור נושא הילד.
אתה יכול בקלות ליצור נושא WP הילד בעזרת הדרכה שלנו, או שאתה יכול לבצע את השלבים של מאמר זה WP Codex. אם כבר יש לך אחד, תוכל לעבור לשלב 3.
נושא הילד מתייחס לנושא שבו אתה משתמש כיום - באופן דומה למדי כאשר ילד מתייחס להוריו. זה יורש הכל (סגנון ופונקציונליות) מהנושא האב אבל אתה יכול להוסיף פונקציונליות נוספת אליו.
במקרה שלנו הפונקציונליות הנוספת תהיה כפתורי שיתוף חברתי מותאמים אישית.
שלב 3: יצירת פונקציה מותאמת אישית המציגה את הסמלים
אנו נוסיף פונקציה מותאמת אישית לקובץ functions.php של נושא הילד.
בעזרת פונקציה זו תוכל להוסיף את הסמלים החברתיים בכל מקום שתרצה באתר שלך באמצעות וו פעולה מותאמת אישית. אם ערכת הנושא של ילדך אינה כוללת עדיין קובץ functional.php, צור קובץ טקסט ריק בתיקיית השורש של ערכת הנושא של הילד שלך עם פונקציות השמות, ושנה את הסיומת ל- .php.
הכנס את שורת הקוד הבאה לקובץ ריק זה:
כשה ... שלך פונקציות הקובץ מוגדר להוסיף את קטע הקוד הבא אליו:
/ * * הוספת סמלי שיתוף חברתי מותאם אישית * / function add_social_sharing () ?>
שתף את הפוסט
סוף כל סוף מחק את השורה של תגובה HTML מקטע הקוד לעיל החלף אותו בקוד ה- HTML אתה יצרת בשלב 1 עם מחולל לחצני שיתוף חברתי.
שלב 4: העתק את תבנית התבנית המתאימה לתיקיית ערכת הנושא של הילד
כברירת מחדל, פוסטים בודדים נשלטים על ידי קובץ תבנית שנקרא single.php. לפעמים - במיוחד בנושאים מודרניים יותר - המבנה של single.php הוא מסובך יותר, כפי שהוא גם טוען קבצים תבנית נוספת. בשלב זה אנחנו צריכים למצוא את קובץ התבנית המתאים שבו נוכל להוסיף את הסמלים מאוחר יותר.
כדי לאתר את הנקודה הנכונה עבור לחצנים חברתיים אנחנו צריכים למצוא את קובץ התבנית כי מכיל את הפונקציה שנטענת את התוכן של הודעות בודדות.
בוא נפתח את עורך הנושא במרכז השליטה של מנהל המערכת של WordPress מראה> עורך. בפינה השמאלית העליונה תמצא רשימה נפתחת שבה תוכל לבחור את נושא האב. מתחת לתפריט הנפתח תוכל לראות את כל קבצי התבנית שמכיל נושא ההורה שלך. גלול מטה עד שתמצא את תבנית פוסט בודדת (הנקרא single.php) ולפתוח אותו.
אם ערכת הנושא של האב משתמשת ב- get_template_part () WP פונקציה ב single.php קובץ זה אומר שהוא משתמש בקובץ תבנית נוספת כדי לטעון את התוכן של ההודעה בודדת.
ראשית עליך לגלות איזה מהם הוא זה. השם של קובץ התבנית הנוסף הוא הפרמטר הראשון של get_template_part () פונקציה.
הפרמטר הראשון הוא 'תוכן' מה שאומר שאנחנו מחפשים את קובץ התבנית שנקרא תוכן. עליך להעתיק קובץ זה מתיקיית השורש של ערכת נושא האב לתיקיית השורש של ערכת הנושא של הילד כדי לשנות אותה.
שלב 5: הוספת הוק פעולה לקובץ התבנית הנכונה
יצרנו פונקציה שנקראה add_social_sharing () בשלב 3, ואנחנו המצורפת אותו לפעולה מותאם אישית וו נקרא התאמה אישית. עכשיו נצטרך להוסיף את הנקודה הזאת למקום שבו אנחנו רוצים שהפונקציה תבוצע.
הנה קטע הקוד שתצטרך להכניס למקום הנכון:
לאחר מכן, בואו למצוא את המקום הנכון.
פתח את קובץ התבנית שהוספת לנושא של ילדך בשלב 4 בעורך קוד או בתוך עורך הנושא של מרכז השליטה של מנהל וורדפרס, וחפש את התוכן() פונקציה.
בדוק אם יש wp_link_pages () פונקציה מיד לאחר התוכן() פונקציה. אם יש, אז קטע הקוד לעיל מגיע לאחר מכן; אחרת הוא עוקב אחר התוכן() פונקציה.
שלב 6: הוסף את קוד ה- CSS לנושא הילד
פתח את ה style.css קובץ של נושא הילד שלך או בעורך הקוד או בעורך הנושא של מרכז השליטה של מנהל המערכת של WordPress, העתק את קוד ה- CSS שיצרת בשלב 1, הדבק אותו בסוף הקובץ ושמור אותו.
אנו נוסיף שני קווים נוספים לקובץ CSS כדי להפוך את סמלי השיתוף החברתי לתצוגה נכונה בכל נושא. העתק והדבק את קטע הקוד הבא לסוף style.css you
youL.share-button li a הגבול: 0; ul.share-buttons li img display: inline;
שלב 7: העלה את סמל המדיה החברתית להגדרת השרת
העלה את סמל המדיה החברתית שנבחר שהורדת בשלב 1 לתיקיית הנושא של הילד. חבר את השרת שלך באמצעות FTP, ליצור תיקייה חדשה בשם תמונות בתוך השורש של תיקיית הנושא של הילד שלך (/ wp-content / themes / your-child-theme / images) והעלה את הסמל כאן.
אנו קוראים לתיקייה תמונות כי זה שם ברירת המחדל של תיקיית התמונה שיתוף פשוט לחצני מחולל.
שלב 8: בדוק את הנתיב של קבצי סמל
לאחר שהעלית את סמלי המדיה החברתית לשרת שלך בשלב 7, חשוב לבדוק את הנתיב של קבצי הסמלים כדי לוודא שהם ייטענו.
הנתיב של קובץ תמונה נותן רמז לדפדפן על מיקומו בשרת. בואו לבדוק את נתיבי התמונה בתוך פונקציות קובץ של נושא הילד. פתח את הקובץ בעורך הקוד שלך ונווט אל הקובץ add_social_sharing () שבו אתה צריך לבדוק את קוד ה- HTML שנוצר עם מחולל לחצנים פשוט שיתוף.
בקוד ה- HTML תמצא עם a src תכונה עבור כל סמל. בדוק אם כל src תכונות נקודות למיקום המדויק שבו ערכת הסמלים הועלתה בשלב 7.
מחולל לחצני 'שיתוף פשוט' מוסיף נתיבים יחסיים ל קבצים. לפעמים דפדפנים לא יכולים לעבד את התמונות אם אתה משתמש בנתיב יחסי, אז זה רעיון טוב במקום להשתמש נתיבים מוחלטים. בדרך זו כל דפדפן המשמש באופן פוטנציאלי על ידי המבקרים שלך יכול להיות בטוח על המיקום של הקבצים הנדרשים סמל.
נתיב התמונה היחסי שנוסף על ידי הגנרטור נראה בערך כך:
בואו לשנות את src התכונה של כל סמל לנתיב מוחלטת, ופירוש הדבר שהוא יכלול את כתובת האתר המלאה של הקובץ.
נתיב כתובת האתר שלמעלה ייראה כך:
שלב 9: העלה את הקבצים שהשתנו והפעל את ערכת הנושא של הילד
חבר את השרת שלך דרך FTP והעלה את כל הקבצים שיצרנו במדריך זה שעדיין לא העלית: פונקציות, ה style.css, ואת קובץ התבנית המתאים (במדריך זה או single.php או ה תוכן).
לבסוף הפעל את נושא הילד במרכז השליטה של מנהל WP תחת מראה> ערכות נושא בתפריט.
עכשיו אתה מוכן עם שלך קל משקל, משאב משאבים, מותאם אישית שיתוף סמלים חברתיים. אתה יכול לגלוש באינטרנט ולבדוק את זה חי באתר שלך.
סיכום
במדריך זה הראיתי לך כיצד להוסיף את הלחצנים שיתוף חברתי מותאם אישית לסוף הודעות בודדות. תוכל להוסיף את סמלי השיתוף לכל מקום אחר באתר שלך בעזרת וו הפעולה שיצרנו.
פשוט להוסיף את הקוד שבו השתמשנו בשלב 5 למקום שבו אתה רוצה את הכפתורים כדי להיות מוצג:
אתה גם צריך למצוא את הקובץ הנכון תבנית אם אתה רוצה למקם את הסמלים במקום אחר. דפים בודדים נשלטים על ידי קובץ תבנית שנקרא page.php, בעוד קבצים מצורפים מדיה כמו תמונות נטענים על ידי הקובץ.
אם ברצונך להציג את לחצני השיתוף החברתי במקום אחר באתר שלך, תוכל להשתמש בהייררכיה של תבניות WordPress כדי למצוא אותו.
