دليل المطور أضف تمريرًا سلسًا إلى التأثير الأعلى في WordPress باستخدام JQuery

نشرت: 2022-06-03

نحن جميعًا نحب WordPress بسبب سلاسة استخدامه وحقيقة أنه يجعل الأمور أسهل عندما يتعلق الأمر باستخدام نظام إدارة محتوى فعال.

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

يمكن لأولئك الجدد على WordPress التحقق من دروس WordPress التعليمية حول موارد مثل The Blog Starter ، والتي تحتوي على دليل خطوة بخطوة حول كيفية بدء تشغيل مدونتك وإدارتها.

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

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

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

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

لماذا تستخدم Smooth Scroll؟

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

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

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

طرق لإضافة Smooth Scroll to Top Effect في WordPress

لتتمكن من إضافة تمرير سلس إلى To Effect في WordPress ، يمكنك استخدام أي من أكثر الطرق أدناه:

1. استخدام بعض التعليمات البرمجية المكتوبة في jQuery

2. استخدام البرنامج المساعد

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

كيفية إضافة Smooth Scroll to Top Effect في WordPress مع الترميز؟

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

قم بإنشاء ملف "Smoothscrolleffect.js".
قم بإرفاق وظيفة "Smoothscrolleffect.js" بالموضوع الخاص بك.
أضف الرمز في الموضوع
ربط التأثير بصفحات الويب

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

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

الخطوة 1: قم بإنشاء ملف "Smoothscrolleffect.js"

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

في هذه الخطوة ، سننشئ ملف ".js" (jQuery) يحتوي على وظيفة ستضيف تمريرًا سلسًا إلى التأثير العلوي. اتبع الخطوات لإنشاء ملف ".js" وتحميله إلى دليل موقع الويب.

قم بإنشاء ملف مفكرة جديد في نظامك.
انسخ الكود التالي:

jQuery (مستند). جاهز (الوظيفة ($) {

$ (نافذة) .scroll (الوظيفة () {

إذا ($ (this) .scrollTop () <200) {

$ ('# Smoothup') .fadeOut () ؛

} آخر {

$ ('# Smoothup') .fadeIn () ؛

}

}) ؛

$ ('# smoothup'). on ('click' ، الوظيفة () {

$ ('html، body'). animate ({scrollTop: 0}، 'fast')؛

عودة كاذبة؛

}) ؛

الصق الكود في ملف المفكرة.
احفظه بأي اسم ولكن تأكد من أن الامتداد هو ".js".
تسجيل الدخول إلى موقع الويب الخاص بك cPanel.
انتقل إلى دليل موقع الويب "/ js /"

ملاحظة: إذا لم يكن موقع الويب الخاص بك يحتوي على دليل js ، فعليك إنشاء واحد.

قم بتحميل ملف “.js” الذي قمت بإنشائه على نظامك في الدليل.

الخطوة 2: قم بإرفاق التمرير السلس بالموضوع

في الخطوة أعلاه ، أنشأنا ملفًا (بوظيفة التمرير السلس) في دليل موقع الويب ، وفي هذه الخطوة ، سنربط وظيفة التمرير السلس بموضوعنا. للقيام بذلك ، اتبع الخطوات:

انتقل إلى محرر السمات الخاص بك في لوحة تحكم WordPress Admin. افتح function.php للتحرير. ولصق الكود التالي فيه.

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

اضغط على "حفظ التغييرات".

الخطوة 3. إضافة أيقونة إلى الموضوع

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

انتقل إلى stylesheet.css لموضوعك في محرر القوالب.
انسخ الكود التالي.

# حلوه {

الارتفاع: 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 (”) لا تكرار ؛

}

الصقها في ورقة الأنماط الخاصة بموضوعك.
اضغط على "حفظ التغييرات".

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

الخطوة 4: ربط التمرير السلس بصفحات الويب.

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

افتح footer.php في محرر السمات.
انسخ الكود التالي:
1. <a href="#top ومعداتها
الصقه في صفحة footer.php.
اضغط على "حفظ التغييرات".

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

استنتاج

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

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