إضافة فئة عند عرض تصنيف ووردبريس

المقدمة

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

كيفية إضافة كلاس عند عرض فئات ووردبريس

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

استخدام الفلاتر لإضافة كلاس

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

add_filter('category_class', 'add_custom_class_to_category', 10, 2);
function add_custom_class_to_category($classes, $category) {
    $classes[] = 'category-' . $category->slug; // إضافة كلاس تعبير عن السلاجة
    return $classes;
}

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

استعمال الحقول المخصصة مع ACF

إذا كنت قد أنشأت حقولًا مخصصة باستخدام مكون ACF (Advanced Custom Fields)، يمكنك استخدامها أيضًا لضبط خصائص CSS لكل فئة. يمكنك إضافة كلاس بشكل ديناميكي بناءً على القيم المخصصة الموجودة في الحقول.

هنا مثال على كيفية القيام بذلك:

add_filter('category_class', 'add_acf_class_to_category', 10, 2);
function add_acf_class_to_category($classes, $category) {
    $color = get_field('color_field', 'category_' . $category->term_id); // استرجاع قيمة الحقل
    if ($color) {
        $classes[] = 'category-color-' . $color; // إضافة كلاس اللون
    }
    return $classes;
}

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

تخصيص CSS بناءً على الكلاسات الجديدة

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

.category-news {
    color: blue; 
}
.category-sports {
    color: green; 
}
.category-culture {
    color: red; 
}

بهذه الطريقة، سيكون لديك ألوان مخصصة لكل فئة على موقع ووردبريس الخاص بك.

خاتمة

إضافة كلاس عند عرض فئات ووردبريس يمكن أن تُحدث فرقًا كبيرًا في كيفية رؤية محتواك من قبل الزوار. سواء كنت تستخدم فلاتر لإضافة الكلاسات أو تستفيد من الحقول المخصصة عبر ACF، فإن هناك العديد من الطرق لتخصيص تجربة المستخدم. يتطلب الأمر بعض الجهد في الكتابة والتعديل، لكن النتائج ستكون مرضية بكل تأكيد. من خلال اتباع الخطوات المذكورة، يمكنك الآن تحسين مظهر موقعك وزيادة جاذبيته للمستخدمين.