הוספת כפתור Scroll to Top באתרי וורדפרס

ניתן לומר כי בשנים האחרונות הפופולריות של כפתורי back to top או scroll to top עלתה בעקבות עלייה בשימוש במכשירים ניידים. כאשר משתמש מסויים גולל מעבר לנקודה מסויימת באתר שלכם, הכפתור היעיל הזה מופיע ומאפשר למשתמשים לחזור בצורה פשוטה ומהירה לחלקו העליון של האתר שלכם.

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

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

אציין כי הוספתי Event לאנליטיקס בכדי לראות כמה גולשים משתמשים בכפתור זה והתוצאה הייתה די מפתיעה… מסתבר שכפתור זה די שימושי בבלוג זה. אראה לכם גם כיצד להוסיף את אותו Event כך שתוכלו למדוד בעצמכם האם כפתור ה scroll to top שימושי באתר שלכם.

הוספת כפתור Scroll to Top

אז כמובן שכפתור זה אינו רלוונטי עבור כל אתר, אך אם רלוונטי עבורכם הנה דרך פשוטה להוסיף כפתור scroll to top באתרי וורדפרס.

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

על קוד זה להיות בקובץ functions.php כמובן:

<?php
/******* BEGIN HERE *******/
function add_up_button() { ?>
    <div id="up_btn"><a href="#" title="Go Up!">Up!</a></div>
	<?php
}
add_action( 'wp_footer', 'add_up_button' );

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

#up_btn {
    position: fixed;
    bottom: 15px;
    right: 10px;
    display: none;
    z-index: 20;
}
#up_btn a {
    display: flex;
    background: #ffd200;
    border-radius: 50%;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    color: #2d2d2d;
    direction: ltr;
    font-weight: 600;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
}

#up_btn a:hover {
    background: #2d2d2d;
    color: #ffd200;
}

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

נעשה זאת באמצעות הקוד הבא אותו עליכם להוסיף לקובץ Javascript הנטען באתר שלכם. אם אתם מעוניינים ליצור קובץ חדש עבור זה, או אם סתם מעניין אתכם כיצד להוסיף קבצי Js ו קבצי CSS באתרי וורדפרס, תנו מבט בקישור הנ״ל.

בכל אופן הנה הקוד:

function scroll_to_top_btn() {
    var up_btn = $('#up_btn');

    // Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1700) {
            up_btn.fadeIn(300);
        } else {
            up_btn.fadeOut(300);
        }
    });


    // Click event to scroll to top
    up_btn.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

}

scroll_to_top_btn();

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

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

הוספת Analytics Event לכפתור ה Scroll to Top שיצרנו

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

$("#up_btn").on('click', function() {
      ga('send', 'event', 'Links', 'UpButton Clicks', 'User Scrolled to Top');
 });

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

עד כאן על הדרך להוספת כפתור Scroll to Top באתרי וורדפרס.