הוספת כפתור חזרה למעלה בוורדפרס
נכתב ע"י יוחאי ירמיהו
בתור בונה אתרים שיפור חווית משתמש חשובה לי וכאשר מדובר על אתר כמו האתר הזה עם הרבה מאמרים ועמודים מאוד ארוכים אז אחת הדרכים לשיפור חווית המשתמש והגלישה היא באמצעות כפתור חזרה למעלה (Scroll to Top).
במדריך הבא אדבר על איך להוסיף כפתור חזרה למעלה בקלות באתרי וורדפרס באמצעות תוסף שפיתחתי.
צפו בסרטון הבא על מנת להבין בצורה טובה איך להוסיף כפתור חזרה למעלה לאתר
למה צריך כפתור חזרה למעלה?
באתר שלי יש לי כמה מדריכים מאוד מאוד ארוכים. אחד המדריכים האחרונים שכתבתי בנושא של בחירת אחסון אתרים מומלץ מכיל למעלה מ-7,000 מילים ועל מנת להקל על הגולשים באתר כאשר יש מאמרים ארוכים כדאי להוסיף כפתור חזרה למעלה ולהציג אותו באתר.
בתצוגה של המחשב הנייח זה לא חובה להציג את הכפתור אך כאשר מדובר על תצוגה של הטלפון הנייד גלילה בעמוד ללא כפתור חזרה למעלה יכולה להקשות מאוד על הגולש לעיתים אפילו תגרום לו לעזוב את העמוד.
איך להתקין את התוסף Back To The Top?
התהליך מאוד פשוט וכל מה שאתם צריכים לעשות זה להתקין את התוסף Back To The Top Button ולהפעיל אותו. ניתן גם לעשות חיפוש על השם YYDevelopment בספריית התוספים של וורדפרס וזה יציג עבורכם את התוסף הנדרש וכמה תוספים מעניינים נוספים.
לאחר ההתקנה התוסף יופיע באופן אוטומטי בכל העמודים באתר עם העיצוב הבסיסי שלו (כפי שמופיע בתמונה מעל). במידה ותרצו בכך ניתן יהיה לשנות גם חלק מההגדרות של התוסף כמו המיקום שלו, הצבע, הסמל שמופיע, הגודל וכו'…
הגדרות בסיסיות לתוסף
לאחר שסיימתם להתקין את התוסף ולאחר שהוא הופעל תוכלו לראות שבעמודים הארוכים באתר מופיע לחצן המאפשר לצופה לחזור לראש העמוד בלחיצה.
לאלו מכם שרוצים לבצע התאמה של התוסף ושינוי של הצבעים שלו לצבעי עיצוב האתר ניתן גם לשנות כמה הגדרות בסיסיות בקלות מתוך עמוד ההגדרות של התוסף. על מנת לבצע את השינויים כנסו לתוך אזור הניהול בוורדפרס. באזור הניהול רחפו בתפריט הימני על הגדרות ותבחרו באפשרות של " Back To Top Button".
האפשרויות בדרך כלל רצוי לשנות הם האפשרויות הבאות:
Background color hex – הצבע של הכפתור ב-RGB (על מנת להבין כיצד לשנות זאת צפו בסרטון בראש העמוד).
Button Width ו- Button Height – גובה ורוחב הכפתור. מומלץ להשתמש בערך זהה ב-2 האפשרויות על מנת שהכפתור יוצג בתור ריבוע או בתור עיגול ועל מנת שהצורה של הכפתור תוצג כראוי.
Border Radius – הגדרת שולי/עיגול הכפתור. ערך של 50% יגרום לכך שהכפתור יוצג בתור עיגול. ערך של 0px יגרום לכך שהכפתור יהיה ריבוע וערך של 10px יציג כפתור מעט מעוגל. כמובן שניתן גם לשחק עם הערכים השונים ויהיה יותר פשוט לערוך את התוסף עם יש לכם ידע בעריכה של קוד CSS.
בנוסף להגדרות ניתן גם לשנות את המיקום של הכפתור בתוך העמוד (ניתן להגדיר מיקום נפרד במחשב ומיקום נפרד בתצוגת הנייד) וניתן להגדיר גם שהכפתור יוצג רק במחשב או רק במובייל.
למי שזה מעניין אותו תוכלו לצפות בתוספים נוספים לוורדפרס שפיתחתי ושחררתי בחינם על ידי לחיצה כאן.
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
יוחאי ירמיהו
בעל תואר ראשון בלוגיסטיקה וכלכלה ותואר הנדסאי בתעשייה וניהול עם התמחות בשיווק.
מעצב גרפי ומפתח אתרים עם ניסיון מעשי של למעלה מעשור בכל מה שקשור לעולם הדיגיטלי. נינג'ה מומחה למערכת המופלאה לבניית אתרים שנקראת וורדפרס, וזהו בסך הכל :-).
מאמרים נוספים שעשויים לעניין אתכם:
יש לכם שאלות או משהו להוסיף? שתפו אותנו בתגובות מתחת!
אם יש לכם שאלות או משהו להוסיף נשמח לשמוע מכם בתגובות מתחת ולסייע במידת הצורך.