كيفية إضافة زر التمرير للأعلى في ووردبريس

هل ترغب في إضافة زر التمرير للأعلى في ووردبريس

هل رأيت مواقع الويب التي تضيف زر تمرير إلى أعلى الصفحة Smooth Scroll ؟ يعد هذا أمرًا رائعًا عندما يكون لديك صفحة طويلة ، وتريد منح المستخدمين طريقة سهلة للعودة إلى القمة.

في هذه المقالة ، سنوضح لك كيفية إضافة تمرير سلس إلى الأعلى في ووردبريس باستخدام jQuery.

كما يمكنك الاطلاع على كيفية تعطيل زر خيارات الشاشة في ووردبريس

فإذا كنت ممن يرغبون في تعلم كيفية إضافة زر التمرير للأعلى في ووردبريس ، نقدم لك هذا المقال.

زر التمرير للأعلى

ما هو التمرير السلس للأعلى Smooth Scroll ومتى يتم استخدامه؟

عندما تحتوي صفحة أو مقال على قدر كبير من المحتوى ، يضطر المستخدمون إلى التمرير لأسفل لقراءة هذه المحتويات. أثناء قيام المستخدمين بالتمرير لأسفل ، ترتفع جميع روابط التنقل الخاصة بك. عندما ينتهي المستخدمون من قراءة هذه المقالة ، فإنهم بحاجة إلى التمرير لأعلى لمعرفة ما يجب فعله على موقع الويب الخاص بك.

يقوم زر التمرير لأعلى بسرعة بإرسال المستخدمين إلى أعلى الصفحة. يمكنك إضافة هذا كرابط نصي دون استخدام jQuery ، مثل هذا:

<a href="#" title="Back to top">^Top</a>

إنه يرسل المستخدمين فقط إلى أعلى الصفحة ويقوم بالتمرير لأعلى الصفحة بأكملها في أجزاء من الثانية. إنها عملية ، لكنها نوعًا ما تشبه المطبات على الطريق. التمرير السلس هو عكس ذلك. إنه ينزلق بسلاسة إلى أعلى الصفحة. هذا يخلق تأثيرًا لطيفًا ويحسن تجربة المستخدم.

إضافة Smooth Scroll إلى Top Effect باستخدام jQuery في ووردبريس

لإضافة تمرير سلس إلى الأعلى ، سنستخدم jQuery وبعض CSS وسطرًا واحدًا من كود HTML في قالب ووردبريس الخاص بك. افتح أولاً محرر نصوص مثل Notepad. أنشئ ملفًا واحفظه باسم smoothscroll.js. انسخ هذا الرمز والصقه في الملف:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#smoothup') .fadeOut();
        } else {
            $('#smoothup') .fadeIn();
        }
    });
    $('#smoothup').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
        });
});

احفظ الملف وحمله إلى مجلد / js / مجلد قالب ووردبريس (انظر كيفية استخدام FTP لتحميل الملفات إلى ووردبريس ). إذا لم يكن القالب الخاص بك يحتوي على دليل / js / ، فقم بإنشاء واحد وتحميله smoothscroll.js إليه. هذا الرمز هو نص jQuery الذي سيضيف تأثير تمرير سلس يأخذ المستخدمين إلى أعلى الصفحة.

الشيء التالي الذي عليك القيام به هو إضافة smoothscroll.js إلى قالبك. للقيام بذلك بشكل جيد ، سنقوم بإدراج البرنامج النصي في ووردبريس (تعرف على المزيد في دليلنا حول كيفية إضافة البرامج النصية بشكل صحيح في ووردبريس ). انسخ هذا الرمز والصقه في ملف jobs.php الخاص بالسمة.

wp_enqueue_script ('smoothup'، get_template_directory_uri ().
 '/js/smoothscroll.js'، array ('jquery')، ''، true) ؛

في الكود أعلاه ، أخبرنا ووردبريس أن يقوم بتحميل البرنامج النصي الخاص بنا وكذلك تحميل مكتبة jQuery لأن الإضافة الخاصة بنا يعتمد عليها. الآن بعد أن أضفنا جزء jQuery ، دعنا نضيف رابطًا فعليًا إلى موقع ووردبريس الخاص بنا والذي يعيد المستخدمين إلى الأعلى. الصق HTML هذا في أي مكان في ملف footer.php بالمظهر.

<a href="#top" id="smoothup" title="Back to top"></a>

كما لاحظت أننا أضفنا رابطًا لكننا لم نربطه بأي نص. هذا لأننا سنستخدم رمز صورة مع سهم لأعلى لعرض زر الرجوع إلى الأعلى. في هذا المثال نستخدم رمز 40x40px. أضف هذا إلى ورقة أنماط القالب الخاص بك.

#smoothup { 
height: 40px; 
width: 40px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s; 
}
 
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

في CSS أعلاه ، استخدمنا الموضع الثابت لرمز الصورة الخاص بنا واستخدمنا أيقونة الصورة كصورة الخلفية. يمكنك تحميل أيقونة صورتك باستخدام برنامج تحميل وسائط ووردبريس ثم الحصول على عنوان url للصورة للصقه كعنوان url للخلفية. لقد أضفنا أيضًا رسومًا متحركة CSS صغيرة إلى الزر الذي يقوم بتدوير الزر عندما يمسك المستخدم الماوس فوقه.

يسمح التمرير إلى أعلى للمستخدمين بالعودة إلى الأعلى والعثور على أشياء أخرى للقيام بها على موقع الويب الخاص بك. شيء آخر يمكنك القيام به هو إضافة شريط تذييل متحرك مثل الموجود على موقعنا لعرض محتوى مميز.

نأمل أن تساعدك هذه المقالة في إضافة زر تمرير سلس إلى أعلى الصفحة على موقعك باستخدام jQuery.