هل أنت مصمم قوالب ووردبريس طموح تبحث عن طرق جديدة لاستخدام CSS في سماتك؟
لحسن الحظ ، يضيف ووردبريس تلقائيًا فئات CSS التي يمكنك استخدامها في السمات الخاصة بك. تتم إضافة العديد من فئات CSS هذه تلقائيًا إلى <body>قسم كل صفحة على موقع ووردبريس.
في هذه المقالة ، سنشرح فئة الجسم في ووردبريس بنصائح وحيل لمصممي السمات الطموحين للاستفادة منها في مشاريعهم.
استخدام فئة الجسم ووردبريس لتطوير الموضوع
فيما يلي نظرة عامة سريعة على ما ستتعلمه في هذه المقالة.
ما هي فئة الجسم ووردبريس؟
متى تستخدم فئة الجسم
كيفية إضافة فئات مخصصة للجسم
كيفية إضافة فئة الجسم باستخدام البرنامج المساعد
استخدام العلامات الشرطية لإضافة فئات نصية مخصصة
المزيد من الأمثلة على إضافة فئات الجسم المخصصة ديناميكيًا
الكشف عن متصفح المستخدم وإضافة فئة الجسم الخاصة بالمتصفح
فئة الجسم (body_class) هي إحدى وظائف ووردبريس التي تسمح لك بتعيين فئات CSS لعنصر الجسم.
تبدأ علامة نص HTML عادةً في ملف header.php الخاص بالقالب ، والذي يتم تحميله في كل صفحة. يتيح لك ذلك معرفة الصفحة التي يشاهدها المستخدم ديناميكيًا ثم إضافة فئات CSS وفقًا لذلك.
عادةً ما تتضمن معظم السمات والأطر المبدئية بالفعل وظيفة فئة الجسم داخل علامة نص HTML. ومع ذلك ، إذا كان قالبك لا يحتوي عليه ، فيمكنك إضافته عن طريق تعديل علامة النص كما يلي:
<body <?php body_class($class); ?>>اعتمادًا على نوع الصفحة التي يتم عرضها ، يضيف ووردبريس تلقائيًا الفئات المناسبة.
على سبيل المثال ، إذا كنت في صفحة أرشيف ، فسيقوم ووردبريس تلقائيًا بإضافة فئة أرشيف إلى عنصر النص الأساسي. يفعل ذلك لكل صفحة تقريبًا.
الموضوعات ذات الصلة: شاهد كيف يعمل ووردبريس خلف الكواليس (رسم بياني)
فيما يلي بعض الأمثلة للفئات الشائعة التي قد يضيفها ووردبريس ، اعتمادًا على الصفحة التي يتم عرضها:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}كما ترى ، من خلال وجود مثل هذا المورد القوي في متناول اليد ، يمكنك تخصيص صفحة ووردبريس الخاصة بك بالكامل باستخدام CSS فقط. يمكنك تخصيص صفحات ملف تعريف المؤلف المحددة ، والمحفوظات القائمة على التاريخ ، وما إلى ذلك.
بعد قولي هذا ، دعنا الآن نلقي نظرة على كيف ومتى ستستخدم فئة الجسم.
أولاً ، تحتاج إلى التأكد من أن عنصر جسم المظهر الخاص بك يحتوي على وظيفة فئة الجسم كما هو موضح أعلاه. إذا حدث ذلك ، فسيتم تلقائيًا تضمين جميع فئات CSS التي تم إنشاؤها في ووردبريس والمذكورة أعلاه.
بعد ذلك ، ستتمكن أيضًا من إضافة فئات CSS المخصصة الخاصة بك إلى عنصر الجسم. يمكنك إضافة هذه الفئات متى احتجت إليها.
على سبيل المثال ، إذا كنت تريد تغيير مظهر المقالات بواسطة مؤلف معين تم إيداعه ضمن فئة معينة.
يحتوي ووردبريس على مرشح يمكنك استخدامه لإضافة فئات مخصصة للجسم عند الحاجة. سنوضح لك كيفية إضافة فئة الجسم باستخدام الفلتر قبل أن نعرض لك سيناريو حالة الاستخدام المحددة حتى يمكن للجميع أن يكونوا في نفس الصفحة.
لأن الطبقات الجسم هي موضوع معين، سوف تحتاج إلى إضافة التعليمات البرمجية التالية إلى موضوع الخاص بك functions.php الملف.
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');ستضيف الشفرة أعلاه فئة “wpb-class” إلى علامة النص الأساسي في كل صفحة على موقع الويب الخاص بك. هذا ليس سيئا جدا ، أليس كذلك؟
يمكنك الآن استخدام فئة CSS هذه في ورقة أنماط المظهر الخاص بك مباشرةً. إذا كنت تعمل على موقع الويب الخاص بك ، فيمكنك أيضًا إضافة CSS باستخدام ميزة CSS المخصصة في أداة تخصيص السمات .
إضافة CSS مخصص في أداة تخصيص السمات
إذا كنت لا تعمل في مشروع عميل ولا تريد كتابة رمز ، فستكون هذه الطريقة أسهل بالنسبة لك.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Custom Body Class . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى زيارة الإعدادات » صفحة Custom Body Class . من هنا يمكنك تكوين إعدادات البرنامج المساعد.
إعدادات فئة الجسم المخصصة
يمكنك تحديد أنواع المنشورات حيث تريد تمكين ميزة فئة الجسم ومن يمكنه الوصول إليها. لا تنس النقر على زر حفظ التغييرات لتخزين إعداداتك.
بعد ذلك ، يمكنك التوجه لتحرير أي منشور أو صفحة على موقع ووردبريس الخاص بك . في شاشة تعديل النشر ، ستجد مربع تعريف جديد في العمود الأيمن بعنوان “فئات المشاركة”.
إضافة فئات الجسم إلى منشور في ووردبريس
انقر لإضافة فئات CSS المخصصة الخاصة بك. يمكنك إضافة فئات متعددة مفصولة بمسافة.
بمجرد الانتهاء ، يمكنك ببساطة حفظ أو نشر المنشور الخاص بك. سيضيف المكون الإضافي الآن فئات CSS المخصصة إلى فئة النص لهذا المنشور أو الصفحة المعينة.
تأتي القوة الحقيقية لوظيفة body_class عند استخدامها مع العلامات الشرطية.
هذه العلامات الشرطية هي أنواع بيانات صحيحة أو خاطئة تتحقق مما إذا كان الشرط صحيحًا أم خطأ في ووردبريس. على سبيل المثال ، is_homeتتحقق العلامة الشرطية مما إذا كانت الصفحة المعروضة حاليًا هي الصفحة الرئيسية أم لا.
يتيح ذلك لمطوري السمات التحقق مما إذا كان الشرط صحيحًا أم خاطئًا قبل إضافة فئة CSS مخصصة إلى وظيفة body_class.
دعنا نلقي نظرة على بعض الأمثلة على استخدام العلامات الشرطية لإضافة فئات مخصصة إلى فئة الجسم.
لنفترض أنك تريد تصميم صفحتك الرئيسية بشكل مختلف للمستخدمين الذين قاموا بتسجيل الدخول باستخدام دور المستخدم المؤلف . في حين ورد تلقائيا بإنشاء .homeو .logged-inالطبقة، فإنه لا يكشف عن دور المستخدم أو إضافته كطبقة.
الآن ، هذا هو السيناريو حيث يمكنك استخدام العلامات الشرطية مع بعض التعليمات البرمجية المخصصة لإضافة فئة مخصصة ديناميكيًا إلى فئة الجسم.
لتحقيق ذلك ، ستضيف الكود التالي إلى ملف function.php الخاص بقالبك.
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');الآن ، سنضيف CSS التالي إلى ورقة أنماط السمات الخاصة بنا للاستفادة من فئة CSS المخصصة الجديدة التي أضفناها للتو.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}هكذا بدا الأمر على موقعنا التجريبي:
تمت إضافة فئة CSS لوضع المعاينة المخصصة إلى فئة الجسم
قد ترغب في التحقق من القائمة الكاملة للعلامات الشرطية التي يمكنك استخدامها في ووردبريس. سيعطيك هذا مجموعة سهلة الاستخدام من العلامات الجاهزة للاستخدام في التعليمات البرمجية الخاصة بك.
بصرف النظر عن العلامات الشرطية ، يمكنك أيضًا استخدام تقنيات أخرى لجلب المعلومات من قاعدة بيانات ووردبريس وإنشاء فئات CSS مخصصة لفئة الجسم.
لنفترض أنك تريد تخصيص مظهر المنشورات الفردية بناءً على الفئة التي يتم تقديمها فيها. يمكنك استخدام فئة الجسم لتحقيق ذلك
أولاً ، تحتاج إلى إضافة أسماء الفئات كفئة CSS في صفحات المنشورات الفردية. للقيام بذلك ، قم بإضافة الكود التالي إلى ملف function.php الخاص بالقالب الخاص بك:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');سيضيف الكود أعلاه فئة الفئة في فئة الجسم لصفحات المنشورات الفردية. يمكنك بعد ذلك استخدام فئات CSS لتصميمها كما يحلو لك.
الصق الكود التالي في ملف jobs.php الخاص بالقالب:
//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );في بعض الأحيان قد تواجه مشكلات حيث قد يحتاج موضوعك إلى CSS إضافي لمتصفح معين.
الآن الخبر السار هو أن ووردبريس يكتشف المتصفح تلقائيًا عند التحميل ثم يخزن هذه المعلومات مؤقتًا كمتغير عالمي.
تحتاج فقط إلى التحقق مما إذا كان ووردبريس قد اكتشف متصفحًا معينًا ثم إضافته كفئة CSS مخصصة.
ببساطة ، انسخ الكود التالي والصقه في ملف jobs.php الخاص بالقالب:
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');يمكنك بعد ذلك استخدام فئات مثل:
.ms-edge .navigation {some item goes here}إذا كانت مشكلة صغيرة في الحشو أو الهامش ، فهذه طريقة سهلة إلى حد ما لإصلاحها.
هناك بالتأكيد العديد من السيناريوهات حيث يمكن أن يوفر لك استخدام وظيفة body_class من كتابة أسطر طويلة من التعليمات البرمجية. على سبيل المثال ، إذا كنت تستخدم إطار عمل سمة مثل Genesis ، فيمكنك استخدامه لإضافة فئات مخصصة في قالب طفلك.
يمكنك استخدام وظيفة body_class لإضافة فئات CSS لتخطيطات الصفحة كاملة العرض ومحتوى الشريط الجانبي والرؤوس والتذييلات وما إلى ذلك.
نأمل أن تساعدك هذه المقالة في تعلم كيفية استخدام فئة الجسم ووردبريس في السمات الخاصة بك. قد ترغب أيضًا في الاطلاع على مقالتنا حول كيفية تصميم كل منشور على ووردبريس بشكل مختلف ، ومقارنتنا لأفضل المكونات الإضافية لمنشئ صفحات ووردبريس .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
