سألنا أحد مستخدمينا مؤخرًا عن كيفية إضافة خفوت ساري المفعول لآخر عنصر واجهة في الشريط الجانبي. يُستخدم تأثير jQuery الشائع هذا في العديد من مواقع الويب والمدونات المعروفة. أثناء قيام المستخدم بالتمرير لأسفل الصفحة ، تتلاشى القطعة الأخيرة في الشريط الجانبي وتصبح مرئية. تجعل الرسوم المتحركة الأداة جذابة وملفتة للنظر مما يزيد بشكل كبير من نسبة النقر إلى الظهور. في هذه المقالة ، سنوضح لك كيفية التلاشي في آخر عنصر واجهة مستخدم للشريط الجانبي في ووردبريس باستخدام jQuery.
يوجد أدناه عرض توضيحي لما سيبدو عليه الأمر:
تتلاشى في آخر عنصر واجهة للشريط الجانبي في ووردبريس
في هذا البرنامج التعليمي ، ستقوم بتعديل ملفات السمات الخاصة بك. يوصى بعمل نسخة احتياطية من السمة الخاصة بك قبل المتابعة.
تحتاج أولاً إلى إضافة رمز jQuery إلى سمة ووردبريس الخاصة بك كملف JavaScript منفصل. ابدأ بفتح ملف فارغ في محرر نصي مثل Notepad. بعد ذلك ، احفظ هذا الملف الفارغ wpb_fadein_widget.jsعلى سطح المكتب والصق الكود التالي بداخله.
jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/
var sidebarElement = $('div#secondary');
// Check if the sidebar exists
if ($(sidebarElement).length > 0) {
// Get the last widget in the sidebar, and its position on screen
var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
// Hide the last widget
$(lastWidget).hide();
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {
// If the widget has been displayed, we don't need to keep doing a check.
if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});أهم سطر في هذا الرمز هو var sidebarElement = $(‘div#secondary’);.
هذا هو معرف div الذي يحتوي على الشريط الجانبي الخاص بك. نظرًا لأن كل سمة قد تستخدم تقسيمات مختلفة لحاوية الشريط الجانبي ، فأنت بحاجة إلى معرفة معرف الحاوية الذي يستخدمه نسقك للشريط الجانبي.
يمكنك معرفة ذلك باستخدام أداة فحص العنصر في Google Chrome. ما عليك سوى النقر بزر الماوس الأيمن على الشريط الجانبي في Google Chrome ، ثم تحديد فحص العنصر.
العثور على معرف حاوية الشريط الجانبي في شفرة المصدر
في التعليمات البرمجية المصدر ، ستتمكن من رؤية حاوية الشريط الجانبي div. على سبيل المثال ، يستخدم نسق Twenty Twelve الافتراضي secondary، ويستخدم Twenty Thirteen teritaryكمعرف لحاوية الشريط الجانبي. تحتاج إلى استبدال secondaryمعرف div حاوية الشريط الجانبي.
بعد ذلك ، تحتاج إلى استخدام عميل FTP لتحميل هذا الملف إلى مجلد js داخل دليل سمة ووردبريس الخاص بك. إذا لم يكن دليل السمة الخاص بك يحتوي على مجلد js ، فأنت بحاجة إلى إنشائه بالنقر بزر الماوس الأيمن واختيار “إنشاء دليل جديد” في عميل FTP.
الآن وقد أصبح نص jQuery جاهزًا ، فقد حان الوقت لإضافته إلى قالبك. سنستخدم الطريقة المناسبة لإضافة جافا سكريبت في قالبك ، لذا قم ببساطة بلصق الكود التالي في ملف function.php الخاص بالقالب.
wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );هذا كل شيء ، يمكنك الآن إضافة عنصر واجهة مستخدم في الشريط الجانبي الخاص بك والذي تريد أن يظهر مع تأثير fadein ثم زيارة موقع الويب الخاص بك لرؤيته أثناء العمل.
الميزة المرغوبة غالبًا مع تفعيل التلاشي هي جعل آخر عنصر واجهة مستخدم للشريط الجانبي يتم تمريره أثناء قيام المستخدم بالتمرير. وهذا ما يسمى القطعة العائمة أو القطعة اللاصقة.
إذا نظرت إلى كود jQuery أعلاه ، ستلاحظ أننا أضفنا wpbstickywidgetفئة CSS إلى عنصر واجهة المستخدم بعد تفعيل الخبو. يمكنك استخدام فئة CSS هذه لجعل عنصر واجهة المستخدم الأخير ثابتًا بعد أن يتلاشى. كل ما عليك فعله هو لصق CSS هذا في ورقة أنماط السمة الخاصة بك.
.wpbstickywidget {
position:fixed;
top:0px;
}لا تتردد في تعديل CSS لتلبية احتياجاتك. يمكنك تغيير لون الخلفية أو الخطوط لجعل الأداة أكثر بروزًا. إذا كنت ترغب في ذلك ، يمكنك حتى إضافة تمرير سلس إلى التأثير العلوي بجوار آخر عنصر واجهة مستخدم والذي سيسمح للمستخدمين بالتمرير للخلف بسرعة.
نأمل أن تساعدك هذه المقالة في إضافة تلاشي ساري المفعول إلى آخر عنصر واجهة مستخدم في الشريط الجانبي لـ ووردبريس. لمزيد من جودة jQuery ، تحقق من أفضل دروس jQuery لـ ووردبريس.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
