كيفية إظهار الأشرطة الجانبية المختلفة للمنشورات والصفحات في WordPress

نشرت: 2023-02-16

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

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

لماذا قد تريد أشرطة جانبية مختلفة

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

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

دعنا نغطي الطريقة اليدوية أولاً.

صورة لأدوات لوحة مفاتيح مساطر ونبات محاذاة لإظهار الشريط الجانبي لـ Wordpress على المكتب مع كتب وتقنيات أخرى

كيفية إنشاء شريط جانبي WordPress جديد يدويًا

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

أولاً ، ابحث عن الملف حيث تم تسجيل الشريط الجانبي في نسقك. عادةً ما يكون هو ملف function.php ، ولكنه قد يختلف وفقًا لموضوعك.

افتح الملف وحدد موقع وظيفة رمز الشريط الجانبي. ستتكون بشكل عام من register_sidebar وقد تبدو الوظيفة الكاملة كما يلي:

[بي أتش بي]

الوظيفة عشرون وعشرون_السبع وعشرون_widgets_init () {

register_sidebar (

مجموعة مصفوفة(

'name' => __ ('الشريط الجانبي للمدونة'، 'twentyseventeen')،

'id' => 'sidebar-1' ،

'description' => __ ('أضف أدوات هنا لتظهر في الشريط الجانبي في منشورات المدونة وصفحات الأرشيف.'، 'twentyseventeen') ،

'before_widget' => '<section id = ”٪ 1 $ s” class = ”عنصر واجهة المستخدم٪ 2 $ s”>' ،

'after_widget' => '</section>'،

'before_title' => '<h2 class = ”widget-title”>' ،

'after_title' => '</h2>'،

)

) ؛

register_sidebar (

مجموعة مصفوفة(

'name' => __ ('Footer 1'، 'twentyseventeen')،

'id' => 'sidebar-2' ،

'description' => __ ('أضف أدوات هنا لتظهر في تذييلك.'، 'twentyseventeen')،

'before_widget' => '<section id = ”٪ 1 $ s” class = ”عنصر واجهة المستخدم٪ 2 $ s”>' ،

'after_widget' => '</section>'،

'before_title' => '<h2 class = ”widget-title”>' ،

'after_title' => '</h2>'،

)

) ؛

register_sidebar (

مجموعة مصفوفة(

'name' => __ ('Footer 2'، 'twentyseventeen')،

'id' => 'sidebar-3' ،

'description' => __ ('أضف أدوات هنا لتظهر في تذييلك.'، 'twentyseventeen')،

'before_widget' => '<section id = ”٪ 1 $ s” class = ”عنصر واجهة المستخدم٪ 2 $ s”>' ،

'after_widget' => '</section>'،

'before_title' => '<h2 class = ”widget-title”>' ،

'after_title' => '</h2>'،

)

) ؛

}

add_action ('widgets_init'، 'twentyseventeen_widgets_init') ؛

[/بي أتش بي]

الآن انسخ الوظيفة بالكامل وأنشئ ملف function.php في قالب الطفل (إذا لم يكن لديك بالفعل) والصق الكود. تأكد من تغيير اسم الوظيفة.

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

[بي أتش بي]

الدالة twentyseventeen_new_widgets_init () {

register_sidebar (

مجموعة مصفوفة(

'name' => __ ('WordPress Sidebar'، 'twentyseventeen')،

'id' => 'sidebar-4' ،

'description' => __ ('أضف أدوات هنا لتظهر في الشريط الجانبي الخاص بك في منشورات المدونة ذات الصلة بـ Wordpress.'، 'twentyseventeen') ،

'before_widget' => '<section id = ”٪ 1 $ s” class = ”عنصر واجهة المستخدم٪ 2 $ s”>' ،

'after_widget' => '</section>'،

'before_title' => '<h2 class = ”widget-title”>' ،

'after_title' => '</h2>'،

)

) ؛

register_sidebar (

مجموعة مصفوفة(

'name' => __ ('Web Design Sidebar'، 'twentyseventeen') ،

'id' => 'sidebar-5' ،

'description' => __ ('أضف أدوات هنا لتظهر في الشريط الجانبي في منشورات المدونة ذات الصلة بتصميم الويب.'، 'twentyseventeen')،

'before_widget' => '<section id = ”٪ 1 $ s” class = ”عنصر واجهة المستخدم٪ 2 $ s”>' ،

'after_widget' => '</section>'،

'before_title' => '<h2 class = ”widget-title”>' ،

'after_title' => '</h2>'،

)

) ؛

}

add_action ('widgets_init'، 'twentyseventeen_new_widgets_init') ؛

[/بي أتش بي]

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

عناصر واجهة ووردبريس للوحة القيادة ومحدد المحتوى وشريط جانبي مختلف مع تذييلات متعددة

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

على سبيل المثال ، يوجد في sidebar.php . انسخ الملف من النسق الأصلي والصقه في النسق الفرعي الخاص بك.

إذا قمت بفحص الملف ، فسيتم استدعاء sidebar-1 ، وهو معرف الشريط الجانبي الأيمن الرئيسي.

[بي أتش بي]

<aside id = "الثانوية" class = "widget-area" role = "التكميلية" aria-label = "<؟ php esc_attr_e ('Blog Sidebar'، 'twentyseventeen') ؛ ؟> ”>

<؟ php dynamic_sidebar ('sidebar-1') ؛ ؟>

</aside>

[/بي أتش بي]

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

نهج يحركها القالب

في هذا النهج ، يجب عليك إنشاء قوالب مختلفة حسب متطلباتك. في هذا المثال ، يعد single.php مسؤولاً عن المنشورات الفردية ، بحيث يمكنك نسخ الملف ولصقه في القالب الفرعي الخاص بك. أعد تسمية الملف وفقًا لذلك ، مثل wordpress-post.php ، وأضف اسمًا للقالب أيضًا.

[بي أتش بي]

/ * اسم النموذج: الشريط الجانبي لـ WordPress

* نوع منشور النموذج: post * /

[/بي أتش بي]

وبالمثل ، فقد أنشأنا نموذجًا آخر باسم webdesign-post.php .

قالب ووردبريس السابع والعشرون مع Wordpress-post و webdesign-post في الملفات المحلية

الآن ، ارجع إلى ملف sidebar.php للقالب الفرعي وأضف شرطًا بسيطًا للتحقق من القالب قيد الاستخدام. لهذا ، سنستخدم الدالة is_page_template() .

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

[بي أتش بي]

<؟ php

إذا (is_page_template ('wordpress-post.php')) {

dynamic_sidebar ('sidebar-4') ؛

} elseif (is_page_template ('webdesign-post.php')) {

dynamic_sidebar ('sidebar-5') ؛

}آخر{

dynamic_sidebar ('sidebar-1') ؛

}

؟>

[/بي أتش بي]

لنقم الآن بإنشاء منشور جديد وتعيين أحد القوالب التي أنشأناها للتو.

تحرير قالب سمات مشاركة وورد مع شريط جانبي مختلف

سترى أنني اخترت الشريط الجانبي لـ WordPress لهذه المشاركة المعينة.

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

نهج يحركها الفئة

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

[بي أتش بي]

<؟ php

إذا (in_category ('wordpress')) {

dynamic_sidebar ('sidebar-4') ؛

} elseif (in_category ('web-design')) {

dynamic_sidebar ('sidebar-5') ؛

}آخر{

dynamic_sidebar ('sidebar-1') ؛

}

؟>

[/بي أتش بي]

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

تحديث الشريط الجانبي ووردبريس على أساس الفئات تصميم الويب المحدد

في الأساس ، تحتاج فقط إلى ضبط حالة sidebar.php وفقًا لمتطلباتك الخاصة.

كيفية إنشاء أشرطة جانبية مخصصة باستخدام إضافات WordPress

إذا كنت تواجه مشكلة في إنشاء أشرطة جانبية يدويًا ، فيمكنك تجربة بعض مكونات WordPress الإضافية المفيدة التي تتيح لك إنشائها بسهولة!

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

بمجرد التثبيت ، سترى قائمة Sidebars في لوحة الإدارة.

أشرطة جانبية> إضافة جديد

إضافة خيار البرنامج المساعد ووردبريس الشريط الجانبي الجديد

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

تعيين شريط جانبي مختلف لاقتراحات الشريط الجانبي لمنشورات وصفحات ووردبريس

يمكنك جدولة الشريط الجانبي الخاص بك من علامة تبويب الجدولة ، وتغيير علامات HTML في علامة تبويب التصميم.

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

بمجرد نشر الشريط الجانبي الخاص بك ، يمكنك الوصول إليه من قسم المظهر> الأدوات .

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

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

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

داخل منشور أو صفحة ، سترى Sidebars - Quick Select panel على الجانب الأيمن والتي ستظهر لك جميع الأشرطة الجانبية الموجودة. من هناك يمكنك تحديد الشريط الجانبي الخاص بك في الموقع المستهدف المحدد مسبقًا في الإعدادات الأولية.

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

حدد سريعًا أشرطة جانبية للمدونة للمشاركات والصفحات للحصول على شريط جانبي مختلف لـ Wordpress

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

تم تحديد الشريط الجانبي الجديد لـ Wordpress بناءً على المنشورات والصفحات

إذا أنشأت شريطًا جانبيًا جديدًا ، فستحتاج فقط إلى تنشيطه في قسم المظهر> الأدوات .

تفاصيل على شريط جانبي مختلف للمشاركات والصفحات في لوحة معلومات WordPress

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

خاتمة

حذافات تتعاون مع بعضها البعض في كيفية إظهار شريط جانبي مختلف للمشاركات والصفحات في Wordpress

لقد رأيت الآن خيارين لإنشاء أشرطة جانبية: التطوير اليدوي وكذلك مع المكونات الإضافية. إذا لم تكن راضيًا عن الأكواد ، فقد يكون استخدام مكون إضافي هو الخيار الأفضل بالنسبة لك ، ولكن إذا كان لديك متطلب معين ولا تريد إضافة مكون إضافي إلى موقعك ، فعليك أن تختار الطريقة اليدوية . الشيء المهم هو فهم متطلباتك ثم اختيار أفضل خيار لك!