دليل المبتدئين لأحجام الصور في WordPress (+ أفضل الممارسات)

اكتشف أساسيات تحديد أحجام الصور في ووردبريس في هذا الدليل السهل الاستخدام للمبتدئين. تعرّف على كيفية إنشاء ووردبريس تلقائيًا لصور مصغرة ومتوسطة وكبيرة، وأهمية هذه الأحجام لمظهر موقعك وأدائه، وكيف يساعدك WP Media Folder على تنظيم موقعك.

 يشرح هذا الدليل أحجام الصور الافتراضية في ووردبريس (المصغرة، المتوسطة، الكبيرة)، وسبب وجودها، وكيفية تخصيصها لقوالب موقعك. سنتعرف أيضًا على كيفية مساعدة إضافة WP Media Folder في إدارة صورك. حتى لو لم تكن خبيرًا في التقنية، فسيكون هذا سهل الفهم. ولكنك ستتعلم بالضبط كيفية تعامل ووردبريس مع أحجام الصور وكيفية تعديلها.

نظرة عامة على أحجام الصور الافتراضية في WordPress

عند تحميل صورة إلى ووردبريس، يُنشئ تلقائيًا عدة نسخ منها لعرضها في أماكن مختلفة على موقعك. افتراضيًا، يُنشئ ووردبريس:

• الصورة المصغرة : صورة مربعة بمقاس ١٥٠ × ١٥٠ بكسل. تُستخدم عادةً في قوائم معاينات المدونات والأدوات والمعارض.
• متوسط : نسخة مُقاسة بحيث يكون أطول جانب ٣٠٠ بكسل. إذا كانت صورتك أطول من عرضها، فقد يكون ارتفاعها ٣٠٠ بكسل وعرضها أصغر، أو العكس.
• كبير : إصدار يكون فيه أطول جانب 1024 بكسل. مناسب للصور المميزة كاملة العرض أو عناوين منشورات المدونة.
• كامل : الملف الدقيق الذي قمت بتحميله، دون تعديل.

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

لماذا يقوم WordPress بإنشاء هذه الأحجام تلقائيًا

• لضمان ملاءمة الصور لمناطق التصميم بشكل مناسب (على سبيل المثال، غير مكبرة أو غير ضبابية).
• لتقليل حجم الملف وتحسين أداء تحميل الصفحة، وخاصة على الأجهزة المحمولة
• لتبسيط سير العمل لمنشئي المحتوى - لا حاجة لتغيير الحجم يدويًا.

إذا كانت الصورة التي قمت بتحميلها أصغر من الحجم الذي يولدها WordPress (على سبيل المثال، صورة بعرض 800 بكسل)، فسوف يقوم WordPress فقط بإنشاء أحجام تصل إلى الأبعاد التي تدعمها الصورة - وبالتالي فإن الحجم الكبير لن يتجاوز الحجم الأصلي.

أفضل الممارسات لاستخدام أحجام الصور الافتراضية

فيما يلي بعض حالات الاستخدام الشائعة لكل حجم افتراضي:

الصور المصغرة

استخدمه لشبكات المعرض، ومعاينات منشورات المدونة، والأدوات، وقوائم الشريط الجانبي. لا تستخدم حجم الصورة المصغرة لمساحة عرض كبيرة؛ ستظهر بشكل غير متناسق.

بالنسبة لهذا المثال، استخدمنا معرضًا تم إنشاؤه باستخدام WP Media folder.

واسطة

مثالية للصور المضمنة في منشورات المدونات أو اللافتات الصغيرة. فهي تحقق توازنًا جيدًا بين الوضوح وحجم الملف.

حجم كبير

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

لا يُنصح بتحميل ملفات أصلية كبيرة جدًا (مثلًا، صور بآلاف البكسلات أو صور عالية الدقة بتنسيق TIFF أو PNG). فهي تستهلك مساحة تخزين أكبر وقد تُبطئ موقعك أو خادم معالجة الوسائط. يُفضل تحميل صور مُعدّلة الحجم لتتناسب تقريبًا مع الحد الأقصى لعرض قالبك (مثلًا، عرض 1200 بكسل إذا كان حجم مساحة المحتوى 1200 بكسل).

كيفية تخصيص أبعاد الصورة لموضوعك

بشكل افتراضي، يستخدم WordPress الأحجام الموجودة في الإعدادات > الوسائط ، ولكن قد ترغب في تكييف هذه الأحجام أو إضافة أحجام جديدة لتناسب متطلبات السمة لديك.

تغيير الأبعاد الافتراضية عبر شاشات الإدارة

انتقل إلى لوحة تحكم ووردبريس > الإعدادات > الوسائط. هنا يمكنك تغيير أبعاد البكسل للصور المصغرة، والمتوسطة، والكبيرة. بعد إجراء التغييرات، احفظها. ستستخدم عمليات التحميل المستقبلية الإعدادات الجديدة.

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

إضافة أحجام الصور المخصصة في كود السمة الخاص بك

ملاحظة هامة: لا يجب عليك تطبيق أي كود مخصص دون إنشاء نسخة احتياطية أولاً.

لتسجيل أحجام صور جديدة تتجاوز المصغرات/المتوسطة/الكبيرة، يمكنك إضافة كود في ملف functions.php الخاص بموضوعك أو في إضافة مخصصة. مثال:

إضافة حجم الصورة ('خاصية مخصصة'، 800، 600، صحيح)؛ 

يؤدي هذا إلى تسجيل حجم جديد يسمى "custom-feature"، مع عرض 800 بكسل، وارتفاع 600 بكسل، وتمكين الاقتصاص.

يمكنك بعد ذلك استدعاءه في ملفات السمة الخاصة بك:

the_post_thumbnail('الميزة المخصصة' ); 

أو في Gutenberg، قد ترى الحجم الجديد في القائمة المنسدلة لكتلة الصورة إذا كان المظهر الخاص بك يدعم ذلك.

يمكنك إضافة أحجام مخصصة متعددة. بعد تسجيلها، يمكنك إعادة إنشاء الصور المصغرة للصور الحالية ليتمكن ووردبريس من إنشاء الإصدارات الجديدة.

أفضل الممارسات عند اختيار الأحجام المخصصة لك

• طابق الأبعاد مع تصميم قالبك. على سبيل المثال، حجم لافتة الرأس، أو حجم مشاركة المدونة، أو عرض الصورة داخل المقالة.
• تجنب تغيير حجم الصور إلى أحجام أكبر بكثير من الحاويات - فهي تضيع مساحة القرص وتبطئ التحميل.
• استخدم ميزة القص عند الرغبة في الحصول على صور ذات نسبة عرض إلى ارتفاع ثابتة، مثل ١٦:٩ أو ٤:٣. اضبط خيار القص على "صحيح" أو "خطأ" حسب تفضيلك للقص أو التدرج النسبي.
• اختبار الصور المدرجة بعد إضافة أحجام مخصصة للتأكد من عرضها بشكل صحيح على سطح المكتب والهاتف المحمول.

تجديد الصور المصغرة

إذا غيّرت الأحجام الافتراضية أو أضفت أحجامًا جديدة، فلن يتم إنشاء الأحجام الجديدة تلقائيًا للصور القديمة. استخدم إضافة مثل "إعادة إنشاء الصور المصغرة" أو ما شابه لإعادة إنشاء جميع أحجام الصور المرفوعة سابقًا. هذا يضمن أن مكتبة الوسائط لديك تحتوي على الأحجام المناسبة التي يمكن لـ WordPress تقديمها في سياقات مختلفة.

ملخص أفضل الممارسات

• حمّل صورًا بحجم قريب من الحد الأقصى لعرض قالبك (مثلًا، ١٢٠٠ بكسل). دع ووردبريس يُنشئ أحجامًا أصغر.
• حافظ على الأحجام الافتراضية عند ١٥٠ بكسل (للصور المصغرة)، و٣٠٠ بكسل (للمتوسطة)، و١٠٢٤ بكسل (للكبيرة)، إلا إذا تطلب قالبك قيمًا مختلفة. غيّر ذلك من الإعدادات > الوسائط.
• أضف أحجامًا مخصصة عبر add_image_size() في كود السمة أو المكون الإضافي الخاص بك للحصول على مناطق عرض فريدة (على سبيل المثال، لافتات البطل، والكتل المميزة).
• بعد ضبط الأحجام أو إضافة أحجام جديدة، قم بتجديد الصور المصغرة حتى يقوم WordPress بإنشاء تلك الأحجام للتحميلات القديمة.
• استخدم الاقتصاص عندما تكون هناك حاجة إلى نسبة عرض إلى ارتفاع ثابتة، أو التدرج النسبي عندما تفضل الحفاظ على النسب الأصلية.

تلميح إضافي: ضع في اعتبارك WP Media Folder إذا كنت بحاجة إلى تنظيم قائم على المجلدات، وتحسين البحث عن الوسائط/تصفيتها، وإنشاء معرض أسهل، واستبدال الوسائط، وتحسينات أخرى في سير العمل، فهو يعمل بسلاسة مع إعدادات حجم صورك.

اختتامًا: إتقان أحجام الصور في WordPress لإنشاء مواقع سريعة وجميلة

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

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