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

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

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

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

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

جاهز للذهاب؟ ثم دعونا نتصدع.

ما المقصود بالمحتوى الشريط الجانبي المدرك للمحتوى؟

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

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

• على متن الطائرة - قد يحتاج الزوار لأول مرة إلى محتوى مختلف مثلهم مثل النظامين. على سبيل المثال ، لا يحتاج المستخدمون الذين قاموا بتسجيل الدخول إلى رؤية عبارة "تسجيل الدخول" التي تحث المستخدم على اتخاذ إجراء والتي تهدف إلى حث الأشخاص على الانضمام إلى موقعك أو إلى قائمة بريدك الإلكتروني.
• معلومات مخصصة - تكون بعض المعلومات منطقية في بعض الصفحات أكثر من غيرها. تتضمن الأمثلة معلومات اتصال إضافية على صفحة الاتصال ، أو أفضل المقالات أو أحدثها على صفحة المدونة ، والعروض الخاصة على صفحة المتجر - تحصل على الجوهر.
• تحسين مُحسّنات محرّكات البحث - على الرغم من أنه ليس عاملًا رئيسيًا ، لا يزال محتوى الشريط الجانبي مهمًا لتحسين محرك البحث (خاصةً إذا تم تغليف عناوين الأدوات بشكل صحيح في علامات العنوان). لذلك ، يمكنك استخدام الأشرطة الجانبية المدركة للمحتوى لجعل صفحاتك أكثر استهدافًا.
• العبارات التي تحث المستخدم على اتخاذ إجراء - يمكنك أيضًا استخدام هذا النوع من الشريط الجانبي لتخصيص العبارات التي تحث المستخدم على اتخاذ إجراء لأماكن مختلفة على موقع الويب الخاص بك.
• اللغات - تتيح أيضًا إمكانية إنشاء أشرطة جانبية لإصدارات لغات مختلفة لموقعك واستهداف أسواق مختلفة.

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

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

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

بعد ذلك ، يتم تغيير الشريط الجانبي عادةً بإحدى الطرق الثلاث:

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

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

استخدم رؤية Jetpack Widget لتصفية الحاجيات

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

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

شروط الرؤية هي كما يلي:

• الفئة - يمكن أن تظهر الأدوات على صفحات فئة معينة أو جميعها
• المؤلف - المظهر في جميع صفحات المؤلف أو يقتصر على مستخدمين معينين
• المستخدم - للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول أم لا
• الدور - التحكم في الحاجيات بناءً على دور المستخدم
• العلامة - تعمل مثل صفحات الفئات ولكن للعلامات
• التاريخ - التحكم في تحديد تاريخ ظهور أدوات أرشيفات المحفوظات
• الصفحة - تعيين رؤية عنصر واجهة المستخدم للصفحة الأولى وصفحة المنشورات وصفحات الأرشيف وصفحة الخطأ 404 وأنواع المنشورات وأنواع المنشورات والأرشيفات والصفحات الثابتة

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

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

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

بعد التثبيت ، ستجد عنصر قائمة جديدًا يسمى Sidebars في قائمة WordPress.

عندما تختار إضافة جديد هنا ، ستصل إلى هذه الشاشة:

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

• الصفحات الثابتة - اختر الصفحات الثابتة لعرض الشريط الجانبي عليها مثل الصفحة الأولى أو نتائج البحث أو صفحات الخطأ 404
• المشاركات - نفس الخيارات المذكورة أعلاه ولكن للمشاركات
• الصفحات - اختر الصفحات الموجودة على موقعك لإظهار الشريط الجانبي
• الوسائط - تحدد صفحات الوسائط التي يظهر عليها الشريط الجانبي
• المؤلفون - قصر العرض على صفحات المؤلف
• قوالب الصفحة - اختر قوالب الصفحة لعرض الشريط الجانبي الخاص بك عليها
• الفئات - اختر فئات معينة أو جميع أرشيفات الفئات
• العلامات - نفس الخيارات لكن للعلامات
• التنسيقات - مرة أخرى ، نفس الإعدادات لأرشيفات التنسيق
• التواريخ - ومرة ​​أخرى لأرشيف التواريخ
• عناوين URL (إصدار Pro فقط) - قصر عرض الشريط الجانبي على عناوين URL معينة

إعدادات إضافية:

• الجدول الزمني - لضبط توقيت عرض الشريط الجانبي. في الإصدار المجاني ، تكون مقيدًا بأيام كاملة ، يوفر الإصدار Pro المزيد من فترات الوقت الدقيقة.
• التصميم - أضف فئات CSS مخصصة إلى الأشرطة الجانبية وعناوين عناصر واجهة المستخدم للتلاعب بها
• متقدم - اضبط ترتيب الأشرطة الجانبية (في حالة وجود أكثر من واحد)

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

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

إنشاء أشرطة جانبية مخصصة يدويًا

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

أول شيء يجب القيام به لإنشاء أشرطة جانبية مخصصة هو تسجيل منطقة عناصر واجهة مستخدم جديدة. لذلك ، ما عليك سوى إدخال الكود التالي في function.php لموضوعك (الطفل):

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'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', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

مع هذا:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

بعد ذلك ، هذه هي النتيجة النهائية على الواجهة الأمامية:

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

طرق إضافية لتنفيذ الأشرطة الجانبية المدركة للمحتوى

بصرف النظر عن الخيارات أعلاه ، لدينا أيضًا عدد قليل من المكونات الإضافية ذات الوظائف المماثلة.

منطق القطعة

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

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

أشرطة جانبية مخصصة

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

أشرطة جانبية بسيطة للصفحة

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

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

أشرطة جانبية مدركة للمحتوى في موجز

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

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

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

ما هي تجربتك مع الشريط الجانبي المدرك للمحتوى؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

الصورة المصغرة للمادة Kit8.net/ shutterstock.com