افزودن اندازه تصویر دلخواه در وردپرس

هر بار که تصویری را آپلود می‌کنید، وردپرس به طور خودکار چندین نسخه از آن تصویر را در اندازه‌های مختلف ایجاد می‌کند. برخی از قالب‌ها و افزونه‌های وردپرس نیز کپی‌های خود را در اندازه‌های مختلف ایجاد می‌کنند.

در این مقاله افزودن اندازه تصویر دلخواه در وردپرس را یاد خواهیم گرفت.

چرا اندازه تصویر دلخواه در وردپرس ایجاد کنیم؟

به طور معمول، قالب‌ها و افزونه‌های محبوب وردپرس، اندازه‌های اضافی تصویر را به صورت خودکار ایجاد می‌کنند. به عنوان مثال، قالب شما ممکن است اندازه‌های مختلفی ایجاد کند تا از آن‌ها به عنوان تصاویر کوچک در صفحات آرشیو یا صفحه اصلی سفارشی خود استفاده کنید.

با این حال، گاهی اوقات ممکن است این تصاویر کاملاً نیازهای شما را برآورده نکنند. برای مثال، شاید بخواهید از اندازه‌های مختلف تصویر در چیدمان Grid استفاده کنید.

برای انجام این کار، باید اندازه‌های تصویر دلخواه را در وردپرس ایجاد و در صورت نیاز، تصویر مناسب را استفاده کنید.

افزودن اندازه تصویر جدید به قالب

اکثر قالب‌های وردپرس از تصاویر شاخص پشتیبانی می‌کنند که به عنوان thumbnail ها نیز شناخته می‌شوند.

اگر درحال ایجاد یک قالب سفارشی وردپرس هستید، باید با افزودن کد زیر به فایل functions.php، از تصاویر thumbnail پشتیبانی کنید. توصیه می‌کنیم که جهت جلوگیری از بروز هرگونه مشکل، آموزش افزودن کد به سایت وردپرسی را مطالعه فرمائید.

add_theme_support( 'post-thumbnails' );

پس از تعیین پشتیبانی از thumbnail ها، می‌توانید با استفاده از تابع ()add_image_size، اندازه‌های تصویر اضافی را ثبت کنید.

از تابع 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

در اینجا، ما سه اندازه مختلف تصویر با نام‌های دلخواه را مشخص کرده‌ایم. هر کدام حالت‌های مختلفی مانند برش سخت، برش نرم و ارتفاع نامحدود دارند.

حالت برش سخت (Hard Crop)

در مثال بالا، ما از یک مقدار true بعد از ارتفاع استفاده کرده‌ایم. این مقدار به وردپرس می‌گوید که تصویر را دقیقاً به اندازه‌ای که ما تعریف کرده‌ایم برش دهد، که در این مورد 120 پیکسل در 120 پیکسل است.

این فانکشن بسته به اندازه، به طور خودکار تصویر را از طرفین یا از بالا و پایین برش می‌دهد. به این ترتیب، می‌توانید مطمئن شوید که تمام تصاویر شما در وب‌سایت وردپرسی خود متناسب هستند و به خوبی نمایش داده می‌شوند.

حالت برش نرم (Soft Crop)

در مثال دوم از سه قطعه کد بالا، می‌بینید که از مقدار true بعد از ارتفاع استفاده نکرده‌ایم. زیرا حالت برش نرم به صورت پیش فرض فعال است.

برش نرم اندازه تصویر را بدون تغییر شکل متناسب با آن، تغییر می‌دهد. بنابراین ممکن است ابعاد دقیق مورد نظر خود را بدست نیاورید. معمولاً برش نرم با ابعاد عرض مطابقت دارد، اما ابعاد ارتفاع ممکن است بر اساس نسبت هر تصویر متفاوت باشد.

در اینجا مثالی از این که چگونه ممکن است به نظر برسد آورده شده است:

حالت ارتفاع نامحدود

گاهی اوقات ممکن است تصاویر طولانی داشته باشید که بخواهید در وب‌سایت خود از آن‌ها استفاده کنید و در عین حال عرض آن‌ها را محدود کنید. مثلا یک اینفوگرافیک برای سایت کسب و کار خود ایجاد کرده باشید. اینفوگرافیک‌ها بسیار طولانی و معمولاً گسترده‌تر از عرض محتوا هستند.

حالت ارتفاع نامحدود به شما این امکان را می‌دهد که بدون محدود کردن ارتفاع، عرضی را تعیین کنید که باعث خرابی طرح شما نشود.

نمایش اندازه تصویر دلخواه در قالب وردپرس

پس از افزودن اندازه تصویر مورد نظرتان، باید آن‌ها را در قالب وردپرس خود نمایش دهید.

فایل قسمتی از قالب را که می‌خواهید از اندازه جدید تصاویر در آن استفاده کنید، باز نموده و سپس کد زیر را اضافه کنید:

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

این تابع، تصویر شاخص شما را با اندازه جدیدی که ایجاد کرده‌اید نمایش خواهد داد. برای این کار باید نام سایز مورد نظرتان را به جای عبارت your-specified-image-size قرار دهید. (در مثال‌های بالا، نام‌های sidebar-thumb و homepage-thumb و singlepost-thumb را برای اندازه‌های جدیدمان در نظر گرفتیم.)

تابع ()add_image_size تنها زمانی که یک تصویر جدید را آپلود می‌کنید اندازه‌های تعیین شده را ایجاد می‌کند. این بدان معناست که هر تصویری که قبل از افزودن تابع ()add_image_size آپلود کرده‌اید، اندازه‌های جدید را نخواهد داشت.

برای رفع این مشکل، باید تصاویر وب‌سایت خود را با استفاده از افزونه Perfect Images بازسازی کنید. این افزونه تصاویر شاخص شما را بازسازی و متادیتای آن‌ها را بروز می‌کند.

ابتدا باید افزونه را دانلود و نصب کنید. (لینک در انتهای مطلب موجود است)

پس از فعال‌سازی، به منوی رسانه > Perfect Images بروید. این افزونه، محتویات کتابخانه رسانه شما را اسکن می‌کند؛ بنابراین ممکن است چند دقیقه طول بکشد.

پس از اتمام، منوی کشویی را باز کنید که به‌طور پیش‌فرض «Bulk Actions» را نشان می‌دهد و سپس «Regenerate All Entries» را انتخاب کنید.

اکنون این افزونه تصاویر thumbnail شما را بازسازی می‌کند.

فعال کردن اندازه تصویر دلخواه برای محتوای پست شما

با وجود اینکه تعدادی اندازه تصویر جدید اضافه کرده‌اید، در حال حاضر فقط می‌توانید از آن‌ها در قالب وردپرس استفاده کنید و نه در محتوای پست.

برای در دسترس قرار دادن این اندازه‌های جدید در ویرایشگر محتوای وردپرس، باید کد زیر را به فایل functions.php قالب خود اضافه کنید:

function vebeet_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', vebeet_custom_image_sizes' );

پس از افزودن کد، تغییرات را ذخیره کنید.

اکنون، وقتی تصویری را در وردپرس آپلود می‌کنید، همه اندازه‌های سفارشی را در قسمت «اندازه تصویر» مشاهده خواهید کرد و می‌توانید اندازه تصویر را هنگام کار بر روی هر برگه یا نوشته‌ای تغییر دهید.

امیدواریم این مقاله در نحوه افزودن اندازه تصویر دلخواه در وردپرس به شما کمک کرده باشد.

با آموزش‌های بیشتر همراه وبیت باشید.