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

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

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

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

אורך השיעור: 8:03 דקות

קורסים המכילים את השיעור וידאו:

תוכן השיעור:

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

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

את הכפתור חזרה למעלה אנחנו הולכים להוסיף באמצעות תוסף שפיתחתי שנקרא Back To The Top Button והתוסף הזה מאפשר לנו להגדיר כפתור חזרה למעלה בלחיצת כפתור בודדת.

בשביל להתקין את התוסף עלינו להיכנס אל אזור הניהול של וורדפרס, לבחור באפשרות של תוסף חדש ולעשות חיפוש על הביטוי של Back To The Top Button ולאחר מכן נתקין את התוסף.

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

אם נרצה לשנות את הצבעים והמיקום של הכפתור בתוך העמוד נוכל לעשות זאת על ידי כניסה להגדרות ושם נבחר את האפשרות של Back To Top Button.

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

הצטרפו לקהילות המובילות של בוני האתרים בישראל

זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:

מתחילים בקטן - קורסים לבוני אתרים בפחות מ-99 ₪

קורסים מקיפים ומומלצים ללימוד בניית אתרים

לבנות אתר ב-10 ימים

קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.

קורס לבנות אתר ב-10 ימים 52 שיעורים שילמדו אותך הכל על בניית אתרים
בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
בונוס 4: קורס אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
בונוס 5: קורס קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
תמיכה לשנה לשאלות בעמודי השיעורים
גישה לקבוצת הפייסבוק של הקורס
גישה לכל החיים
תעודה הכשרה בסיום הקורס (קובץ PDF)
גישה לעדכונים ושיעורים חדשים
100% החזר כספי ל-14 ימים

רכשו את הקורס 593 סטודנטים לפניך (-:

מסלול וורדפרס Expert

למעלה מ-10 קורסים מלאים ומעל 600 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.

קורס וורדפרס Beginner קורס בניית אתרים למתחילים – (2,250 ₪)
קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
קורס בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
קורס וורדפרס Next Level מחיר הקורס 2,500 ₪
קורס וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור – (999 ₪)
קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
קורס וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
קורס וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
קורס וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
בונוס 6: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
705 שיעורים למתחילים + למתקדמים
תמיכה לשנה לשאלות בעמודי השיעורים
גישה לקבוצת הפייסבוק של הקורס
גישה לכל החיים
תעודה הכשרה בסיום הקורס (קובץ PDF)
גישה לעדכונים ושיעורים חדשים
100% החזר כספי ל-14 ימים

רכשו את הקורס 492 סטודנטים לפניך (-:

יוחאי ירמיהו

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

שרגא קישון
וורדפרס Expert
היי יוחאי,
אחרי שהתקנתי את התוסף ושיחקתי קצת בהגדרות אני רואה שאכן הכפתור התווסף לי בצד ימין, אך יש כפתור נוסף בצד שמאל שגם עושה את אותה פעולה, לא זכור לי שהגדרתי אותו. אתה יכול לומר לי למה הוא מופיע? מהיכן הגיע?
תודה,
שרגא
1. יוחאי ירמיהו
  הנהלת האתר
  היי שרגא,
  יכול להיות שאם אתה משתמש בתבנית של אסטרה הכפתור מגיע משם.
  על מנת למחוק את הכפתור אתה צריך ללחוץ על “התאמה אישית” בתפריט העליון ולאחר מכן לבחור באפשרות של גלובלי >> לגלול למעלה >> ותסיר את האפשרות של Enable Scroll to Top.
אדיר איתח
וורדפרס Expert
היי, האם יש אפשרות לשנות צבע ב hover?
1. יוחאי ירמיהו
  הנהלת האתר
  מתוך התוסף זה לא אפשרי, אבל אם יש לך קצת רקע עם עבודה ב-CSS ואתה יודע איך להוסיף קוד CSS גלובלי באתר אתה יכול להשתמש בפקודה הבאה ולבחור את הצבע שאתה רוצה.
  a.yydev-back-to-top:hover {
  background-color: green !important;
  }
  ואתה יכול גם להוסיף את זה בתוספים של Tag Manager כמו התוסף שאני מציג בקורס בחלק של ה-Header:
  https://wordpress.org/plugins/tag-manager-header-body-footer/
  ואם אתה מוסיף את זה בתוסף שם ולא למשל באלמנטור אז אתה צריך להוסיף תגיות Style בצורה הבאה:
  <style>
  a.yydev-back-to-top:hover {
  background-color: green !important;
  }
  </style>
  1. אדיר איתח
    וורדפרס Expert
    מצויין הצלחתי תודה רבה!