כפתור חיוג מרחף בבלוג וורדפרס – איך עושים את זה?

על מה נדבר?

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

מה הכוונה לכפתורים מרחפים?

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

דוגמא לכפתור חיוג מרחפים במובייל דוגמה לכפתורי חיוג ורשתות חברתיות במובייל

כפתור חיוג ווטסאפ

אז איך עושים את זה?

ראשית, נגדיר את התוספים שאנו נצטרך בשביל זה, תוסף אלמנטור ואלמנטור פרו ובנוסף תוסף חינמי שנקרא Head, Footer and Post Injections, או כל תוסף אחר שבאפשרותו נוכל להזריק קוד כלשהו מיד לאחר תגית ה-Body.

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

ניצור אזור בתוך עריכת האלמנטור ואז נגיע למתקדם וניתן ל-CSS ID שם, בדיוק כמו בתמונה מטה (ללא רווחים ומומלץ ללא אותיות גדולות), אני נתתי את השם my-button:

תמונה של עריכה באלמנטור

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

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

#my-button {
    position: fixed;
    display: flex;
    bottom: 130px;
    left: 0;
}

מה שבעצם הקוד אומר, זה להיות באזור קבוע מרחף, כאשר המיקום שלו יהיה בצד שמאל left:0, אם נרצה שהוא יהיה בצד ימין נשנה את אותו ל- right:0.
הגובה שלו יהיה ממוקם ב130 פיקסלים מהתחתית, כאשר במובייל זה יהיה על פי גודל המסך וכמובן בדקסטופ (במידה ונרצה להגדיר גם שם) הוא יהיה עלי פי גודל המסך שלו. שינוי המילה bottom במילה top, תשנה בדיוק הפוך את המיקום לעליון פחות הפיקסלים שהגדרנו.

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

לאחר שתדביקו את הקוד הזה בCSS המותאם, באופן אוטומטי האזור שלכם יגיע למיקום שהגדרתם ונשאר לכם להגדיר את האזור שיוכל להיות תמיד מעל כל שאר האלמנטים, לכן באזור לשונית מתקדם באלמנטור נגדיר ב-Z-Index, מספר גבוה ככל הניתן (לדוגמא 1000), מספר זה קובע את עדיפות האלמנט כלפיי שאר האלמנטים באתר, וכך ניהיה בטוחים ששום אלמנט אחר לא מפריע לכפתור, במידה ועדיין יש אלמנטים כאלה נצטרך להגדיר מספר גבוה עוד יותר, או להגדיר לאלמנט המפריע Z-Index, קטן יותר.

יצירה ועיצוב הכפתורים

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

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

תמונה מתוך עריכה באלמנטור

 

הטמעת הכפתור בתוך העמודים

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

תחילה, נחפש את השורטקוד של האזור שיצרנו, הוא נמצא בפאנל הוורדפרס שלנו בתוך הטמפלייטים, ונראה כך: [Elementor-template id="750"], כאשר ה-ID, משתנה בהתאם לכל תבנית.

את הקוד הזה נכניס בהזרקה באמצעות קוד הPHP שהכנו:

<?php
do_shortcode( '[Elementor-template id="750"]' );
?>

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

  1. הוא מספר ה-ID, בהתאם למספר של התבנית שיצרתם.
  2. האות הגדולה E ב-Elementor-template, לשנות אותו לe קטנה (מפני שאני לא יכול להציג לכם את זה ככה בעצמי, כי זה שורטקוד).

אהבתם את המאמר? אשמח אם תוכלו לשתף

שיתוף ב facebook
שתפו בפייסבוק
שיתוף ב twitter
שתפו בטוויטר
שיתוף ב linkedin
שתפו בלינקדין

השאירו תגובה

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *