עדיין לא חברים שלנו ביוטיוב ובפייסבוק? :( חבל בדרך כלל אנחנו ממש נחמדים:

בונה אתרים » בניית אתרים בוורדפרס » הוספת כפתור חזרה למעלה (Back To Top) באתר וורדפרס

הוספת כפתור חזרה למעלה (Back To Top) באתר וורדפרס

נכתב ע"י יוחאי ירמיהו

בתור בונה אתרים שיפור חווית משתמש חשובה לי וכאשר מדובר על אתר כמו האתר הזה עם הרבה מאמרים ועמודים מאוד ארוכים אז אחת הדרכים לשיפור חווית המשתמש והגלישה היא באמצעות כפתור חזרה למעלה (Scroll to Top).

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

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

הוספת כפתור חזרה למעלה (Back To The 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.

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

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

אל תחמיצו אף פוסט

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

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

יוחאי ירמיהו
יוחאי ירמיהו

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

מאמרים נוספים שעשויים לעניין אתכם:

תוספים לוורדפרס שפיתחנו

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

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

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

יצירה ועריכת עמודים באלמנטור

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

כתיבת תוכן לאתר - 11 כללים

כתיבת תוכן לאתר הוא אחד הנושאים החשובים ביותר בתחום של בניית אתרים וקידום בגוגל. במאמר הבא תוכלו לצפות ב-11 כללים חשובים לכתיבת תוכן איכותי לעמודים באתר.

הצגת ID (מספר זיהוי) בוורדפרס

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

השוואות אחסון אתרים ומחירים

מחפשים אחסון אתרים מומלץ, זול ואיכותי? במאמר הבא תוכלו לצפות במספר אחסונים מובילים מישראל ומחו"ל לצד המלצות אישיות, ביקורות ומחירים לכל אחסון.

יש לכם שאלות או משהו להוסיף? שתפו אותנו בתגובות מתחת!

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

    כתיבת תגובה

    מלאו את כל השדות על מנת להשאיר תגובה (האימייל שלכם לא יוצג באתר).

    כלי נגישות