لمعرفة أحجام الصور التي ينشئها الووردبريس بشكل تلقائي، أنشأت ووردبريس لدي على سيرفر محلي، باستخدام أحدث نسخة حالية وهي ووردبريس 5.9، ويمكنك أنت تنفيذ هذه الخطوات لديك على الموقع الخاص بك فليس منها أي ضرر كما سترى.
الصورة السابقة مكونة من صورتين مفصول بينهما بخط أحمر:
- الجزء الموجود بالأعلى استعرض فيه مكتبة الوسائط Media Library وهي المكتبة التي يتم رفع الملفات إليها من داخل الووردبريس وكما ترى فهي فارغة تمامًا من جميع ملفات الوسائط.
- الجزء الموجود بالأسفل استعرض فيه مجلد uploads الموجود داخل الفولدر wp-content، وهو المجلد المسؤول عن أي ملف يتم رفعه عبر مكتبة الوسائط، وكما ترى، هو الآخر خالي تمامًا من أي شيء.
رفع صورة إلى مكتبة الوسائط في ووردبريس
لرفع صورة إلى مكتبة الوسائط اتبع الخطوات المذكورة في الصورة السابقة، وهي:
- افتح مكتبة الوسائط، واضغط على أضف جديد.
- سيفتح لك صندوق رفع الملفات، فاضغط على تحديد الملفات، وحدد الملف أو الملفات التي تريد رفعها.
- سيتم رفع الملفات إلى المكتبة.
أحجام الصور التي أنشأها ووردبريس تلقائيًا
بمجرد رفع ملف وسائط إلى مكتبة الوسائط، (كما ترى في المثال السابق رفعت صورة)، ستجد أنه معروض لديك عنصر واحد فقط في مكتبة الوسائط. لكنك إذا نظرت إلى مجلد uploads ستجد عدد النسخ التي أنشأها الووردبريس تلقائيًا لهذه الصورة.
الصورة السابقة ، توضح أن الووردبريس أنشأ تلقائيًا فولدر رئيس بعنون 2022 يمثل العام الحالي، وبداخله أنشأ فولدر آخر بعنوان 02 يمثل الشهر الحالي، وبداخل هذا الفولدر ستجد أقصى اليسار الصورة التي رفعتها بحجمها الطبيعي، وبجانبها 4 نسخ منها ولكن بأحجام مختلفة.
- الحجم الأول هو حجم الصورة الطبيعي كما رفعتها تمامًا.
- صورة بحجم 150 بيكسل × 150 بيكسل.
- صورة بحجم 300 بيكسل × 153 بيكسل.
- صورة بحجم 768 بيكسل × 391 بيكسل.
- صورة بحجم 1024 بيكسل × 522 بيكسل.
لماذا هذا العدد من النسخ من الصورة؟
هذه خاصية متوفرة في الووردبريس؛ حيث يُنشئ مجموعة نسخ مختلفة لكل صورة ترفعها للموقع بشكل تلقائي. ويمكن أن تتسبب بعض القوالب أو بعض الإضافات بإنشاء عدد أكبر من النسخ.
حجم الصورة الأصلية (العرض × الطول) يؤثر في عدد النسخ؛ فمثلا الصورة التي رفعتها بالأعلى كان عرضها 1200 بيكسل، والأحجام التي يمكن إنشائها تلقائيًا أقل من هذا العرض هي 4 نسخ من الصورة؛ فكان عدد النسخ كما رأيت 4 نسخ فقط.
بينما في الصورة أعلاه رفعت الصورة test وحجمها كان 2570 بيكسل عرض وطول، فكان عدد النسخ 6 نسخ بزيادة الصورة التي عرضها 1536 بيكسل، والصورة التي عرضها 2048 بيكسل.
لماذا هذه الأحجام بالذات؟
أما الأحجام فيمكنك التحكم بها كما تريد من خلال إعدادات الوسائط عبر لوحة التحكم كما هو ظاهر في الصورة التالية.
لكن الافتراضي أن تكون أحجام النسخ مصنفة وفقًا لما يلي:
- الصورة التي بحجم 150 بيكسل × 150 بيكسل، هي الصورة المصغّرة (thumbnail) التي قد تظهر في أماكن متعددة في الموقع كالشريط الجانبي وغيرها من الأماكن، وهي محددة العرض والارتفاع، ويتم اقتطاع هذه الأبعاد من الصورة الأصلية.
- الصورة التي عرضها 300 بيكسل، هي الصورة ذات الحجم الوسط Medium Size، وبطبيعة الحال تكون الصور التي نرفعها عرضها كبير، وهنا يضبطها الووردبريس إلى أقصى عرض مسموح به لهذه النسخة وهو 300 بيكسل، ويتم ضبط الارتفاع تلقائيًا هو الآخر ولكن بشرط ألا يزيد عن الارتفاع المسموح به وهو 300 بيكسل.
- الصورة التي عرضها 1024 بيكسل، هي الصورة ذات الحجم الكبير Large Size، وطبيعة عملها مثل الصورة ذات الحجم الوسط مع اختلاف الحد الأقصى إلى 1024 لكلا من العرض والارتفاع.
- الصورة التي عرضها 768 بيكسل، هي الصورة ذات الحجم الوسط الكبير Medium Large لأن حجمها بين الحجم الوسط Medium وبين الحجم Large، لكن ليس لها إعداد موجود في إعدادات الوسائط؛ لأن هذا الحجم مخصص للاستفادة من الصور المتجاوبة وسنتحدث عنها بالأسفل.
- يمكن التحكم في باقي أحجام الصور أيضًا ولكن في الأحجام أعلاه هي الأشهر، وهي التي يوجد لها إعدادات مباشرة من داخل لوحة التحكم.
ما فائدة أحجام الصور المختلفة في الووردبريس؟
لتعرف إن كانت هذه الطريقة الافتراضية التي يستخدمها ووردبريس ميزة أو عيب، أود تشبيه الأمر بمثال الملابس.
لنفترض أن مقاس التيشرت الخاص بك حقيقة هو الحجم X-Large، ثم تخيل معي أنك قررت ارتداء تيشرت مقاسه صغير Small، النتيجة هي أنك لو تمكنت من ارتدائه ففي الغالب سوف يتمزق التيشرت أو ستبدو بمظهر سيء جدًا.
نفس الأمر إذا كان مقاسك الحقيقي هو Medium، وارتديت مقاس XXXL، فسيكون مظهرك سيئًا بالإضافة إلى أنك دفعت أموال أكثر لشراء تيشرت أكبر أنت في الواقع لا تحتاج له.
الووردبريس أراحك من هذه المشكلة، وذلك بتوفير إمكانية تعديل أحجام الصور بشكل تلقائي إلى الأحجام المناسبة تمامًا في موقعك، والمطلوب منك فقط أن تتعرف على أحجام الصور المناسبة لموقعك مع القالب المستخدم، ثم تعدل على إعدادات الوسائط؛ وبذلك تكون استخدمت الحجم المثالي للصور، وبالتالي:
- عرض أفضل للصور على موقعك.
- استخدام الصور ذات الحجم المناسب فقط (الصور المتجاوبة)؛ بحيث لا تكون صغيرة فتبدوا غير واضحة، ولا تكون كبيرة عن الحجم المطلوب ويزيد حجمها وتتسبب في إبطاء تحميل الصفحة أو تشغل مساحة كبيرة من السيرفر الخاص بك.
نعم كما ترى في الصورة السابقة، فهذه الخاصية مضافة للووردبريس من الإصدار 4.4 والذي يضيف مصدر الصورة باستخدام الصفتين: (أ) srcset بدلا من src، (ب) sizes.
هذا يعني أن الهدف الأساسي من هذه الطريقة في عرض الصور هو جعلها متجاوبة Responsive مع كل أنواع الأجهزة، وإعطاء متصفح المستخدم إمكانية الاستخدام الحجم المناسب وفقًا للحجم المناسب لديه من قائمة الصور التابعة لكل صورة؛ فإذا كان المستخدم يتصفح من هاتف فستظهر له الصور بحجم صغير ومناسب لحجم الشاشة، وإذا كان يستخدم كمبيوتر مكتبي فستعرض الصور بحجم أكبر، وهكذا.
قائمة تابعة للصورة باستخدام الصفة srcset
وهذا يفسر لماذا سُجل لدى في مكتبة الوسائط صورة واحدة، بينما في المجلد uploads توجد 5 نسخ من نفس الصورة؛ والسبب كما وضحنا أن الووردبريس يُنشى مجموعة صور من كل صورة مرفوعة، ويضع هذه الصور في قائمة، وعند العرض الفعلي يتبقى على المتصفح اختيار الصورة المناسبة منهم.
أيضًا يتعامل الووردبريس مع كل هذه الصورة كأنها صورة واحدة، بمعنى أنني إذا حذفت الصورة من مكتبة الوسائط فسيتم حذف الصورة والنسخ التابعة لها من مجلد uploads.