ودجت التصنيفات بشكل أفقي لمدونة ووردبرس

ودجت التصنيفات بشكل أفقي لمدونة ووردبرس

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

كيفية تحويل قائمة التصنيفات إلى تصميم أفقي مع الانكسار عند الحدود

لجعل قائمة التصنيفات تظهر بشكل أفقي، اتبع الخطوات التالية التي تتضمن إضافة بعض الأكواد المخصصة إلى موقع WordPress الخاص بك.

الكود المخصص

اذهب إلى لوحة التحكم في WordPress > المظهر > تخصيص > إضافة CSS إضافي، وأضف الكود التالي:

.widget_categories ul {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* السماح بانكسار العناصر إلى سطر جديد */
gap: 10px; /* تعديل المسافة بين التصنيفات حسب الحاجة */
list-style: none;
padding: 0;
}

.widget_categories ul li {
margin: 0;
}

.widget_categories ul li a {
text-decoration: none;
padding: 5px 10px;
display: block;
white-space: nowrap; /* منع النصوص من الانكسار داخل العنصر */
}

التوضيحات

• flex-wrap: wrap;: هذه الخاصية تسمح للعناصر بأن تنتقل إلى سطر جديد عند الوصول إلى حدود الودجت، مما يمنع تمددها خارج التصميم.
• white-space: nowrap;: تمنع النصوص داخل الروابط من الانكسار إلى سطرين داخل العنصر الواحد، مما يحافظ على الشكل الجمالي للنص.

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

خاتمة

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

إقرأ أيضاً:

إضافة المواضيع المشابهة في مقالات ووردبرس

إضافة ازرار الشير داخل المقالات في مدونة ووردبرس

فتح الروابط الخارجية في نافذة جديدة لمدونات ووردبرس

تعطيل تغذية WordPress RSS