شرح تغيير شكل السكرول بار في ووردبريس

شرح تغيير شكل السكرول بار في ووردبريس

0

شرح تغيير شكل السكرول بار في ووردبريس

تغيير شكل السكرول بار

تغيير شكل السكرول بار

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

قد يهمك ايضا هذا المقال :- أفضل اضافات الووردبريس (الجزء الثاني)

تغيير شكل السكرول بار يجعل موقعك متميز عن باقي المواقع واليوم الطريقة ستكون باضافة كود برمجي صغير وسهل التعديل عليه وسنحاول تبسيط كل ماهو معقد باذن الله . وهذه صورة معاينة من موقعنا لشرح اليوم

تغيير شكل السكرول بار

كما ترون في يمين الصورة السكرول بار شكله مختلف عن الافتراضي تماما .

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

تغيير شكل السكرول بار

تغيير شكل السكرول بار – الطريقة الأولي

الطريقة الأولي هي الطريقة الأسهل وكل ماعليك هو اضافة الاكواد في تنسيقات CSS الموجودة في موقعك ، وللتوضيح اكثر اتبع هذه الخطوات

1- قم بفتح لوحة ادارة الووردبريس الخاصة بك

2- قم بفتح المظهر ثم التخصيص

3- قم بفتح تنسيقات CSS اضافية

4- قم باضافة هذه الاكواد بالداخل :-

 

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #b7b7b7 ; 
    border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
  background: #007e7e ; 
    border:1px solid #eee;
    height:100px;
    border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: #000; 
}

 

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

تغيير شكل السكرول بار

الطريقة الثانية وهي اضافة الأكواد داخل اضافة Code Snippets الرائعة

تغيير شكل السكرول بار – الطريقة الثانية

في هذه الطريقة يلزم تنصيب اضافة Code Snippets والتي انصحك بتحميلها لانها ستوفر عليك الكثير .

بعد تنصيب الاضافة ستقوم باضافة مقتطف جديد واضافة هذا الكود بداخله

 

add_action( 'wp_head', function () { ?>
<style>

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #b7b7b7 ; 
    border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
  background: #007e7e ; 
    border:1px solid #eee;
    height:100px;
    border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: #000; 
}
</style>
<?php } );

 

وتقوم بالتعديل علي الالوان والخلفيات كما تناسب موقعك ثم قم بحفظ المقتطف وستعمل الاضافة معك بدون أي مشاكل .

وللتوضيح أكثر هذه صورة لمكان وضع الاكواد في اضافة Code Snippets

تغيير شكل السكرول بار في ووردبريس

هذه أفضل طريقة لتغيير السكرول بدون اضافة أي اضافات وبالطبع الطرق اليدوية أفضل .

تغيير شكل السكرول بار – لمتصفح فايرفوكس

كل الشرح الذي تم شرحه في اعلي هذه الفقرة هي لمتصفح سافاري وكروم واوبرا وEDGE ولكن ماعدا متصفح فايرفوكس ولكن اذا كنت تريد ان تقوم بتغيير السكرول بار لفايرفوكس فبامكانك اضافة هذا الكود في المظهر ثم التخصيص

 

* {
  scrollbar-width: thin;
  scrollbar-color: #007e7e #b7b7b7;
}

 

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

لمتابعي موقع ويب تايمز فقط
سنرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا !
يمكنك إلغاء الاشتراك في أي وقت

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

اثنان × أربعة =