הוספת כפתור Back To Top (חזרה למעלה) בוורדפרס
נכתב ע"י יוחאי ירמיהו5 שאלות
תיאור קצר לשיעור: בשיעור זה נלמד כיצד להוסיף כפתור חזרה למעלה על מנת לאפשר לגולשים באתר לחזור בלחיצת כפתור אל ראש העמוד כאשר יש עמודים עם הרבה תוכן.
אורך השיעור: 8:03 דקות
איך לבנות אתר בחינם בשעה וחצי?
תוכן השיעור:
במידה ויש לנו באתר עמודים ארוכים שמכילים הרבה תוכן במרבית המקרים נרצה לאפשר לגולש ללחוץ על כפתור חזרה למעלה שיעלה אותם בחזרה לראש העמוד וזה במטרה להפוך את הגלישה למעט יותר נוחה במחשב ובעיקר במובייל.
הוספת כפתור Back To Top (בחזרה למעלה) עם תוסף
את הכפתור חזרה למעלה אנחנו הולכים להוסיף באמצעות תוסף שפיתחתי שנקרא Back To The Top Button והתוסף הזה מאפשר לנו להגדיר כפתור חזרה למעלה בלחיצת כפתור בודדת.
בשביל להתקין את התוסף עלינו להיכנס אל אזור הניהול של וורדפרס, לבחור באפשרות של תוסף חדש ולעשות חיפוש על הביטוי של Back To The Top Button ולאחר מכן נתקין את התוסף.
לאחר סיום התקנת התוסף הכפתור יופיע באופן אוטומטי בעמוד של האתר ברגע שנגלול מעט את העמוד למטה.
אם נרצה לשנות את הצבעים והמיקום של הכפתור בתוך העמוד נוכל לעשות זאת על ידי כניסה להגדרות ושם נבחר את האפשרות של Back To Top Button.
בעמוד נוכל לשנות את רוחב והגובה של הכפתור, את הצבע שלו, את המיקום, את המיקום של האייקון, את התמונה, נוכל לבחור האם להסתיר את התמונה במחשב או בנייד, נוכל להגדיר מיקומים שונים לתצוגה במובייל ונוכל להגדיר עמודים שבהם התוסף לא יופיע או עמודים בודדים שרק שם יופיע התוסף.
הפתעות במחיר מנצח
עוד לא צפיתם בהדרכה? זה בחינם!
יש לי הצעה מעניינת יצרתי הדרכה מלאה של למעלה משעתיים שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
קורסים מובילים
וורדפרס Beginner
הקורס המושלם ללימוד העולם של בניית אתרים (מותאם למתחילים ללא ידע)
- קורס וורדפרס Beginner קורס בניית אתרים למתחילים
- קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
- בונוס 1: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 3: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- 310 שיעורים למתחילים
- תמיכה לשאלות בעמודי השיעורים לשנה
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-30 ימים
וורדפרס Next Level
הקורס המושלם לבוני אתרים מנוסים שרוצים להרחיב את הידע ולעלות רמה
- קורס וורדפרס Next Level בניית אתרים למתקדמים
- קורס וורדפרס SEO התאמת אתרים לגוגל
- קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור
- קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה
- קורס וורדפרס Rocket שיפור מהירות לאתר
- קורס וורדפרס Security חיזוק אבטחה לאתר
- קורס וורדפרס Global בניית אתר דו לשוניים בכל השפות
- בונוס 1: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 5: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- 391 שיעורים למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-30 ימים
מומלץ בשבילך
באנדל וורדפרס Expert
באנדל עם הקורס למתחילים + הקורס למתקדמים במחיר משתלם במיוחד
- קורס וורדפרס Beginner קורס בניית אתרים למתחילים
- קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
- קורס בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- קורס וורדפרס Next Level בניית אתרים למתקדמים
- קורס וורדפרס SEO התאמת אתרים לגוגל
- קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור
- קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה
- קורס וורדפרס Rocket שיפור מהירות לאתר
- קורס וורדפרס Security חיזוק אבטחה לאתר
- קורס וורדפרס Global בניית אתר דו לשוניים בכל השפות
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- 593 שיעורים למתחילים + למתקדמים
- תמיכה לשאלות בעמודי השיעורים לשנה
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-30 ימים
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג’ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
5 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
היי יוחאי,
אחרי שהתקנתי את התוסף ושיחקתי קצת בהגדרות אני רואה שאכן הכפתור התווסף לי בצד ימין, אך יש כפתור נוסף בצד שמאל שגם עושה את אותה פעולה, לא זכור לי שהגדרתי אותו. אתה יכול לומר לי למה הוא מופיע? מהיכן הגיע?
תודה,
שרגא
היי שרגא,
יכול להיות שאם אתה משתמש בתבנית של אסטרה הכפתור מגיע משם.
על מנת למחוק את הכפתור אתה צריך ללחוץ על “התאמה אישית” בתפריט העליון ולאחר מכן לבחור באפשרות של גלובלי >> לגלול למעלה >> ותסיר את האפשרות של Enable Scroll to Top.
היי, האם יש אפשרות לשנות צבע ב hover?
מתוך התוסף זה לא אפשרי, אבל אם יש לך קצת רקע עם עבודה ב-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>
מצויין הצלחתי תודה רבה!