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

ربما تكون كبيرة جدًا وتبطئ الموقع الكتروني الخاص بك، أو ربما تكون صغيرة جدًا وتفقد تأثيرها. في DoctorMega، نعلم أهمية الصور الجميلة التي تناسب موقع الويب الخاص بك تمامًا. لذا، لا داعي للذعر – سنساعدك في حل هذه المشكلات.

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

لماذا إنشاء أحجام إضافية للصور في ووردبريس؟

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

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

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

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

هل أنت مستعد؟ فلنبدأ!

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

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

قد يوصي معظم خبراء ووردبريس بإضافة مقتطفات الكود المخصصة التالية إلى ملف functions.php الخاص بـ قالب ووردبريس الخاص بك.

add_theme_support( 'post-thumbnails' );

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

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

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

بعد التنشيط، يمكنك الانتقال إلى Code Snippet » + Add Snippet من لوحة تحكم ووردبريس الخاصة بك. ثم، انقر فوق الزر “Add Your Custom Code (New Snippet)”.

في الشاشة التالية، ستسمي مقتطف الكود المخصص لك. على سبيل المثال، يمكنك تسمية هذا المقتطف “دعم الصور المصغرة للمنشور”.

ثم يمكنك نسخ هذا الكود ولصقه في منطقة “Code Preview”:

add_theme_support( 'post-thumbnails' );

وهذا ما قد يبدو عليه الأمر في المحرر:

بعد ذلك، تأكد من تغيير نوع الكود إلى “PHP Snippet”.

بعد ذلك، يمكنك تبديل التبديل من “Inactive” إلى “Active” والنقر فوق “Save Snippet”.

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

مرة أخرى، دعنا نفتح محرر مقتطفات الكود المخصص في WPCode من خلال الانتقال إلى Code Snippet » + Add Snippet. بعد ذلك، دعنا نختار الزر “Add Your Custom Code (New Snippet)”.

بعد ذلك، يمكنك تسمية مقتطف الكود هذا “أحجام الصور الإضافية”.

بعد ذلك، في محرر الكود، ستستخدم دالة add_image_size بالتنسيق التالي:

add_image_size( 'name-of-size', width, height, crop mode );

فيما يلي بعض الأمثلة لكيفية ظهور الدالة الكاملة:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

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

وإليك المعاينة في محرر الكود:

لا تنس تغيير نوع الكود إلى “PHP”، والتبديل من “Inactive” إلى “Active”، ثم النقر على زر “Save Snippet”.

مع وضع ذلك في الاعتبار، دعنا نلقي نظرة على كيفية استخدام كل وضع على مدونة ووردبريس أو موقعك الإلكتروني.

1. وضع القطع الصعبة

في المثال أعلاه، استخدمنا قيمة “true” بعد الارتفاع. وهذا يخبر ووردبريس بقص الصورة إلى الحجم الدقيق الذي حددناه، وهو 120 بكسل × 120 بكسل في هذه الحالة.

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

2. وضع القص الناعم

كما ترى في مثال الاقتصاص الناعم الخاص بنا، لم نقم بإضافة قيمة “صحيحة” بعد الارتفاع:

add_image_size( 'homepage-thumb', 220, 180 );

يرجع ذلك إلى تشغيل وضع القص الناعم افتراضيًا.

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

فيما يلي مثال لكيفية ظهور ذلك:

3. وضع الارتفاع غير المحدود

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

يتيح لك وضع الارتفاع غير المحدود تحديد عرض لن يكسر تخطيطك دون الحد من الارتفاع.

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

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

ما عليك سوى فتح ملف القالب حيث تريد استخدام حجم صورة مختلف ثم إضافة الكود التالي داخل حلقة النشر:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

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

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

لا تنشئ الدالة add_image_size() أحجام إضافية إلا عند تحميل صورة جديدة. وهذا يعني أن أي صور تقوم بتحميلها قبل إنشاء الدالة add_image_size() لن تحتوي على الأحجام الجديدة.

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

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

عند التنشيط، يمكنك الانتقال إلى الوسائط » Perfect Images.

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

بمجرد الانتهاء، ستحتاج إلى فتح القائمة المنسدلة التي تعرض “Bulk Actions” افتراضيًا ثم تحديد “Regenerate All Entries”.

ستقوم Perfect Images الأن بإعادة إنشاء جميع الصور المصغرة الخاصة بك.

لمزيد من المعلومات حول هذا الموضوع، يرجى الاطلاع على مقالتنا حول كيفية تجديد أحجام الصور الجديدة.

تمكين أحجام صور إضافية لمحتوى منشورك

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

لجعل هذه الأحجام الجديدة متاحة في محرر محتوى ووردبريس، تحتاج إلى تسجيل الكود التالي في WPCode:

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail',
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

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

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

نصيحة إضافية: إصلاح مشكلة تحميل الصور في ووردبريس

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

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

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

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

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