نحوه ایجاد اندازه تصویر اضافی در وردپرس

آیا می خواهید اندازه های تصویر اضافی در وردپرس ایجاد کنید؟

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

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

1	`add_theme_support(` `'post-thumbnails'` `);`

هنگامی که پشتیبانی از تصاویر کوچک پست را فعال کردید، اکنون می توانید از عملکرد ثبت اندازه های اضافی تصویر با استفاده از تابع ()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

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

بیایید هر مثال و نحوه استفاده از آنها در پروژه های خود را پوشش دهیم.

1. حالت برش سخت

همانطور که ممکن است متوجه شوید، یک ارزش واقعی پس از ارتفاع اضافه می شود. این به وردپرس می‌گوید که تصویر را دقیقاً به اندازه‌ای که ما تعریف کرده‌ایم (در این مورد 120 x 120 پیکسل) برش دهد.

این روش برای اطمینان از اینکه همه چیز دقیقاً متناسب است استفاده می شود. این عملکرد بسته به اندازه، به طور خودکار تصویر را از طرفین یا از بالا و پایین برش می دهد.

2. حالت برش نرم

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

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

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

این حالت به شما این امکان را می دهد که عرضی را مشخص کنید که طراحی شما را شکسته و ارتفاع را نامحدود نگه می دارد.

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

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

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

توجه: این بیت کد باید در حلقه پست قرار گیرد .

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

بازسازی اندازه های اضافی تصویر

اگر این کار را در یک سایت کاملاً جدید انجام نمی‌دهید، احتمالاً باید تصاویر کوچک را بازسازی کنید.

تابع add_image_size() فقط اندازه ها را از نقطه ای که به تم اضافه شده است تولید می کند. این بدان معنی است که هر عکس پستی که قبل از گنجاندن این تابع اضافه شده است اندازه جدیدی نخواهد داشت.

برای رفع این مشکل، باید اندازه تصویر جدید را برای تصاویر قدیمی‌تر بازسازی کنید. این کار توسط افزونه ای به نام آسان شده است Regenerate Thumbnails . پس از نصب و فعال سازی افزونه، گزینه جدیدی در زیر منو اضافه می شود: ابزارها » بازسازی ریز عکسها

شما گزینه ای برای بازسازی تصویر کوچک برای همه تصاویر یا فقط تصاویر برجسته خواهید دید. توصیه می کنیم برای جلوگیری از هرگونه رفتار غیرمنتظره یا تصاویر شکسته، همه تصاویر را بازسازی کنید.

برای جزئیات بیشتر، به مقاله ما در مورد چگونگی آسان بازسازی اندازه های جدید تصویر در وردپرس مراجعه کنید .

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

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

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

می توانید این کار را با افزودن کد زیر به فایل توابع تم خود انجام دهید.

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' );

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

اکنون می توانید بروید و یک تصویر را در یک پست یا صفحه وردپرس آپلود کنید. در تنظیمات بلوک تصویر، اندازه های سفارشی تصویر خود را در زیر گزینه “اندازه تصویر” مشاهده خواهید کرد.

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

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