هل شاهدت مواقع الويب التي تضيف تمريرًا سلسًا إلى تأثير أعلى الصفحة؟ يعد هذا أمرًا رائعًا عندما يكون لديك صفحة طويلة ، وتريد منح المستخدمين طريقة سهلة للعودة إلى القمة. سألنا أحد قرائنا مؤخرًا عن إضافة تمرير سلس إلى التأثير العلوي في ووردبريس. في هذه المقالة ، سنوضح لك كيفية إضافة تمرير سلس إلى التأثير العلوي في ووردبريس باستخدام jQuery.
ملاحظة: تم إنشاء هذا البرنامج التعليمي للمستخدم الوسيط DIY الذي يشعر بالراحة عند تحرير سماته. إذا كنت تريد استخدام طريقة البرنامج المساعد ، فالرجاء استخدام تمرير الصفحة السلس إلى المكون الإضافي العلوي . بالنسبة لأولئك الذين يرغبون في تعلم كيفية القيام بذلك بدون مكون إضافي ، يرجى متابعة القراءة.
قم بالتمرير إلى أعلى مثال
عندما تحتوي صفحة أو منشور على قدر كبير من المحتوى ، يضطر المستخدمون إلى التمرير لأسفل لقراءة هذه المحتويات. أثناء قيام المستخدمين بالتمرير لأسفل ، ترتفع جميع روابط التنقل الخاصة بك. عندما ينتهي المستخدمون من قراءة هذه المقالة ، فإنهم بحاجة إلى التمرير لأعلى لمعرفة ما يجب فعله على موقع الويب الخاص بك. يقوم زر التمرير لأعلى بسرعة بإرسال المستخدمين إلى أعلى الصفحة. يمكنك إضافة هذا كرابط نصي دون استخدام jQuery ، مثل هذا:
<a href="#" title="Back to top">^Top</a>إنه يرسل المستخدمين فقط إلى أعلى الصفحة ويقوم بالتمرير لأعلى الصفحة بأكملها في أجزاء من الثانية. إنها عملية ، لكنها نوعًا ما تشبه المطبات على الطريق. التمرير السلس هو عكس ذلك. إنه ينزلق بسلاسة إلى أعلى الصفحة. هذا يخلق تأثيرًا لطيفًا ويحسن تجربة المستخدم.
لإضافة تمرير سلس إلى التأثير العلوي ، سنستخدم 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إلى المظهر الخاص بك. للقيام بذلك بشكل جيد ، سنقوم بإدراج البرنامج النصي في ووردبريس (تعرف على المزيد في دليلنا حول كيفية إضافة البرامج النصية بشكل صحيح في ووردبريس ). انسخ هذا الرمز والصقه في functions.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>كما لاحظت أننا أضفنا رابطًا لكننا لم نربطه بأي نص. هذا لأننا سنستخدم أيقونة صورة مع سهم لأعلى لعرض زر الرجوع إلى الأعلى. في هذا المثال ، نستخدم رمز 40 × 40 بكسل. أضف هذا إلى ورقة أنماط المظهر الخاص بك.
#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 صغيرة إلى الزر الذي يقوم بتدوير الزر عندما يأخذ المستخدم الماوس فوقه.
يسمح التمرير إلى أعلى التأثير للمستخدمين بالعودة إلى الأعلى والعثور على أشياء أخرى للقيام بها على موقع الويب الخاص بك. شيء آخر يمكنك القيام به هو إضافة شريط تذييل متحرك مثل الموجود على موقعنا لعرض محتوى مميز. إذا كنت لا تريد أن يقوم المستخدمون بالتمرير لأعلى لمشاركة مقالتك ، فنحن نوصي بشدة باستخدام المكوّن الإضافي لشريط المشاركة الاجتماعية العائم كما هو الحال لدينا في WPBeginner.
نأمل أن تساعدك هذه المقالة في إضافة تمرير سلس إلى أعلى تأثير الصفحة على موقعك باستخدام jQuery. لرؤية بعض الاستخدامات الرائعة الأخرى لـ jQuery في ووردبريس ، يمكنك إلقاء نظرة على مقالة الأكورديون الخاصة بـ jQuery FAQ أو مقالة التحميل البطيء للصور .
هل تعتقد أن تأثير التمرير لأعلى مفيد؟ واسمحوا لنا أن نعرف من خلال ترك تعليق أدناه.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
