ما هو المقاس المناسب للصورة البارزة في ووردبريس؟

الرقم الذي يبحث عنه معظم الناس هو 1200 × 630 بكسل. هذه هي النسبة التي يستخدمها فيسبوك ولينكدإن وإكس لمعاينات الروابط (1.91:1)، وهي المقاس الذي ينبغي أن تكون عليه صورة Open Graph. إذا كنت تضبط الصورة البارزة أساساً لكي تظهر الروابط المشاركة بشكل صحيح، فاستخدم 1200 × 630 وتوقف عند هذا الحد.

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

لماذا يتجاوز القالب هذا الرقم

عندما ترفع صورة، لا يخزّن ووردبريس ملفاً واحداً. بل يشغّل wp_generate_attachment_metadata() وينشئ نسخة مشتقة لكل مقاس صورة مُسجّل: المقاسات الثلاثة الافتراضية (thumbnail وmedium وlarge)، ومقاس محرر الكتل medium_large (بعرض 768 بكسل)، بالإضافة إلى أي مقاس سجّله القالب أو إضافة عبر add_image_size().

القالب الذي يريد صورة رئيسية عريضة بنسبة 16:9 سيكتب شيئاً كهذا في functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

المعامل الرابع، true، يعني القصّ الصارم (hard crop). سيقصّ ووردبريس صورتك لتصبح 1200 × 675 بالضبط، متخلّصاً من كل ما لا يتناسب مع إطار 16:9. إذا كان موضوع الصورة قريباً من أعلى الإطار أو أسفله، فسيُقتطع. أما إذا ضبطته على false (أو حذفته)، فسيتم تحجيم الصورة بشكل متناسب وقد تختلف الأبعاد النهائية عمّا طلبته.

ثم يقرّر القالب أي مقاس يستدعي:

the_post_thumbnail( 'hero-featured' );

أياً كان الاسم المُمرَّر إلى the_post_thumbnail() فهو القصّة التي ستُعرض. إذاً فمقاس الصورة البارزة الحقيقي على موقعك محدَّد في مكانين لم تكتبهما أنت: استدعاء add_image_size() واستدعاء the_post_thumbnail() في القالب. ورفع ملف أكبر لن يغيّر أياً منهما.

وهناك طبقة أخرى. يقدّم ووردبريس سمة srcset، لذا قد يحمّل المتصفح على الشاشات الأصغر النسخة المشتقة medium أو large بدلاً من القصّة الكاملة. البُعد الذي تراه في أدوات المطوّر (DevTools) غالباً ليس هو البُعد الذي رفعته.

كيف تحلّها، بالترتيب

1. اعرف ما يطلبه قالبك فعلياً. قبل التخمين، شاهد كل مقاس ينشئه ووردبريس من صورتك وأيها هو الصورة الرئيسية المقصوصة. أدرِج صورتك في أداة مقاسات صور ووردبريس — فهي تعرض كل نسخة مشتقة سينشئها ووردبريس، بأبعاد بكسل دقيقة، حتى تطابق مصدرك مع الهدف الحقيقي بدلاً من الرقم الأسطوري 1200×630.

2. ارفع صورة كبيرة بما يكفي لتغطية أكبر قصّة. إذا كانت الصورة الرئيسية للقالب 1200 × 675، فارفع بهذا المقاس على الأقل، ويُفضَّل بضعف الحجم من أجل شاشات الريتينا (2400 × 1350). ووردبريس يصغّر الصور بنظافة؛ لكنه لا يكبّرها أبداً. المصدر الأصغر من اللازم هو السبب الأكثر شيوعاً لصورة بارزة ضبابية.

3. طابِق نسبة أبعاد صورتك مع قصّة القالب. إذا كان القالب يقصّ قصّاً صارماً إلى 16:9، فزوّده بصورة 16:9. اضبط التكوين بحيث يكون الموضوع في المنتصف حتى لا يقطع القصّ الصارم رأس أحد.

4. إذا كان المقاس المُسجّل خاطئاً، غيّره وأعد التوليد. عدّل قيم add_image_size() في قالب فرعي (child theme)، ثم أعد بناء الصور المصغرة الموجودة — إذ لا تُطبَّق الأبعاد الجديدة إلا على الصور المرفوعة مستقبلاً حتى تنفّذ:

wp media regenerate --yes

لا تملك WP-CLI؟ إضافة Regenerate Thumbnails تقوم بالأمر نفسه من لوحة التحكم.

ما الذي يجب تجنّبه

لا ترفع صورة 1200×630 وتفترض أن الأمر مُعالَج. إذا كان المقاس المُسجّل في القالب 16:9، فسيقصّ ووردبريس صورتك ذات النسبة 1.91:1 قصّاً صارماً وستفقد الأعلى والأسفل. رقم Open Graph ورقم العرض وظيفتان مختلفتان.

لا تعطّل مقاسات صور ووردبريس بحجة “الحفاظ على الأصل”. يجد الناس نصائح بضبط المقاسات الوسيطة على 0 أو فصل the_post_thumbnail. عندها يلجأ القالب إلى تقديم الملف كامل المقاس مُصغَّراً داخل المتصفح — أي صورة JPEG بعرض 4000 بكسل تُرسَل إلى هاتف. هذا يدمّر سرعة تحميلك ومؤشرات Core Web Vitals. النسخ المشتقة موجودة لسبب.

لا تثق بـ”المقاس المُوصى به” من إضافة على حساب المقاس المُسجّل الفعلي لقالبك. إضافات الـSEO توصي بـ1200×630 من أجل وسم OG، وهذا صحيح لذلك الوسم. لكنه لا يقول شيئاً عن المقاس الذي يقصّ إليه قالب مقالتك المفردة.

لا تتخطَّ wp media regenerate بعد تغيير المقاسات. تعديل add_image_size() لا يفعل شيئاً للصور المرفوعة سابقاً. هذه هي الخطوة التي ينساها الناس، ثم يستنتجون أن الشيفرة لم تعمل.

ما زلت عالقاً؟

إذا بقيت الصورة خاطئة بعد مطابقة الأبعاد وإعادة التوليد، فالمشكلة عادة في وضع القصّ (true مقابل false) أو في سمة srcset التي تقدّم نسخة مشتقة أصغر ممّا تتوقع. أدرِج الملف في أداة مقاسات الصور لترى بالضبط أي قصّات ينتجها إعدادك، ثم قارن ذلك بما يحمّله المتصفح في أدوات المطوّر (DevTools). طابِق بين الاثنين وينتهي التخمين.