مقاس الصورة البارزة في ووردبريس: 1200×630 + اعرف مقاس قالبك

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

أما داخل المقالة نفسها، فالمقاس الذي يهم هو الذي يعرضه قالبك. يحفظ ووردبريس كل صورة ترفعها بعدة مقاسات، ويختار القالب أيها يظهر. القوالب الكلاسيكية تحدد ذلك عبر set_post_thumbnail_size() أو add_image_size()، أما قوالب المكوّنات فتحدده في مكوّن الصورة البارزة. وإذا كان القالب يقص إلى 16:9 أو إلى شكل مربع، فقد تفقد صورة 1200 × 630 جزءًا من حافتيها اليمنى واليسرى. اعرف مقاس قالبك (بإحدى الطرق الأربع أدناه)، ثم ارفع صورة لا تقل عنه، أو بنحو ضعف عرضه لتظهر حادة على الشاشات عالية الكثافة.

لرؤية كل المقاسات التي سينشئها ووردبريس من صورة معينة، أفلتها في أداة مقاسات الصور في ووردبريس.

أي مقاس تستخدم حسب مكان ظهور الصورة

مكان ظهور الصورة	المقاس الذي ترفعه	ملاحظات
مقالاتك، ولا تعرف مقاس القالب بعد	1200 × 630، أو 2400 × 1260 لنتيجة أكثر حدة	يصلح أيضًا لمعاينات الروابط إلى أن تعرف مقاس قالبك
مقالاتك، وتعرف مقاس القالب	نحو ضعف عرض الصورة البارزة في قالبك، بنفس نسبة العرض إلى الارتفاع	ووردبريس ينشئ نسخًا أصغر من الملف المرفوع، ولا ينشئ نسخًا أكبر أبدًا
معاينات الروابط في فيسبوك	1200 × 630 على الأقل (نحو 1.91:1)، ومقاس 1200 × 628 له الشكل نفسه تقريبًا	من إرشادات المشاركة في فيسبوك
Google Discover	عرض 1200 بكسل على الأقل، بنسبة 16:9 (مثل 1200 × 675)	من إرشادات Google Discover

مقاسات الصور في ووردبريس بنظرة سريعة

كل صورة ترفعها تحصل على نسخة بمقاس مختلف لكل مقاس مسجّل. هذه هي المقاسات التي تسجلها نواة ووردبريس، مع القيم الافتراضية من Theme Handbook ومرجع دوال النواة:

اسم المقاس	الأبعاد الافتراضية	هل يمكن تغييره من الإعدادات > الوسائط؟	ملاحظات
thumbnail	150 × 150، مقصوص	نعم	فيه خانة “قص الصورة المصغرة إلى الأبعاد الدقيقة”
medium	300 × 300 كحد أقصى	نعم	تصغير متناسب
medium_large	عرض 768، بلا حد للارتفاع	لا	يُستخدم غالبًا داخل srcset
large	1024 × 1024 كحد أقصى	نعم	تصغير متناسب
1536x1536	1536 × 1536 كحد أقصى	لا	أضيف في ووردبريس 5.3 للشاشات عالية الكثافة
2048x2048	2048 × 2048 كحد أقصى	لا	أضيف في ووردبريس 5.3 للشاشات عالية الكثافة
post-thumbnail	يحدده القالب	لا	لا يوجد إلا إذا استدعى القالب set_post_thumbnail_size()
full	ملفك الأصلي المرفوع	لا	الملفات الكبيرة جدًا تُصغّر أولًا (انظر أدناه)

“كحد أقصى” تعني أن ووردبريس يُدخل الصورة داخل هذا الإطار مع الحفاظ على نسبها. صورة بأبعاد 2000 × 1000 تصبح 1024 × 512 في large، وليس 1024 × 1024.

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

وهناك قاعدة أخرى تخص الملفات الكبيرة. منذ ووردبريس 5.3، إذا زاد عرض الصورة أو ارتفاعها على 2560 بكسل، يصغّرها ووردبريس ويستخدم النسخة المصغّرة كأكبر مقاس متاح. يأتي هذا الحد من الفلتر big_image_size_threshold وقيمته الافتراضية 2560. إذا كنت ترى -scaled في أسماء الملفات وتريد معرفة هل يجب إيقاف ذلك، فاقرأ كيف تعطّل الصور scaled في ووردبريس.

من أين يأتي مقاس الصورة البارزة فعليًا

الصورة البارزة هي أي صورة تحددها في لوحة الصورة البارزة داخل محرر المقالات. وما يراه الزوار يعتمد على طريقة عرض القالب لها.

القوالب الكلاسيكية

القالب الكلاسيكي يفعّل الصور البارزة ويسجّل المقاس في ملف functions.php الخاص به:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

الدالة set_post_thumbnail_size() تسجّل مقاسًا باسم post-thumbnail. الوسيط الثالث يتحكم في القص. مع false (الافتراضي) يصغّر ووردبريس الصورة لتتسع داخل 1200 × 675. ومع true يقصها إلى 1200 × 675 بالضبط من المنتصف، فيضيع كل ما يقع خارج إطار 16:9. ويمكنك أيضًا تمرير مصفوفة مثل array( 'center', 'top' ) لاختيار الجزء الذي يبقى.

كثير من القوالب تسجّل مقاسات إضافية بأسماء لقوالب عرض مختلفة:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

ثم يختار القالب واحدًا منها بالاسم:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

عند استدعاء the_post_thumbnail() بدون اسم، تستخدم post-thumbnail. لذلك فالمقاس الحقيقي للصورة البارزة في القالب الكلاسيكي هو المقاس المذكور في ملف القالب، وقد تستخدم صفحة أرشيف المدونة مقاسًا مختلفًا عن صفحة المقالة المفردة.

قوالب المكوّنات

قوالب المكوّنات، ومنها القوالب المجانية على هذا الموقع، تعرض الصورة البارزة عبر مكوّن الصورة البارزة. ويسرد مرجع مكوّنات النواة إعداداته، ومنها sizeSlug (أي مقاس مسجّل يُحمّل) وaspectRatio وwidth وheight وscale.

وهذا يغيّر المكان الذي تبحث فيه. افتح المظهر > المحرر، وعدّل قالب المقالات المفردة، واختر مكوّن الصورة البارزة. يعرض الشريط الجانبي مقاس الصورة الذي يحمّله وهل توجد نسبة عرض إلى ارتفاع محددة. تُطبّق هذه النسبة في المتصفح عبر CSS، فيبقى الملف كما هو ويتغير الإطار الظاهر فقط. إذا طلب المكوّن إطارًا 16:9 وكانت صورتك مربعة، يُخفى جزء منها. وقد تستخدم قوالب الأرشيف والصفحة الرئيسية إعدادات مختلفة عن قالب المقالة المفردة، لذا افحص كلًّا منها.

كيف تعرف مقاس الصورة البارزة في قالبك

جرّب هذه الطرق بالترتيب. أول طريقة تعطيك إجابة تكفي.

1. راجع توثيق القالب. القوالب الجيدة تذكر مقاس الصورة البارزة الموصى به. إن كان مذكورًا فاستخدمه.

2. اعرض المقاسات المسجّلة عبر WP-CLI. إن كان لديك وصول إلى سطر الأوامر، فإن wp media image-size يطبع كل مقاس مسجّل مع عرضه وارتفاعه وإعداد القص ونسبته:

   wp media image-size

3. ابحث في ملفات القالب. في القالب الكلاسيكي، ابحث في functions.php (وأي ملفات يستدعيها) عن set_post_thumbnail_size وadd_image_size، ثم انظر في single.php أو أجزاء القالب لمعرفة الاسم المُمرّر إلى the_post_thumbnail(). وفي قالب المكوّنات، افحص مكوّن الصورة البارزة في محرر الموقع كما سبق.

4. افحص مقالة منشورة. انقر بزر الفأرة الأيمن على الصورة البارزة، واختر “فحص”، واقرأ اسم الملف في src. يضيف ووردبريس الأبعاد إلى أسماء النسخ المصغّرة، فاسم مثل my-photo-1200x675.jpg يخبرك أن القالب حمّل نسخة 1200 × 675. انظر أيضًا إلى srcset، لأن المتصفح قد يختار نسخة أصغر على الشاشات الضيقة. وإن لم توجد أبعاد في الاسم فقد استُخدم الملف الأصلي.

بعد أن تعرف المقاس المطلوب، مرّر صورة تجريبية عبر أداة مقاسات الصور لترى شكل كل مقاس مشتق قبل رفع مجموعة كاملة.

اختيار مقاس الملف الذي ترفعه

عندما تعرف مقاس القالب، تحدد أربعة اختيارات هل ستبدو النتيجة صحيحة.

• العرض. ارفع على الأقل العرض الذي يعرضه القالب. ولنتيجة حادة على شاشات الهواتف والحواسيب المحمولة عالية الكثافة، استهدف نحو ضعف هذا العرض. لمساحة بعرض 1200px يعني ذلك 2400px. ووردبريس ينشئ نسخًا أصغر من ملفك ولا ينشئ نسخًا أكبر أبدًا، لذا فالأصل الصغير هو السبب الأكثر شيوعًا لـالصورة الضبابية بعد الرفع.
• نسبة العرض إلى الارتفاع. طابق نسبة القص في القالب. إن كان يقص إلى 16:9 فأعطه 16:9، وأبقِ العنصر الأساسي قرب المنتصف حتى لا يقطع القص الصارم الرؤوس أو النصوص.
• حجم الملف. صورة بعرض 2400px محفوظة بصيغة JPEG بجودة معقولة تكون عادة بضع مئات من الكيلوبايت. رفع ملف كاميرا بعرض 6000px لا يضيف إلا عملًا: ووردبريس يصغّر كل ما يتجاوز 2560px على أي حال، والبكسلات الزائدة لا تصل إلى الزوار أبدًا.
• صيغة الملف. يقبل ووردبريس رفع صور WebP منذ الإصدار 5.8 وصور AVIF منذ الإصدار 6.5، بشرط أن تدعمهما مكتبة معالجة الصور على خادمك. وتعطي الصيغتان عادةً ملفًا أصغر من JPEG بجودة مماثلة.

صورة المشاركة على الشبكات الاجتماعية مسألة منفصلة

عندما يشارك أحدهم مقالتك على فيسبوك أو لينكدإن أو شبكات أخرى، تأتي المعاينة من وسم og:image، والذي تملؤه إضافات SEO عادة بالصورة البارزة. ويوصي توثيق المشاركة في فيسبوك بصور لا تقل عن 1200 × 630 بكسل، وبأقرب ما يمكن إلى نسبة 1.91:1.

ستجد أيضًا توصيات بمقاس 1200 × 628. هذا المقاس يطابق نسبة 1.91:1 بدقة شبه تامة، بينما تبلغ نسبة 1200 × 630 نحو 1.90:1. والفرق بينهما بكسلان فقط في الارتفاع، لذا يصلح أي منهما.

إذا كان مقاس العرض في قالبك قريبًا أيضًا من 1.91:1، فملف واحد بمقاس 1200 × 630 (أو 2400 × 1260) يكفي للأمرين. وإذا كان القالب يقص إلى 16:9 أو مربع، فأبعد المحتوى المهم عن الحافتين اليمنى واليسرى، أو حدّد صورة منفصلة للشبكات الاجتماعية في إضافة SEO لديك.

أما Google Discover فله إرشاداته الخاصة بالصور. توصي إرشادات Google Discover بصور لا يقل عرضها عن 1200 بكسل، ويتجاوز مجموع بكسلاتها 300 ألف بكسل، بنسبة 16:9 مثل 1200 × 675. وتحتاج الصور الكبيرة أيضًا إلى إعداد الروبوتات max-image-preview:large، الذي يضيفه ووردبريس افتراضيًا منذ الإصدار 5.7 ما لم يكن الموقع مضبوطًا على منع محركات البحث من أرشفته.

كيف تغيّر مقاس الصورة البارزة

يعتمد مكان التغيير على المقاس وعلى قالبك.

مقاسات النواة (thumbnail وmedium وlarge). اذهب إلى الإعدادات > الوسائط وغيّر العرض والارتفاع. يصف توثيق شاشة إعدادات الوسائط الحقول، ومنها خانة القص للصور المصغرة.

مقاسات القالب في قالب كلاسيكي. لا تعدّل القالب الأب، لأن تحديث القالب سيكتب فوق تعديلك. أضف القيم الجديدة في ملف functions.php لقالب فرعي. إعادة تسجيل مقاس بنفس الاسم تستبدله، ويجب أن يعمل إعداد القالب الفرعي بعد إعداد القالب الأب:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

الأولوية 11 تجعل هذا الكود يعمل بعد قالب أب مربوط بالأولوية الافتراضية 10. افحص كود القالب الأب وعدّل القيمة إن كان يستخدم أولوية لاحقة.

قوالب المكوّنات. غيّر مقاس الصورة ونسبة العرض إلى الارتفاع في مكوّن الصورة البارزة داخل قالب محرر الموقع. لا حاجة إلى أي كود، ويُطبّق التغيير على كل مقالة تستخدم هذا القالب.

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

إعادة إنشاء الصور المصغرة الموجودة

المقاس المعدّل لا يُطبّق إلا على الملفات الجديدة. الصور الموجودة في مكتبة الوسائط تحتفظ بنسخها القديمة حتى تعيد بناءها. يقوم الأمر wp media regenerate بذلك:

wp media regenerate --yes

خيارات مفيدة من توثيق WP-CLI:

• --image_size=hero-wide يعيد إنشاء هذا المقاس فقط. كرّر الخيار لعدة مقاسات.
• --only-missing ينشئ المقاسات غير الموجودة بعد ويترك الملفات الحالية كما هي، وهو أسرع بعد إضافة مقاس جديد.
• --skip-delete يحتفظ بملفات الصور المصغرة القديمة. استخدمه إذا كانت مواقع أخرى أو نشرات بريدية أو خلاصات تربط مباشرة بتلك الملفات.

إن لم يكن لديك سطر أوامر، فإضافة Regenerate Thumbnails من دليل إضافات WordPress.org تقوم بالأمر نفسه من لوحة التحكم. خذ نسخة احتياطية أولًا إن كانت المكتبة كبيرة، لأن إعادة الإنشاء تعيد كتابة عدد كبير من الملفات.

أخطاء شائعة

• التوقف عند 1200 × 630. إنه نقطة بداية جيدة ويناسب معاينات الروابط، لكن إذا كان قالبك يقص إلى 16:9 أو إلى شكل مربع، فسيُقطع جزء من الصورة. تحقق من مقاس قالبك قبل أن ترفع مجموعة من الصور.
• إيقاف المقاسات المولّدة “للاحتفاظ بالأصل”. إذا لم تكن لدى القالب نسخ أصغر، فقد ينتهي به الأمر إلى تحميل الملف الكامل على كل الشاشات، ما يبطئ الصفحة على الهواتف. النسخ المصغّرة موجودة لتمنع ذلك.
• تعديل كود مقاسات الصور وتجاهل إعادة الإنشاء. الكود يعمل، لكن على الملفات الجديدة فقط. ولهذا يظن كثيرون أن تغيير المقاس “لم يفعل شيئًا”.
• تغيير المقاس في القالب الأب. التحديث التالي للقالب يزيله. استخدم قالبًا فرعيًا أو محرر الموقع.

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