هل سبق لك أن صادفت موقعًا يصمم منشورات المدونة بشكل مختلف؟ تحتوي بعض المواقع على منشورات مثبتة مميزة بخلفية مخصصة بينما قد يكون لدى البعض الآخر نمط منشور لكل فئة بمظهر فريد. إذا أردت في أي وقت أن تتعلم كيفية تصميم كل منشورات ووردبريس بشكل مختلف ، فأنت في المكان الصحيح. في هذه المقالة ، سنوضح لك كيفية تصميم كل منشور على ووردبريس بشكل مختلف.
نمط كل وظيفة بشكل مختلف
ملاحظة: هذا البرنامج التعليمي يتطلب منك إضافة CSS مخصص في ووردبريس . ستحتاج أيضًا إلى أن تكون قادرًا على استخدام أداة الفحص . مطلوب بعض المعرفة الأساسية CSS و HTML.
يضيف ووردبريس فئات CSS الافتراضية إلى عناصر مختلفة على موقع الويب الخاص بك. يجب أن يحتوي قالب ووردبريس المتوافق القياسي على الكود المطلوب بواسطة ووردبريس لإضافة فئات CSS للجسم والمنشورات والصفحات والأدوات والقوائم والمزيد.
post_class()يتم استخدام وظيفة ووردبريس الأساسية التي يطلق عليها السمات لإخبار ووردبريس بمكان إضافة فئات CSS الافتراضية للمشاركات.
إذا قمت بزيارة موقع الويب الخاص بك واستخدمت أداة الفحص في متصفحك ، فستتمكن من رؤية تلك الفئات المضافة لكل منشور.
فئات CSS الافتراضية لمنشورات ووردبريس
فيما يلي فئات CSS المضافة افتراضيًا بناءً على الصفحة التي يشاهدها المستخدم.
.بعد معرف
.بريد
.التعلق
.لزج
.hentry (صفحات تنسيق microformat hAtom)
.معرف الفئة
.اسم التصنيف
.tag-name
.format- {format-name}
.type- {post-type-name}
.has-post-thumbnail
.post-password-required
.post- محمي بكلمة مرور
قد يبدو إخراج المثال كالتالي:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">يمكنك تصميم كل منشور في ووردبريس بشكل مختلف باستخدام فئات CSS المعنية.
على سبيل المثال ، إذا كنت ترغب في تصميم منشور فردي ، فيمكنك استخدام فئة post-id في CSS المخصص الخاص بك.
.post-412 {
background-color: #FF0303;
color:#FFFFFF;
} لا تنس تغيير معرّف المنشور ليطابق معرّفك.
تصميم منشور معين في ووردبريس
دعنا نلقي نظرة على مثال آخر.
هذه المرة سنقوم بتصميم جميع المشاركات المودعة تحت فئة معينة تسمى الأخبار.
يمكننا القيام بذلك عن طريق إضافة CSS المخصص التالي إلى موضوعنا “
.category-news {
font-size: 18px;
font-style: italic;
} سيؤثر CSS هذا على جميع المشاركات المودعة تحت فئة الأخبار.
يستخدم مطورو السمات وظيفة post_class لإخبار ووردبريس بمكان إضافة فئات النشر. عادة ما يكون في <article>العلامة.
لا تقوم وظيفة فئة ما بعد بتحميل فئات CSS الافتراضية التي تم إنشاؤها في ووردبريس فحسب ، بل تتيح لك أيضًا إضافة فئاتك الخاصة.
اعتمادًا على المظهر الخاص بك ، ستجد وظيفة post_class في ملف single.php الخاص بك أو في ملفات قالب المحتوى. عادة ، سيبدو الرمز كما يلي:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>يمكنك إضافة فئة CSS المخصصة الخاصة بك بسمة مثل هذه:
<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>ستطبع الفئة post_class فئات CSS الافتراضية المعنية جنبًا إلى جنب مع فئة CSS المخصصة الخاصة بك.
إذا كنت ترغب في إضافة عدة فئات CSS ، فيمكنك تحديدها كمصفوفة ثم استدعاءها في وظيفة post_class.
<?php
$custom_classes = array(
'longform-article',
'featured-story',
'interactive',
);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>لا تتضمن فئات CSS الافتراضية التي تم إنشاؤها بواسطة الدالة_posts اسم المؤلف كفئة CSS.
إذا كنت ترغب في تخصيص نمط كل منشور بناءً على المؤلف ، فستحتاج أولاً إلى إضافة اسم المؤلف كفئة CSS.
يمكنك القيام بذلك باستخدام المقتطف التالي:
<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>سيضيف هذا الرمز اسم المستخدم كفئة CSS. Nicename هو اسم مألوف لعناوين URL يستخدمه ووردبريس. لا تحتوي على مسافات ، وجميع الأحرف مكتوبة بأحرف صغيرة مما يجعلها مثالية للاستخدام كفئة CSS.
سيعطيك الكود أعلاه ناتجًا مثل هذا:
<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">يمكنك الآن استخدام .peter في CSS المخصص الخاص بك لتصميم جميع منشورات هذا المؤلف المعين لتبدو مختلفة.
.peter {
background-color:#EEE;
border:1px solid #CCC;
}ربما تكون قد شاهدت مواقع تحتوي على أدوات منشورات شائعة تعتمد أحيانًا على عدد التعليقات. في هذا المثال ، سنوضح لك كيفية تصميم المنشورات بشكل مختلف باستخدام عدد التعليقات.
أولاً ، نحتاج إلى حساب عدد التعليقات وربط الفصل بها.
للحصول على عدد التعليقات ، ستحتاج إلى إضافة الكود التالي في ملفات السمات الخاصة بك. ينتقل هذا الرمز داخل حلقة ووردبريس ، لذا يمكنك إضافته مباشرةً قبل علامة <article> أيضًا.
<?php
$postid = get_the_ID();
$total_comment_count = wp_count_comments($postid);
$my_comment_count = $total_comment_count->approved;
if ($my_comment_count <10) {
$my_comment_count = 'new';
} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
$my_comment_count = 'emerging';
} elseif ($my_comment_count >= 20) {
$my_comment_count = 'popular';
}
?>يتحقق هذا الرمز من عدد التعليقات للمنشور الذي يتم عرضه ويعين لهم قيمة بناءً على العدد. على سبيل المثال ، تحصل المشاركات التي تحتوي على أقل من 10 تعليقات على فئة تسمى جديدة ، ويشار إلى أقل من 20 على أنها ناشئة ، وأي شيء يزيد عن 20 تعليقًا يكون شائعًا.
بعد ذلك ، تحتاج إلى إضافة فئة CSS الخاصة بعدد التعليقات إلى وظيفة post_class.
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>سيؤدي هذا إلى إضافة فئات CSS جديدة وناشئة وشائعة إلى جميع المنشورات بناءً على عدد التعليقات التي تحتوي عليها كل مشاركة.
يمكنك إضافة CSS مخصص إلى منشورات النمط بناءً على الشعبية:
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}نحن فقط نضيف الحدود ، يمكنك إضافة أي قواعد CSS تريدها.
تقيدك فئات CSS ذات الترميز الثابت في ملف السمة الخاص بك إلى فئات CSS المحددة فقط. ماذا لو أردت تحديد فئة CSS التي تريد إضافتها إلى مقالة أثناء كتابتها؟
باستخدام الحقول المخصصة ، يمكنك إضافة فئات CSS على الفور.
تحتاج أولاً إلى إضافة حقل مخصص إلى منشور ، حتى تتمكن من اختباره. قم بتحرير منشور وانتقل لأسفل إلى قسم الحقول المخصصة.
أضف فئة المشاركة كحقل مخصص
أضف فئة ما بعد كاسم حقل مخصص وأي شيء تريد استخدامه كفئة CSS في حقل القيمة.
لا تنس النقر فوق الزر “إضافة حقل مخصص” لتخزينه ثم حفظ المنشور الخاص بك.
بعد ذلك ، قم بتحرير ملفات السمات الخاصة بك لعرض الحقل المخصص الخاص بك كفئة النشر.
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>سيخرج HTML التالي:
<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">يمكنك الآن إضافة CSS مخصص لفئة post_class التي أضفتها باستخدام الحقل المخصص.
.trending{
background-color:##ff0000;
}يمكن أن تحتوي الحقول المخصصة على قيم متعددة ، لذا يمكنك إضافة عدة فئات CSS باستخدام نفس الاسم.
هناك العديد من الطرق الأخرى لتصميم منشورات ووردبريس بشكل فردي. مع نمو مهاراتك ، ستستمر في اكتشاف طرق جديدة لتصميم المنشورات باستخدام شروط مختلفة.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تصميم كل منشور على ووردبريس بشكل مختلف. قد ترغب أيضًا في الاطلاع على قائمتنا النهائية لأكثر النصائح والحيل والاختراقات المطلوبة في ووردبريس .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
