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

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

في هذه المقالة، سنوضح لك كيفية اضافة كلاس فردي/زوجي إلى منشورك في قوالب ووردبريس.

لماذا اضافة كلاس فردي/زوجي إلى منشوراتك في قوالب ووردبريس؟

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

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

وبعد أن قلنا ذلك، دعنا نرى كيفية اضافة كلاس فردي وزوجي إلى منشوراتك في قالب ووردبريس.

اضافة كلاس فردي/زوجي إلى المنشورات في قالب ووردبريس

يقوم ووردبريس بإنشاء CSS classes افتراضية ويضيفها إلى عناصر مختلفة على الموقع الكتروني الخاص بك بشكل فوري. تساعد CSS classes هذه مطوري الاضافة والقالب على اضافة استايلات خاصة لكل عنصر.

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

تعد post_class أيضًا فلاتر، مما يعني أنه يمكنك ربط دوالك الخاصة به. وهذا ما سنفعله هنا بالضبط.

ببساطة، أضف هذا الكود إلى ملف functions.php الخاص بقالبك، أو في إضافة خاصة بالموقع، أو في إضافة مقتطفات الكود.

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

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

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

بعد التفعيل، انتقل إلى صفحة Code Snippets » + Add Snippet من لوحة تحكم ووردبريس.

ثم انقر على زر “+ Add Custom Snippet” أسفل خيار “Add Your Custom Code (New Snippet)”.

بعد ذلك، عليك اختيار نوع الكود من قائمة الخيارات التي تظهر على الشاشة.

في هذا البرنامج التعليمي، اختر “PHP Snippet” كنوع الكود.

سيتم توجيهك الأن إلى صفحة “Create Custom Snippet”.

من هنا، أضف عنوان لمقتطف الكود، والذي يمكنك اختيار أي شيء لمساعدتك على تذكر الغرض منه.

بعد ذلك، الصق الكود من الأعلى في مربع “Code Preview”.

بمجرد الانتهاء من ذلك، قم ببساطة بالتبديل من “Inactive” إلى “Active” وانقر فوق الزر “Save Snippet”.

هذه الدالة ببساطة تضيف فئتي “فردي” و”زوجي” إلى المنشور الأول، ثم “زوجي”، وهكذا.

يمكنك العثور على فئتي “فردي” و”زوجي” في الكود المصدري لموقعك. ما عليك سوى توجيه الماوس إلى عنوان المنشور، ثم النقر بزر الماوس الأيمن لاختيار فحص أو فحص العنصر.

بعد أن أضفتَ الآن فئات زوجية وفردية إلى منشوراتك، الخطوة التالية هي تنسيقها باستخدام CSS. يمكنك إضافة CSS مخصص إلى جدول أنماط (stylesheet) قالبك الفرعي، أو أداة تخصيص القالب، أو باستخدام اضافة WPCode.

إليك نموذج CSS يمكنك استخدامه كنقطة بداية:

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

هكذا بدا الأمر على موقع الاختبار الخاص بنا:

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

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