ما هو المقاس المناسب للصورة البارزة في ووردبريس؟
الرقم الذي يبحث عنه معظم الناس هو 1200 × 630 بكسل — نسبة 1.91:1 التي يستخدمها فيسبوك ولينكدإن وإكس لمعاينات الروابط. لكن هذا ليس المقاس الذي يعرضه قالبك
نُشر
الرقم الذي يبحث عنه معظم الناس هو 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). طابِق بين الاثنين وينتهي التخمين.
FAQ
أسئلة
لماذا تبدو صوري البارزة في WordPress باهتة؟
الملف المصدر يكون في الغالب أصغر من القصّة التي يطلبها القالب. ارفع الأبعاد التي يطلبها القالب على الأقل، ويفضَّل ضِعفها لشاشات الريتينا، أي 2400 × 1350 لصورة رئيسية بمقاس 1200 × 675. يقوم WordPress بالتصغير بنظافة، لكنه لا يكبّر أبداً صورة أصغر من المطلوب.
هل 1200×630 هو المقاس الصحيح للصورة البارزة في WordPress؟
لمعاينات الروابط الاجتماعية فقط. فـ 1200 × 630 هي نسبة 1.91:1 التي يستخدمها فيسبوك ولينكدإن وإكس لصور Open Graph، لكن قالبك يعرض المقاس المُسجّل الذي يطلبه قالب العرض لديه. وإن كان ذلك المقاس المُسجّل يقصّ قصّاً صارماً إلى 16:9، فإن رفع صورة بنسبة 1.91:1 يفقدها أعلاها وأسفلها.
لماذا يقصّ WordPress صورتي البارزة؟
لأن القالب سجّل ذلك المقاس مع تفعيل القصّ الصارم. فالوسيط الرابع المُمرَّر إلى add_image_size هو true، وهو يفرض الأبعاد بالضبط ويرمي كل ما يقع خارج الإطار. اضبطه على false فيقوم WordPress بالتحجيم التناسبي بدلاً من ذلك، وإن كانت الأبعاد النهائية قد تختلف حينها عمّا طلبته.
هل يلزم إعادة توليد الصور المصغرة بعد تغيير مقاسات الصور في WordPress؟
نعم. تعديل add_image_size لا ينطبق إلا على الرفعات اللاحقة، فالصور الموجودة أصلاً في مكتبة الوسائط تحتفظ بقصّاتها القديمة حتى تعيد بناءها. شغّل الأمر wp media regenerate --yes عبر WP-CLI، أو استخدم إضافة Regenerate Thumbnails من لوحة التحكم إن لم يكن WP-CLI متاحاً.
هل أعطّل مقاسات الصور في WordPress للاحتفاظ بالملف الأصلي؟
لا. فبإزالة المقاسات الوسيطة يعود القالب إلى تقديم الملف بحجمه الكامل مصغَّراً داخل المتصفح، وهذا قد يرسل صورة JPEG بعرض 4000 بكسل إلى هاتف. وذلك يهوي بزمن التحميل وبمقاييس Core Web Vitals. النسخ المشتقة موجودة تحديداً لمنع هذا.