شرح أحجام صور ووردبريس

يمكن أن تكون أحجام صور WordPress في بعض الأحيان غامضة بعض الشيء! هل سبق لك أن رأيت صفحة إعدادات الوسائط هذه في منطقة الإدارة وتساءلت ما هي؟

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

ما هو دور أحجام الصور في WordPress؟

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

استضافة موقع الويب الخاص بك مع Pressidium

ضمان استرداد الأموال لمدة 60 يومًا

اطلع على خططنا

يحاول WordPress تحقيق التوازن من خلال تقديم الحجم الأمثل للصورة اعتمادًا على موقع الصورة. يقوم بذلك عن طريق إنشاء 3 أحجام مختلفة للصور في كل مرة تقوم فيها بتحميل صورة إلى مكتبة وسائط WordPress. هذه هي "حجم الصورة المصغرة" و "الحجم المتوسط" و "الحجم الكبير" بأبعاد 150 × 150 بكسل و 300 × 300 بكسل (كحد أقصى) و 1024 × 1024 بكسل (كحد أقصى) على التوالي. أخيرًا ، سيخزن أيضًا صورة "بالحجم الكامل" وهو الحجم الأصلي للصورة التي تم تحميلها.

يتم استخدام هذه الأحجام جنبًا إلى جنب مع الأحجام الإضافية التي سننظر إليها لاحقًا بواسطة WordPress في مواضع مختلفة في تخطيط الواجهة الأمامية. يتم ذلك بحيث يتم استخدام كل من الصورة أ) تبدو جيدة و ب) يتم تحميلها بسرعة.

فحص أحجام صور WordPress بمزيد من التفاصيل

دعنا نعرض مثالاً حتى تتمكن من رؤية ما يحدث بالضبط "خلف الكواليس" عند تحميل صورة على WordPress. لأغراض هذا المثال ، سنقوم بتحميل صورة باسم "post1-feature-image". يبلغ حجمه 294 كيلو بايت ويبلغ قياسه 2089 × 1175 بكسل وسنفعل ذلك باستخدام سمة WordPress Twenty Twenty الافتراضية النشطة (قد تغير السمات الأخرى كيفية معالجة الصور بواسطة WordPress).

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

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

تم تغيير حجم "الحجم المتوسط" و "الحجم الكبير" بطريقة تتجنب تغيير النسب الفعلية للصورة. لذلك ، هذا هو السبب في أن "الحجم المتوسط" على سبيل المثال هو 300 × 169 بدلاً من 300 × 300. بقية الصور التي تم إنشاؤها هي نتيجة لبعض ملفات WordPress الأساسية ورمز Twenty Twenty.

الحصول على التقنية!

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

يقوم WordPress بسحب الإرشادات من ملف يسمى media.php الموجود داخل مجلد wp-include /. توجه إلى هذا ، السطر 4861 وسترى ما يلي:

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg كنتيجة للحجم "متوسط_كبير" الذي تمت إضافته في الإصدار 4.4 من WordPress لدعم استجابة أفضل للصور ويمكن رؤيته على العديد من الأجهزة المحمولة. يتم تعريفه في المجلد "wp-admin / include" في سطر ملف schema.php 522

 // 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

وطلب في ملف image.php في السطر 86:

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg و post1-feature-image-1980x1114.jpg من السمة "Twenty Twenty" داخل ملف function.php في السطر 53:

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

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

أخيرًا ، صورة 1980 بكسل هي الحجم المستخدم للصورة المميزة لقوالب المنشورات الأخرى. يمكنك رؤية ذلك عن طريق تغيير قالب منشور الاختبار إلى "قالب الغلاف". بعد ذلك ، في مفتش CSS لعنصر HTML لصورة الغلاف ، يمكننا أن نرى كيف يتم استخدام هذا الحجم:

يجدر دائمًا التأكد من أن أي صورة تقوم بتحميلها أكبر من عرض الصور المميزة وصورة الغلاف حتى تبدو حادة. يمكن لـ WordPress تقليل أحجام الصور بشكل فعال ولكن لا يمكنه تكبير حجم صورة صغيرة وجعلها تبدو جيدة.

إزالة أحجام صور WordPress غير الضرورية

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

ملاحظة: ما لم تكن تتبع هذه الإرشادات على موقع ويب تجريبي ، نوصيك بتنفيذ التغييرات الموضحة أدناه في ملف function.php لموضوع فرعي. سيتم مسح التغييرات التي تم إجراؤها على ملف functions.php في النسق الرئيسي في المرة التالية التي يتم فيها تحديث السمة.

قم بإزالة أحجام الصور الافتراضية لـ WordPress

يمكن تحقيق ذلك بسهولة عن طريق تحرير وظائف السمة .php وإضافة الكود التالي:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

للاختبار ، دعنا نحمل صورة جديدة (في مثالنا تسمى post2-Featured-image) إلى مكتبة الوسائط وقم بتحديث عرض FTP لمجلد التحميل.

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

إزالة أحجام الصور القديمة من مكتبة الوسائط

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

أول شيء يجب التأكد منه هو هل تحتاج هذه الصور؟ قبل متابعة إزالة الصور التي تم إنشاؤها بواسطة WordPress ، سيتعين عليك تأكيد أن هذه الأحجام لم تعد مستخدمة. تحقق من منشورات المدونة والصور المميزة وأي جزء آخر من موقع الويب الخاص بك للتأكد من عدم استخدام أي من الأحجام القديمة.

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

قم بتحديث عرض مجلد وسائط FTP وسترى أن صور WordPress الافتراضية قد اختفت. لطيف - جيد!

هناك طريقة أخرى سهلة لتحقيق نفس النتيجة للأحجام الافتراضية وهي تغيير قيمة أبعادها إلى "0" من داخل الإعدادات> الوسائط في wp-admin. سترى بعد ذلك شيئًا كهذا:

طريقة بديلة لتغيير update_option ('SIZE_w / h'، 0)؛ داخل الوظائف. php. تذكر أن تفعل ذلك مع ملف function.php السمة الفرعية حتى لا تفقد تغييراتك عند تحديث السمة في وقت لاحق.

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

عند إجراء هذا التحديث ، سترى أنه تم الآن تحديث الذي سيعكس قيمة الأبعاد في إعدادات الوسائط (من داخل WP Admin) إلى 0.

قم بإزالة أحجام صور النسق الإضافية

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

للقيام بذلك ، سنستخدم خطاف init والوظيفة الأساسية remove_image_size. انسخ الكود أدناه والصقه في ملف jobs.php الخاص بك. إذا كنت لا تستخدم موضوع Twenty Twenty كما هو الحال هنا ، فاستبدل اسمي "post-thumbnail" و "twentytwenty-fullscreen" باسم المظهر النشط الخاص بك.

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

إذا قمنا بتحميل صورة جديدة الآن وتحققنا من مجلد التحميل الخاص بنا عبر عميل FTP الخاص بنا ، فسنرى أنه يتم إنشاء جميع الأحجام باستثناء "ما بعد الصورة المصغرة" و "ملء الشاشة العشرين والعشرون".

أضف حجم الصورة المخصص الخاص بك

الآن بعد أن تعلمنا كيفية إزالة أحجام الصور الزائدة في WordPress ، دعنا نرى كيف يمكننا إضافة أحجام الصور المخصصة الخاصة بنا وفقًا لاحتياجات القالب الخاص بنا.

كيف نقرر ما هي أحجام الصور التي نحتاجها؟

لنفترض أن لديك موقع ويب به عمود رئيسي بعرض 960 بكسل حيث تكون الصورة المميزة في الأعلى ومحتوى المنشور أدناه. بعد ذلك ، سيكون حجم الصورة الذي تريده 960 بكسل. لا تنسَ أيضًا حساب مساحة الحشو في CSS إن وجدت. إذا كان مجموع مساحة العناصر الأصلية 20 بكسل على سبيل المثال ، فسيكون العرض الصحيح للصورة هو 920 بكسل. إنها 960 بكسل - 20 بكسل للحشوة اليسرى مطروحًا منها 20 بكسل للحشوة اليمنى.

تسجيل مقاسات الصور الجديدة

إحدى الطرق البسيطة لتسجيل الحجم (الأحجام) الجديدة هي استخدام وظيفة add_image_size () المضمنة التي يوفرها WordPress. هيكل الوظيفة هو:

 add_image_size( name, width, height, crop )

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

لنجرب هذا عمليًا ونراقب النتيجة باستخدام صورة اختبارية تبلغ 2089 × 1175 بكسل.

أولاً ، دعنا نضيف هذا الرمز:

 add_image_size( 'new-post-thumb', 220, 180 );

سيؤدي هذا إلى إنشاء post2-feature-image-220x124.jpg بدلاً من 220 × 180 في مجلد التحميلات لأن المحصول لم يتم تعيينه (خطأ). سيحدث نفس الشيء إذا أدخلت ما يلي:

 add_image_size( 'new-post-thumb', 220, 180, false );

إذا قمت بضبط الاقتصاص على هذا النحو ، فسيتم حفظ صورة post2-feature-image-220x180.jpg .

 add_image_size( 'new-post-thumb', 220, 180, true );

أخيرًا ، يمكنك إملاء الطريقة التي سيتم بها وضع المحصول. بدلاً من "صواب" ، ما عليك سوى استخدام خيارات مثل "يسار" أو "أعلى" أو كليهما:

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

تحدد المصفوفة موقع الاقتصاص. القيم التي يمكن استخدامها هي:

بالنسبة إلى x_crop_position: "يسار" أو "وسط" أو "يمين".
بالنسبة إلى y_crop_position: "أعلى" أو "وسط" أو "أسفل".

سيكون الإخراج في كل حالة جزءًا مختلفًا من الصورة الأصلية. وهنا بعض الأمثلة:

البديل للقيام بذلك يدويًا عن طريق إضافة رمز إلى موضوعنا هو استخدام مكون إضافي مثل Simple Image Sizes. لا شيء أقل من ذلك ، من المفيد فهم ما يحدث وراء الكواليس حتى لو كنت تستخدم مكونًا إضافيًا مثل هذا.

استنتاج

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