كيفية إضافة Smooth Scroll to Top Effect في WordPress باستخدام jQuery

هل ترغب في إضافة تمرير سلس إلى أعلى تأثير الصفحة على موقع WordPress الخاص بك؟

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

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

ما هو التمرير السلس ومتى يجب استخدامه؟

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

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

يمكنك إضافة هذه الوظيفة كرابط نصي بسيط دون استخدام jQuery ، مثل هذا:

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

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

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

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

كيفية إضافة تأثير التمرير إلى أعلى السلس باستخدام البرنامج المساعد WordPress

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

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

عند التنشيط ، يمكنك الانتقال إلى الإعدادات »Scroll Top من لوحة معلومات WordPress الخاصة بك. هنا يمكنك تكوين المكون الإضافي وتخصيص تأثير التمرير السلس.

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

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

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

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

يوفر المكون الإضافي WPFront Scroll Top أيضًا عوامل تصفية لإظهار زر التمرير لأعلى على الصفحات المحددة فقط.

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

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

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

عند الانتهاء ، ما عليك سوى النقر فوق الزر "حفظ التغييرات".

يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة زر التمرير لأعلى أثناء العمل.

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

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

سنستخدم jQuery وبعض CSS وسطرًا واحدًا من كود HTML في قالب WordPress الخاص بك لإضافة تأثير التمرير السلس العلوي.

أولاً ، افتح محرر نصوص مثل 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/ في دليل سمة WordPress الخاص بك. لمزيد من التفاصيل ، يرجى الاطلاع على دليلنا حول كيفية استخدام FTP لتحميل الملفات إلى WordPress.

إذا لم يكن القالب الخاص بك يحتوي على دليل /js/ ، فيمكنك إنشاء واحد وتحميل smoothscroll.js إليه. يمكنك أيضًا الاطلاع على دليلنا حول ملفات WordPress وهيكل الدليل لمزيد من المعلومات.

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

الشيء التالي الذي عليك القيام به هو تحميل ملف smoothscroll.js في قالبك. للقيام بذلك ، سنضع البرنامج النصي في قائمة الانتظار في WordPress.

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

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

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

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

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

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

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

في هذا الكود ، نستخدم أيقونة صورة كصورة خلفية للزر ونقوم بتعيينها في موضع ثابت. لقد أضفنا أيضًا القليل من الرسوم المتحركة لـ CSS ، والتي تقوم بتدوير الزر عندما يقوم المستخدم بتمرير الماوس فوقه.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://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 أعلاه ، تأكد من استبدال https://www.example.com/wp-content/uploads/2013/07/top_icon.png بعنوان URL للصورة التي تريد استخدامها. يمكنك تحميل أيقونة الصورة الخاصة بك باستخدام برنامج تحميل وسائط WordPress ، ونسخ عنوان URL للصورة ، ثم لصقه في الكود.

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

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على YouTube لدروس فيديو WordPress. يمكنك أيضًا أن تجدنا على Twitter و Facebook.