الـ Sidebar أو الشريط الجانبي هو العمود اللي بيظهر جنب المحتوى الأساسي في الموقع.
1. مقدمة: يعني إيه sidebar؟
الـ Sidebar أو الشريط الجانبي هو العمود اللي بيظهر جنب المحتوى الأساسي في الموقع.
زي لما تدخل على مدونة أو موقع وتلاقي عمود فيه روابط، بحث، تصنيفات، إعلانات، أو ودجات تانية.
2. ليه بنستخدم sidebar في المواقع؟
- عرض معلومات إضافية للزوار
- تسهيل التنقل داخل الموقع
- عرض الإعلانات أو روابط مهمة
- تحسين تجربة المستخدم
3. ملف sidebar.php وظيفته إيه؟
sidebar.php هو الملف المسؤول عن تصميم ومحتوى الشريط الجانبي في القالب.
دايمًا بيتحط فيه أكواد PHP لاستدعاء الودجات وكود HTML لتنظيم الشكل.
4. طريقة استدعاء الـ sidebar في القالب
عشان تضيف الشريط الجانبي في أي مكان في القالب، تستخدم الكود ده:
<?php get_sidebar(); ?>
وبيجيب ملف sidebar.php ويعرض محتواه.
5. إضافة ودجات (Widgets) في الشريط الجانبي
لو عايز تضيف ودجات، لازم تسجل مكان للودجات في ملف functions.php:
function mytheme_widgets_init() {
register_sidebar( array(
'name' => 'الشريط الجانبي الرئيسي',
'id' => 'main-sidebar',
'before_widget' => '<div class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
بعد كده في sidebar.php:
<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>
6. التحكم في محتوى الـ sidebar من لوحة التحكم
من خلال لوحة تحكم ووردبريس، تقدر تدخل على “المظهر” > “ودجات” وتضيف أو تعدل المحتوى في الشريط الجانبي بكل سهولة بدون كود.
7. تصميم الـ sidebar باستخدام CSS
ممكن تخلي الـ sidebar على جنب اليمين أو الشمال، وتتحكم في عرضه ولونه من خلال CSS. مثال:
.sidebar {
width: 300px;
float: right;
background-color: #f5f5f5;
padding: 20px;
}
8. التعامل مع sidebars متعددة
لو عندك أكثر من شريط جانبي (مثلاً واحد للصفحات، وواحد للمدونة)، تقدر تسجل أكتر من sidebar في functions.php وتستدعيهم في ملفات مختلفة.
9. نصائح لاستخدام sidebar بشكل احترافي
- خلي المحتوى بسيط ومنظم
- استخدم عناوين واضحة للودجات
- ما تزودش عدد الودجات عشان متسببش ازدحام
- خلي التصميم متوافق مع تصميم الموقع
10. مراجعة سريعة
sidebar.phpمسؤول عن تصميم الشريط الجانبي- بيتم استدعاؤه بـ
get_sidebar() - لازم تسجل Sidebar في
functions.phpعشان تضيف ودجات - التحكم في الودجات من لوحة التحكم
- التصميم بالـ CSS بيحدد شكل ومكان الـ sidebar
11. أسئلة شائعة
س: هل لازم كل قالب يكون فيه sidebar؟
ج: لأ مش لازم، في قوالب بتبقى full width بدون شريط جانبي.
س: هل ممكن أغير مكان sidebar؟
ج: طبعًا، عن طريق تعديل CSS أو ترتيب الأكواد في القالب.
س: هل ممكن أستخدم ودجات مخصصة في sidebar؟
ج: أكيد، ممكن تضيف أي ودجات سواء الافتراضية أو اللي أنت ضايفها بإضافات.
12. نهاية الدرس: “العمود اللي بيخلي موقعك أكتر تفاعل”
الشريط الجانبي مش بس جزء من التصميم، ده أداة مهمة عشان تزود تفاعل الزائر مع موقعك.
لو عرفت تتحكم في sidebar.php وتستخدم الودجات بشكل صح، هتدي موقعك قيمة أكبر وتجربة مستخدم ممتازة.
