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

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

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

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

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

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

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

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

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

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

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

function twentyseventeen_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Blog Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-1',

'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

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

'id'         => 'sidebar-2',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

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

'id'         => 'sidebar-3',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

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

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

function twentyseventeen_new_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Wordpress Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-4',

'description'   => __( 'Add widgets here to appear in your sidebar on wordpress related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);



register_sidebar(

array(

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

'id'         => 'sidebar-5',

'description'   => __( 'Add widgets here to appear in your sidebar on web design related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %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="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside>

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

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

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

/* Template Name: WordPress Sidebar

* Template Post Type: post*/

وبالمثل ، قمت بإنشاء نموذج آخر باسم webdesign-post.php .

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

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

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar( 'sidebar-4' );

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

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

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

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

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

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

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

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

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

خاتمة

المتدرب في تصميم Flywheel ، Rese ، والمدير الفني ، Andrea

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

هل أنت جاهز لبرنامج تعليمي آخر؟ جرب واحدة مما يلي:

• كيفية إضافة زر الرجوع إلى الأعلى اللاصق على موقع الويب الخاص بك
• كيفية إنشاء قوالب مخصصة ذات منشور واحد
• كيف تجعل موقع WordPress الخاص بك مناسبًا للجوّال
• كيفية استنساخ موقع WordPress الخاص بك