خانه / سیستمهای مدیریت محتوا / وردپرس / چگونه اندازه های تصویر متفاوت در وردپرس بسازیم

چگونه اندازه های تصویر متفاوت در وردپرس بسازیم

وردپرس دارای یک ویژگی درونی به نام Post Thumbnails aka Featured Images هست که در آن عکس ها خود به خود مناسب اندازه تصویر کوچکتر می شوند. همچنین یک ویژگی دیگر نیز به نام add_image_size() وجود دارد که به شما اجازه می دهد اندازه تصویرها را مشخص کنید و همچنین این انتخاب را دارید که آن ها را برش دهید.استفاده از توابع هسته ای در قالب شما می تواند باعث شود دیگر نیاز به استفاده از پلاگین از جانب فرد دیگر یا شرکت دیگر نداشته باشید تا اندازه عکس ها و تصویرها را تغییر دهید. در این مقاله به شما نشان می دهیم که چگونه اندازه های مختلف را برای تصویرها در وردپرس بسازید.

ثبت اندازه های مختلف عکس در قالب شما

شما باید با اضافه کردن کد زیر برای پشتیبانی از عکس های کوچک پست ها به فایل قالب functions.php شروع کنید.

۱ 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

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

حالت برش سخت: همانطور که متوجه شده اید بعد از ارتفاع یا height عبارت “true” وجود دارد. این عبارت true به وردپرس می گوید تا عکس را در اندازه ای که ما برایش تعریف کرده ایم برش دهد (در این مورد ۱۲۰ در ۱۲۰ پیکسل). این روشی است که خود ما نیز در طراحی های قالب خود به کار برده ایم تا مطمئن شویم همه چیز متناسب است و طراحی ما شکسته نشده است. این تابع به طور خودکار عکس ها را هم در عرض و هم در طول آن ها برش می دهند که این برش بستگی به اندازه مورد نظر دارند. یک عیبی که روی این حالت می توان گذاشت این است که شما کنترلی بر روی اینکه کدام قسمت از عکس را به نمایش بگذارید ندارید. البته می توان قبل از اینکه عکس را بارگذاری کرد آن قسمتی از عکس را که می خواهیم فقط بارگذاری کنیم که عکس درست در طراحی نشان داده شود.

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

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

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

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

۱ <?php the_post_thumbnail( ‘your-specified-image-size’ ); ?>

نکته: این کد کوچک باید در لوپ پست قرار داده شود.

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

 

 

منبع

مطلب پیشنهادی

چگونه مهلت نظر دادن در وردپرس را برای بعضی پست ها تغییر دهیم

یکی از راه حل هایی که اغلب اوقات برای کاهش میزان نظرات اسپم پیشنهاد می …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *