طرق سريعة لإنشاء شريط تمرير مخصص في WordPress

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

طرق بسيطة لإنشاء شريط تمرير مخصص في WordPress

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

أضف شريط تمرير مخصص في WordPress مع البرنامج المساعد

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

بادئ ذي بدء ، ستحتاج إلى تثبيت وتفعيل المكون الإضافي Advanced Scrollbar . هذا الإجراء بسيط بما فيه الكفاية:

1. قم بزيارة الملحقات ، ثم انتقل إلى إضافة صفحة جديدة داخل منطقة إدارة WordPress الخاصة بك. اكتب اسم المكون الإضافي المذكور في شريط البحث ، واضغط على Enter.
2. بمجرد تحديد موقع المكون الإضافي ، انقر فوق الزر "التثبيت الآن". سيقوم WordPress بعد ذلك بتنزيل البرنامج المساعد وتثبيته لك. بعد ذلك ، ستلاحظ أن زر "التثبيت الآن" قد تغير إلى الزر "تنشيط".
3. انقر فوق الزر "تنشيط" وستكون جاهزًا للبدء.

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

لديك أيضًا خيار تحديد خيار "المؤشر فقط" ، والذي سيعرض شريط التمرير بدون الزر. أسفل ذلك ، ستتمكن من العثور على خيارات لضبط سرعة التمرير وتغيير محاذاة السكة (يسارًا أو يمينًا) وتمكين سلوك اللمس.

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

أضف ألوان شريط التمرير المخصصة في WordPress باستخدام CSS

كما يمكنك الاستنتاج من العنوان الفرعي ، تستخدم هذه الطريقة CSS لتصميم شريط التمرير. أثبتت هذه الطريقة نفسها بشكل أسرع من تلك التي تستخدم فيها jQuery. ومع ذلك ، من المهم الإشارة إلى أنه يعمل فقط على متصفحات سطح المكتب باستخدام محركات عرض WebKit مثل Google Chrome و Safari و Opera. للأسف ، لن يكون لها أي تأثير على متصفحات الهاتف المحمول أو Firefox و Edge على أجهزة كمبيوتر سطح المكتب. مع ذلك ، إذا كان هذا هو الخيار الذي تحرص على اختياره ، فإليك طريقة القيام بذلك.

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

:: - webkit-scrollbar {

-مظهر مجموعة الويب: لا شيء ؛

}

:: - webkit-scrollbar {

العرض: 10 بكسل ؛

}

:: - webkit-scrollbar-track {

الخلفية: # ffb400 ؛

برجر: 1px صلب #ccc ؛

}

:: - webkit-scrollbar-thumb {

الخلفية: # cc00ff ؛

borger: 1px صلب #eee ؛

الارتفاع: 100 بكسل ؛

نصف قطر الحدود: 5 بكسل ؛

}

:: - webkit-scrollbar-thumb: hover {

الخلفية: أزرق ؛

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

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