أفضل ملحقات WordPress Smooth Scroll الإضافية المجانية لعام 2022

نشرت: 2021-11-09

أفضل ملحقات WordPress Smooth Scroll الإضافية المجانية لعام 2019

إذا كنت قد أنشأت موقعًا على شبكة الإنترنت ولكن محتوى الموقع طويل جدًا ، فمن الصعب فهمه في هذا الموقف ، يمكنك الاستفادة من WordPress Smooth Scroll Plugins.

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

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

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

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

السؤال الآن هو ، كيف تضيف تمريرًا سلسًا إلى التأثير العلوي في موقع WordPress الخاص بك؟ حسنًا ، يمكنك القيام بذلك بسهولة باستخدام jQuery. هنا سنتحدث عن كيفية القيام بذلك بسهولة باستخدام jQuery. واصل القراءة:

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

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

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

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

سيرسل القراء إلى أعلى الصفحة أثناء التمرير لأعلى خلال جزء من الثانية. إنه يعمل كوظيفة وظيفية.

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

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

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

لبدء استخدامه في البداية ، تحتاج إلى فتح محرر نصوص ، مثل Notepad. أنت الآن بحاجة إلى إنشاء ملف والمضي قدمًا لحفظه باسم smoothscroll.js. أنت الآن بحاجة إلى نسخ رمز ولصقه في منطقة الملف:

jQuery (مستند). جاهز (الوظيفة ($) {
$ (نافذة) .scroll (الوظيفة () {
إذا ($ (this) .scrollTop () <200) {
$ ('# Smoothup') .fadeOut () ؛
} 
آخر {
$ ('# Smoothup') .fadeIn () ؛
}
}) ؛
   $ ('# smoothup'). on ('click' ، الوظيفة () {
$ ('html، body'). animate ({scrollTop: 0}، 'fast')؛
عودة كاذبة؛
}) ؛
}) ؛

أنت الآن بحاجة إلى حفظ الملف. بعد ذلك يمكنك تحميله إلى مجلد / js / دليل سمة WordPress. في حالة عدم احتواء السمة الخاصة بك على دليل / js / ، فعليك البدء في إنشاء واحد.

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

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

wp_enqueue_script ('السلس'، get_template_directory_uri (). '/js/smoothscroll.js'، array ('jquery')، ”، true)؛
يرسل هذا الرمز إلى WordPress الأمر النصي. في الوقت نفسه ، يطلب أيضًا من WordPress تحميل مكتبة jQuery لأن المكون الإضافي يعتمد عليها.

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

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

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

# حلوه { 
الارتفاع: 40 بكسل ؛ 
العرض: 40 بكسل ؛ 
الموقف: ثابت ؛
أسفل: 50 بكسل ؛
اليمين: 100 بكسل ؛
مسافة بادئة نصية: -9999 بكسل ؛
عرض لا شيء؛
الخلفية: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png") ؛ 
-مدة انتقال -webkit: 0.4 ثانية ؛ 
-مدة انتقال: 0.4 ثانية ؛ مدة الانتقال: 0.4 ثانية ؛ 
}
 
#smoothup: مرر {
-webkit-transform: rotate (360deg)}
الخلفية: url ('') لا تكرار ؛
}

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

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

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

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

ملحقات التمرير السلس لعام 2022 - خفيفة الوزن للغاية وسريعة

بالتأكيد ستعمل إضافات WordPress Smooth Scroll بشكل أسرع وفعال على جميع الأجهزة والمتصفحات الأخرى دون أي صعوبة.

أيضًا ، إنه يعمل بشكل رائع مع المكونات الإضافية الأخرى مثل Yoast SEO ، و Contact Form 7 ، و NextGen Gallery ، و Slider Revolution ، و WooCommerce ، ومنشئي صفحات SKT ، و Visual Composer و Elementor ، وغيرها الكثير.

مواقع الأعمال التجارية الكبيرة أو مواقع الأعمال الصغيرة مثل المدونة ، موقع المحفظة ، موقع الويب الاستشاري ، موقع الشركة ، موقع الويب المتعلق بالتجارة الإلكترونية ، الوكالة الإبداعية ، موقع العقارات ، السيرة الذاتية الشخصية ، موقع شركة البيع بالتجزئة ، إلخ. يمكن استخدام WordPress Smooth Scroll Plugins لتعزيز شكل ومظهر الموقع.

تتوفر العديد من إضافات WordPress Scroll المجانية ولكننا قمنا بتسليط الضوء على معظم ملحقات التمرير السلس التي سيحبها كل زائرك. يرجى مراجعة أدناه.

1. انتقل الصفحة إلى المعرف:

انتقل الصفحة إلى معرف

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

2. القائمة الثابتة (أو أي شيء!) في التمرير:

القائمة اللاصقة أو أي شيء في التمرير

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

3. WordPress Infinite Scroll - Ajax تحميل المزيد:

أياكس تحميل أكثر

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

4. روابط تمرير سلسة سهلة:

روابط تمرير سهلة وسلسة

يمكنك إنشاء ميزة من الأسفل إلى الأعلى بنفسك. لأن SEasy Smooth Scroll Links عبارة عن مكون إضافي قابل للتخصيص وخفيف الوزن للغاية.

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

5. تمرير عجلة الماوس السلس:

عجلة الماوس التمرير السلس

يعد المكون الإضافي MouseWheel Smooth Scroll سلسًا جدًا في التمرير لجميع روابط الارتساء. عادة ما يتم وضعها في الجانب الأيمن حيث يتم تمرير الصفحة من الأسفل إلى الأعلى.

ومن ثم فإن هذا البرنامج المساعد يدعم RTL ولا يُنشئ عناصر قائمة عديمة الفائدة في لوحة معلومات WordPress.

6. التمرير السلس بواسطة WPOS:

التمرير السلس عن طريق wpos

نظرًا لأن Smooth Scroll بواسطة المكون الإضافي WPOS خفيف الوزن بحيث يمكن للمرء تخصيص التمرير بسهولة من أعلى إلى أسفل في كل صفحة. لا تحتاج إلى كتابة حتى سطر واحد من التعليمات البرمجية.

يمكن للمرء ضبط سرعة الرسوم المتحركة والنوع والارتفاع والعرض وما إلى ذلك حسب حاجتهم. يعمل هذا المكون الإضافي بشكل أفضل مع منشئ الصفحة Elementor

7. تمرير بسيط إلى الزر العلوي:

scrool بسيط إلى الزر العلوي

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

- اختر التقديم لجميع المنشورات والصفحة
- اختر الصفحة الرئيسية فقط
- اختر صفحات معينة فقط
- اختر مشاركات معينة فقط
- تحديد سرعة التمرير

8. NS انتقل إلى الأعلى بسلاسة:

NS سلس انتقل إلى الأعلى

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

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

9. WPFront Scroll Top:

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

يمكنك بسهولة التمرير من الأسفل إلى الأعلى باستخدام WPFront Scroll Top Plugin. إنه قابل للتخصيص بالكامل مع خيارات مختلفة للاختيار من بينها. مع بعض الرسوم المتحركة ، سيتم تمريره مرة أخرى إلى الأعلى.
يمكنك إنشاء نصوص وصور وأزرار بنفسك. كما يمكنك تصفية الصفحات والمشاركات.

10. التقط التمرير اللانهائي:

قبض على التمرير اللانهائي

سيساعدك Catch Infinite Scroll على زيادة مشاركة المستخدم على موقع الويب الخاص بك. السبب الرئيسي وراء ذلك هو التمرير اللانهائي من Jetpack. بمجرد تثبيت المكونات الإضافية وتفعيلها ، سيتمكن عميلك والمستخدم من التمرير في صفحة موقع الويب.

هذه كلها هي أفضل ملحقات WordPress Smooth Scroll Plugins المجانية 2022.