إضافة دعم الصور البارزة

1. يعني إيه الصور البارزة (Featured Images)؟

الصور البارزة أو الـ Featured Images هي الصور اللي بتظهر على كل مقال أو صفحة كمقدمة بصرية بتلفت نظر الزائر، زي بوستر للفيلم بالظبط.
دي الصور اللي بتظهر مثلاً فوق العنوان أو في صفحة الأرشيف أو الصفحة الرئيسية جنب ملخص المقال.

2. ليه نستخدم الصور البارزة؟

• بتدي مظهر احترافي للموقع
• بتجذب انتباه الزائر
• بتحسن تجربة المستخدم وتجعل المحتوى أجمل
• بتساعد في تحسين السيو (SEO) لما تستخدم صور محسنة

3. تفعيل دعم الصور البارزة في القالب

عشان تفعل ميزة الصور البارزة لازم تضيف الكود ده في ملف functions.php:

function abozaid_theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'abozaid_theme_setup' );

الكود ده بيفعل ميزة الصور البارزة في القالب.
ممكن كمان تحدد أحجام مختلفة للصور بالوظيفة set_post_thumbnail_size أو add_image_size لو حابب.

4. إظهار الصور البارزة في المقالات والصفحات

عشان تعرض الصورة البارزة في ملف القالب زي single.php أو page.php، بتستخدم الدالة:

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'full' ); // ممكن تغير الحجم 'thumbnail', 'medium', 'large', 'full' أو أي حجم مخصص
}

الكود ده بيتأكد إن المقال أو الصفحة ليها صورة بارزة، ولو موجودة هيعرضها.

5. مثال عملي كامل

في ملف functions.php

function abozaid_theme_setup() {
    add_theme_support( 'post-thumbnails' ); // تفعيل الصور البارزة
    
    // إضافة حجم صورة مخصص (اختياري)
    add_image_size( 'abozaid-thumb', 600, 400, true ); // 600x400 بقطعية تلقائية
}
add_action( 'after_setup_theme', 'abozaid_theme_setup' );

في ملف single.php

<?php get_header(); ?>

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
?>
        <h1><?php the_title(); ?></h1>

        <?php
        if ( has_post_thumbnail() ) {
            the_post_thumbnail( 'abozaid-thumb' ); // عرض الصورة بالحجم المخصص
        }
        ?>

        <div class="post-content">
            <?php the_content(); ?>
        </div>
<?php
    endwhile;
endif;
?>

<?php get_footer(); ?>

6. نصائح مهمة

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

7. مراجعة سريعة

• الصور البارزة هي صورة مميزة لكل مقال أو صفحة
• لازم تفعل دعم الصور البارزة بـ add_theme_support('post-thumbnails')
• تستخدم has_post_thumbnail() و the_post_thumbnail() عشان تعرض الصور
• ممكن تحدد أحجام صور مخصصة باستخدام add_image_size()
• الصور بتساعد في تحسين مظهر الموقع وتجربة المستخدم

8. أسئلة شائعة

س: هل الصور البارزة موجودة تلقائياً في كل القوالب؟
ج: لأ، لازم المطور يفعلها باستخدام add_theme_support().

س: إزاي أغير حجم الصورة؟
ج: تستخدم add_image_size() وتحدد الحجم، وبعد كده تستدعي الحجم ده في the_post_thumbnail().

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