פונקציה כמו כפתור "למעלה" עבור האתר הופכת את משאב האינטרנט לנוח יותר עבור המבקרים בו. זה עוזר לך לעבור בקלות מכל מקום בדף לראש העמוד. זה חובה עבור חנויות מקוונות ואתרים עם מאמרים גדולים הדורשים גלילה ארוכה למטה.
למה זה מיועד
כרגע, לרוב האתרים אין פונקציה כזו כמו כפתור "מעלה", ואין בזה שום דבר קריטי. אבל השימוש בו יכול להביא יתרונות רבים הן למשאב האינטרנט והן עבור המבקרים בו.
הטבה למבקרים
זה קורה לעתים קרובות כאשר הדף של משאב אינטרנט עמוס במידע רב, כאשר מאמר אינפורמטיבי תופס הרבה מקום ויש לגלול למטה בעמוד עם גלגל העכבר. בנוסף לכך, בסוף המאמר עשויות להיות תגובות רבות עליו.
כשמבקר קורא מאמר, אין שום דבר מעייף בלגלול למטה בעמוד, אבל כשהטקסט הגיע לסיומו ואתה צריך להתקדם, זה מתחיל להיות קצת מעייף. רוב האנשים פשוט יתעצלו מכדי לגלול הרבה זמן, והם פשוט יסגרו את האתר, במקום לטייל שוב במרחביו.
באמצעות הכפתורמעבר מיידי לראש הדף עושה את זה נוח יותר לבלות באתר.
הטבה למשאב האינטרנט
היתרונות עבור המשאב עצמו נובעים מגורמי עבר, שכן ניווט קל יותר באתר משפר גורמים התנהגותיים שכן כל המבקרים יהיו פעילים יותר בפעולותיהם ויעברו לדפים אחרים.
לפיכך, גורמים התנהגותיים אלו משפיעים על היחס של כל מנועי החיפוש לאתר ומובילים לשיפור המיקום בתוצאות החיפוש.
איך ליצור את כפתור ה"מעלה" באתר בעצמך
עסקאות נוספות. אתה תמיד יכול ליצור כפתור גלילה למעלה עבור אתר בכל אחד מה-CMS בעצמך על ידי ביצוע רק כמה שלבים פשוטים ביותר:
- יצירת תמונה;
- יצירת תסריט;
- סגנון כפתור ליצור;
- הוספת לאתר.
תמונת לחצן
כדי להוסיף כפתור "מעלה" באתר, תחילה עליך ליצור את הסמל עצמו, כאשר לוחצים עליו, המשתמש יעבור לראש העמוד. לשם כך, אתה יכול להשתמש באפשרויות מוכנות, ביניהן אתה תמיד יכול לבחור את המתאימה ביותר.
כדי לשפר את מראה הכפתור, עלינו לבצע כמה שיפורים, כלומר ליצור ספרייט המאפשר לנו לשלב תמונות רקע המבוססות על CSS, ובכך ליצור מהן אנימציה.
לעבודות גרפיות, אתה יכול להשתמש בכל עורך. אבל האפשרות הנוחה ביותר תהיה שירות מקוון. PIXLR, מכיוון שאין מה להוריד כאן ואתה יכול להשתמש בו ישירות בדפדפן שלך.
כדי להתחיל, בחלון העורך שמופיע, בחר בשדה "העלה תמונה מהמחשב". ניקח את התמונה של רקטה כדוגמה.
אם המידות של הסמל שנבחר גדולות מדי, תצטרך לבצע התאמה קטנה של גודל. לשם כך, עבור לתפריט העליון ובחר בשדה "עריכה", ולאחר "המרה חופשית …"
לאחר מכן, מופיעים סמנים מיוחדים ליד התמונה, זזים בהם ניתן לשנות את גודל התמונה. כדי לשמור על פרופורציות, אתה יכול להשתמש במקש Shift, והחזק אותו אתה צריך כדי להזיז את הסמנים הכחולים. בסוף שלבים אלו מתקבלת תמונה של רקטה.
השלב הבא הוא ליצור עותק של השכבה.
עכשיו אתה צריך להזיז קצת את התמונה של הרקטה מהשכבה החדשה למעלה. לשם כך, יהיה נוח להשתמש בכלי התנועה, שנמצא בעמודה השנייה של התפריט השמאלי, ובחץ למעלה במקלדת.
עכשיו אנחנו צריכים להפוך את התמונה העליונה לשחור לבן. ניתן לעשות זאת באמצעות הפריט "תיקון" - "גוון / רוויה" בתפריט העליון. להפסקת רוויה מלאה, יש להגדיר את מחוון הרוויה ל-100. פעולה זו תאפשר לך ליצור אפקט שבו כפתור ה"מעלה" יהפוך משחור לבן לצבע כאשר תרחף מעליו.
המגע הסופי הוא הסרת מקום נוסף מסביב לשתי התמונות. כדי לעשות זאת, בחר את הפריט "חתוך" מהתפריט השמאלי ואנו בוחרים רק שתי רקטות במלבן. כדי לבצע חיתוך, מקש Enter נלחץ.
התוצאה היא תמונה שבה אין מקום פנוי נוסף. יהיה עליך לרשום את הרוחב והגובה של התמונה המתקבלת, מכיוון שהנתונים הללו יהיו שימושיים בשלב הבא.
כדי לשמור, צריך ללחוץ על "קובץ" - "שמור", כאשר בפסקה השמאלית "המחשב שלי" נכתוב את שם התמונה (רק הפריסה האנגלית), בחר את הפורמט (בזה מקרה, PNG) ולחץ על הלחצן "כן".
קובץ עם התסריט של כפתור ה"מעלה"
אין צורך לכתוב תסריט במקרה זה. ניתן יהיה להשתמש בגרסה הציבורית, תוך ביצוע מספר תיקונים בקוד המוגמר.
כדי לעשות זאת, עליך להוריד כל עורך קוד. האפשרות הפופולרית והחינמית ביותר היא Notepad++. לאחר התקנתו, עליך להעתיק ולהדביק את כל הקוד הזה לתוכו:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} אחרת {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
לאחר מכן, לחץ בתפריט העליון "קובץ" - "שמור בשם …", ולאחר מכן נשמר את הקוד בפורמט.js. לאחר מכן, תוכל להשתמש בקוד זה באתר שלך על ידי העלאת קבצי הסקריפט והתמונות אליו באמצעות חיבור FTP.
התקן באתר
כדי להגדיר את כפתור הגלילה למעלה עבור האתר, עליך להיכנסקוד מקום נדרש. עליך להזין אותו לפני התג.
יצירת סגנון כפתור עם CSS
לרוב, כפתור ה"מעלה" של האתר נמצא בתחתית ("כותרת תחתונה").
יש להוסיף את הקוד הבא לקובץ style.css של האתר:
|
/לחצן למעלה/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/נתיב תמונה מקורי/ width:39px;/ button רוחב/ height:96px;/50% גובה לחצן/ bottom:5px;/ריפוד תחתון במיקום קבוע/ left:89%;/shift שמאלה/ }.scrollTop:hover{ background-position:0 -108px; } /היסט רקע/" |
במקרה זה, יהיה צורך בנתוני הרוחב והגובה של התמונה. נותר רק להזין את הנתונים שהתקבלו לקוד, וכפתור ה"מעלה" לאתר יהיה מוכן! מה עוד?
כפתור למעלה לאתר וורדפרס
עבור CMS זה, ניתן ליצור את כפתור "למעלה" באמצעות תוספים, כמו גם באופן עצמאי.
שיטת התוספים היא הנוחה והקלה ביותר להתקנה, שכן היא דורשת רק ללחוץ על כפתור ההתקנה ולהגדיר את כל הפונקציונליות בתפריט הפלאגין.
יש לגשת בזהירות לבחירת האחרון, שכן בעזרתו יהיה קל לרכוש וירוס באתר. האפשרות הפופולרית והמוכחת ביותר היא תוסף בשם Scroll Back To Top. אתה יכול להוריד אותו באמצעות החיפוש הרגיל של תוספים של Wordpress.
לתוסף זה ישפונקציונליות מרובת, ויהיה קל מאוד להתאים אישית את כפתור ה"מעלה" עבור אתר וורדפרס. אין צורך לשנות את כל הערכים כלל, אתה רק צריך להגדיר את המראה והמיקום של הכפתור בדף האתר.
כפי שאתה יכול לראות, הגדרת כפתור ה-up עם פלאגינים היא קלה מאוד. אבל יש ניואנס חשוב אחד, שהוא שכל תוסף מותקן טוען את ה-CMS. זה עשוי להשפיע על מהירות משאב האינטרנט. לכן רוב בעלי האתרים מנסים לבצע את כל השינויים ישירות בקוד, ולא בעזרת הרחבות של צד שלישי. אתה יכול ליצור כפתור "למעלה" עבור אתר HTML, אשר ימזער את המשאבים הנצרכים.
לפני שינוי כל קבצי מערכת וורדפרס, עליך לגבות אותם. לאחר מכן תוכל לבצע את כל השלבים ליצירת כפתור משלך, המתואר למעלה.
לחצן "למעלה" עבור ג'ומלה
CMS Joomla תומכת גם בהתקנה של תוספים, כמו וורדפרס. הגרסה המוצלחת ביותר של כפתור ה"מעלה" עבור אתר בג'ומלה 3 היא הרחבה בשם Top of the Page.
ב-CMS זה, ניתן להתקין כל תוסף דרך "מנהל ההרחבות". בשביל זה אתה צריך:
- הורד את הפלאגין באינטרנט;
- לחץ על כפתור "עיון" במנהל ההרחבות;
- בחר ארכיון שהורד;
- לחץ על "הורד" והתקן.
עכשיו אתה צריך להפעיל אותו ב"מנהל הפלאגין". לזהעליך לעבור לסעיף זה, למצוא את התוסף ולעבור למצב "מופעל".
השלב הבא הוא להגדיר את כל פרמטרי ההרחבה באמצעות אותו סעיף שבו אתה צריך למצוא את "הפרמטרים הבסיסיים" של התוסף הזה בצד ימין.
לראש הדף יש את הפונקציונליות הבאה:
- Run in/ מנהל - הפעלת האפשרות לא רק במשאב האינטרנט, אלא גם בפאנל Joomla CMS עצמו.
- Button Reveal Position - כמה פיקסלים המשתמש צריך להריץ אחורה כדי שהלחצן למעלה יופיע.
- השמט טקסט לחצן - נוכחות טקסט על הכפתור.
- תמיד בראש - דף האתר תמיד יוצג מלמעלה שלו. בעת שימוש בעוגנים כדי לגלול למיקום מסוים בדף, אין צורך להפעיל אפשרות זו.
- Smooth Scroll - הופך את גלילה לדף חלק יותר.
- משך הגלילה - הזמן שאחריו הדף יעבור לחלוטין להתחלה.
- מעבר גלילה - מוסיף עוד אפקטים חזותיים לגלילה.
- הקלת מעבר - "החלשת" התנועה לראש העמוד.
- מיקום קישור - המיקום של הסמל. כברירת מחדל, הלחצן ממוקם בפינה הימנית התחתונה.
- השתמש בסגנונות – סגנון כפתור בודד, שניתן להגדיר בשדה למטה. אם יוחלף לערך שלילי, כל הגדרות הסגנון יילקחו מהנושא הפעיל של האתר.
- סגנון קישור - שדה להזנת פרמטרי סגנון הכפתור שלך.
כדי להתאים אישית את הסגנון של כפתור "למעלה", אתה חייב להיות לפחות מינימליידע ב-CCS. אחרת, עליך לשנות את הערך של הפרמטר הלפני אחרון ל-"No".
ניואנס חשוב נוסף הוא שהכתובת הרגילה על הסמל מכילה את הטקסט באנגלית: Return to Top. טקסט כזה לא יכול להיות קיים באתר בשפה הרוסית, אז אתה פשוט צריך להשבית אותו בפרמטרים של הפלאגין או לשנות אותו לרוסית.
כדי לשנות כיתוב זה, עליך לעבור לשרת האתר באמצעות FTP או מנהל הקבצים המובנה באחסון. לאחר מכן, בספרייה "/administrator/language/en-GB/" עליך למצוא קובץ בשם "en-GB.plg_system_topofthepage.ini".
לפני שינוי הטקסט, עליך לשנות את הקידוד של מסמך זה ל-UTF-8. זה יהפוך את התצוגה הרגילה של אותיות רוסיות.
לאחר מכן אנו מוצאים את השורה הבאה:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="חזור לראש הדף"" |
ושנה את הביטוי במרכאות לרוסית. אתה יכול להשתמש בביטויים כמו "למעלה!", "למעלה!" או "למעלה!".
בסוף, יהיה עליך לשמור את הקובץ ששונה ולבדוק את כפתור ה"מעלה" עבור האתר בג'ומלה.
לחצן למעלה עבור Ucoz
כפתור ה"מעלה" עבור האתר ב-Ucoz יצטרך להיעשות באמצעות הזרקת קוד, מכיוון שאי אפשר לחבר פלאגינים עבור CMS זה. עם זאת, זה לא מצריך לימוד ארוך של קבצי המערכת וחיפוש אחר השורות הדרושות, אתה רק צריך להדביק קוד קטן במקום הנכון.
כדי להתקין אותנונדרש:
- עבור אל "לוח בקרה -> עיצוב -> ניהול עיצוב (תבניות) -> תחתית האתר;
- הכנס את התסריט (ניתן למצוא באתר הרשמי של הפרויקט ובמשאבים של צד שלישי).
מסקנה
לאחר מכן, יופיע סמל בפינה הימנית התחתונה, שיעביר את המשתמש לחלק העליון של הדף.
כפי שאתה יכול לראות, הגדרת כפתור החזרה עבור כל אחד מה-CMS לא הייתה קשה במיוחד. אתה יכול להשתמש גם בשיטת התקנה אוטומטית (תוספים) וגם בשיטת התקנה ידנית. עם זאת, האפשרות האחרונה נותרה המתאימה ביותר, מכיוון שהיא אינה משפיעה לרעה על ביצועי האתר.
ניתן להשתמש בכפתור "חזרה למעלה" עבור אתר HTML כדי למזער את צריכת משאבי האתר, שכן למספר רב של הרחבות יכולה להיות השפעה שלילית על ביצועי המשאב. תוסף כפתור "למעלה" אחד לא יוכל להשפיע מאוד על זמן הטעינה של דפי האתר, אך ברוב המקרים למשתמש מותקנים לפחות תריסר תוספים ב-CMS. במקרה זה, כל תוסף יכול להשפיע לרעה על הביצועים של דפי האתר.
