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

موضوع : مقالات آموزشی وردپرس
تاریخ : 1398/08/22
مجموع پسند شده : 3
بازدید : 2.585 K

کراپ تصاویر در وردپرس

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

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

خب حالا چگونه می توانیم با یک راهکار مناسب مسئله اندازه های مختلف تصاویر در وردپرس را حل کنیم؟

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

این روش بسیار خسته کننده و سخت است و به جرأت می توان گفت اصلا روش مناسبی نیست اما امکان پذیر است.

چه روشی برای کراپ تصاویر مناسب است؟

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

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

تابع add_image_size در وردپرس

تابعی که امروز میخواهیم یاد بگیریم ، تابع add_image_size می باشد که ساختار کلی این تابع به شکل زیر است :

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

۱	add_image_size( string $name, int $width, int $height, bool\|array $crop = false )

$name : نام سایز ایجاد شده. ( این نام در هنگام نمایش تصویر استفاده خواهد شد)
$width : عرض تصویر
$height : ارتفاع تصویر
$crop : نوع کراپ که اگر false باشد کراپ نرم گفته می شود و در برش تصویر حساسیت زیادی اعمال نمی شود ، اگر true باشد کراپ سخت گفته می شود و تا جایی که به اندازه دلخواه ما نزدیک است تصویر را برش می دهد و آرایه که محل کراپ را می توان تعیین کرد. به عنوان مثال array(‘top’,’left’) این مقدار تصویر را از گوشه سمت چپ برش داده و ذخیره می کند.

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

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

نمونه کد ایجاد کراپ تصاویر در وردپرس

add_image_size('img350-250', 350, 250, array( 'center','center') );

۱	add_image_size('img350-250', ۳۵۰, ۲۵۰, array( 'center','center') );

این کد یک اندازه جدید با نام ‘img350-250’ ، عرض ۳۵۰px ، ارتفاع ۲۵۰px و محل کراپ که قسمت میانی تصویر را در نظر گرفته ایم.

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

جهت استفاده از کراپ تصاویر در وردپرس کد زیر را داخل فایل functions.php قالب خود قرار دهید.

<?php

if ( function_exists('add_theme_support') ) {

add_theme_support('post-thumbnails');

          add_image_size('img350-250', 350, 250, true, array( 'center','center') );

}

?>

۱۰

۱۱

<?php

if ( function_exists('add_theme_support') ) {

add_theme_support('post-thumbnails');

add_image_size('img350-250', ۳۵۰, ۲۵۰, true, array( 'center','center') );

}

در خط اول ما بررسی میکنیم که تابع add_theme_support تعریف شده است یا نه که اگر true باشد یعنی تابع قبلا تعریف شده و می توانیم از این تابع استفاده کنیم.
سپس با استفاده از add_theme_support(‘post-thumbnails’) امکان بارگذاری تصویر شاخص برای پست ها را فعال می کنیم. توجه داشته باشید که اگر این قطعه کد در فانکشن شما نباشد در قسمت ارسال یا ویرایش نوشته امکان بارگذاری تصویر شاخص برای شما غیرفعال خواهد شد.
و در آخر هم اندازه (های) دلخواه خود را ایجاد می کنیم.

جهت کسب اطلاعات بیشتر در رابطه با این تابع به آدرس زیر مراجعه نمایید :

wordpress add_image_size

تا به اینجای کار ما کراپ های جدید را ایجاد کردیم ، اما حال چگونه می توانیم از این تصاویر استفده کنیم؟

استفاده از تصاویر کراپ (Crop) شده در وردپرس – نمایش تصویر شاخص وردپرس

جهت استفاده از کراپ های ایجاد شده در نمایش تصاویر شاخص وردپرس از تابع the_post_thumbnail داخل حلقه مطلب استفاده می کنیم که ساختار پیش فرض ان به شکل زیر می باشد :

the_post_thumbnail( string|array $size = 'post-thumbnail', string|array $attr = '' )

۱	the_post_thumbnail( string\|array $size = 'post-thumbnail', string\|array $attr = '' )

$size : نام اندازه مورد نظر خود را به صورت string وارد نمایید.
جهت اعمال خاصیت های دلخواهی چون ؛ alt , class , id , … این خواص را به صورت آرایه در این قسمت قرار دهید.

جهت نمونه ما کراپی که ایجاد کرده بودیم را با کد زیر در داخل حلقه مطلب وردپرس نمایش می دهیم :

if ( has_post_thumbnail() ) {

    the_post_thumbnail( 'img350-250', array(‘alt’ => get_the_title()) );

}

if ( has_post_thumbnail() ) {

the_post_thumbnail( 'img350-250', array(‘alt’ => get_the_title()) );

}

جهت کسب اطلاعات بیشتر در مورد تابع the_post_thumbnail به لینک زیر مراجعه کنید :

wordpress the_post_thumbnail

استفاده از تصاویر کراپ (Crop) شده در وردپرس – نمایش تصویر شاخص وردپرس با ID نوشته

برای این کار می توانیم از تابع get_the_post_thumbnail استفاده کنیم. که شکل کلی تابع به شکل زیر است :

get_the_post_thumbnail( int|WP_Post $post = null, string|array $size = ‘post-thumbnail’, string|array $attr = ” )

اگر دقت کرده باشید تنها تفاوت این تابع با تابع the_post_thumbnail در مقدار ورودی است که اولین مقدار ورودی تابع get_the_post_thumbnail در واقع می تواند خود پست که به صورت یک Object در حلقه مطالب وردپرس در دسترس است و یا ID آن پست می تواند باشد.

توجه : به یاد داشته باشید که در وردپرس توابعی که با get شروع می شوند مقداری را چاپ نمی کنند و فقط مقدار بازگشتی را ارائه می کنند که شما بایستی از دستور echo جهت نمایش مقدار بازگشتی استفاده کنید اما توابعی که با the شروع می شوند مقدار بازگشتی را چاپ و نمایش می دهند و دیگر احتیاجی به نوشتن echo توسط شما نیست!

حال ما فرض می کنیم آی دی نوشته ما ۵ می باشد.

جهت نمایش تصویر شاخص کراپ شده برای نوشته با آی دی ۵ از کد زیر استفاده خواهیم کرد :

if ( has_post_thumbnail() ) {

    echo get_the_post_thumbnail(5, 'img350-250', array(‘alt’ => get_the_title()) );

}

if ( has_post_thumbnail() ) {

echo get_the_post_thumbnail(۵, 'img350-250', array(‘alt’ => get_the_title()) );

}

جهت کسب اطلاعات بیشتر در مورد تابع get_the_post_thumbnail به لینک زیر مراجعه کنید :

wordpress get_the_post_thumbnail

استفاده از تصاویر کراپ (Crop) شده در وردپرس – با ID تصویر بارگذاری شده

همان گونه که مستحضر هستید ، بیشتر کارهایی که شما در وردپرس انجام می دهید در دیتابیس و جدول خاص خودش ذخیره می شود. وردپرس در جدول post تمامی نوشته ها ، برگه ها ، مطالب پست تایپ های جدید و … را به عنوان یک post ذخیره می کند که این post ها دارای id منحصر به فردی می باشد که با استفاده از آن id می توان به اطلاعات آن پست دسترسی داشت.

حال بایستی به شما بگویم که پرونده های چند رسانه ای در وردپرس هم در جدول post به عنوان یک post با post type ، attachment ذخیره سازی می شود. پس تمامی تصاویر ، ویدیو ها ، فایل های صوتی و فرمت های دیگر که در وردپرس بارگذاری می شوند ، id منحصر به فردی دارند و این یعنی یک امکان خارق العاده جهت مدیریت هر چه بهتر فایل ها در وردپرس می باشد.

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

حال ما فرض می کنیم آی دی تصویر ما ۱۰ می باشد.

پس برای نمایش تصویر با آی دی ۱۰ در اندازه دلخواه ایجاد شده ، از کد زیر در مکان دلخواه استفاده خواهیم کرد :

echo wp_get_attachment_image(10, 'img350-250');

۱	echo wp_get_attachment_image(۱۰, 'img350-250');

جهت کسب اطلاعات بیشتر در مورد تابع wp_get_attachment_image به لینک زیر مراجعه کنید :

wordpress wp_get_attachment_image

حذف کراپ های ایجاد شده در وردپرس

خب شاید به نظرتون ی کم مسخره بیاد که خب وقتی ما کراپی رو نمی خواییم چرا ایجاد میکنیم که اصلا حذفش کنیم؟

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

خب چاره چیست؟ باید فایل های افزونه رو تغییر بدین؟ که اصلا توصیه نمیشه چون با به روز رسانی افزونه تغییرات شما هم به باد میره.

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

remove_image_size( string $name )

۱	remove_image_size( string $name )

خب استفاده از تابع زیاد سخت نیست فقط کافیه این تابع رو تو فایل functions.php بنویسید و مقدار $name رو برابر با نام کراپ مورد نظر خودتون قرار بدین.

جهت کسب اطلاعات بیشتر در مورد تابع remove_image_size به لینک زیر مراجعه کنید :

wordpress remove_image_size

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

توجه : سعی کنید تا حد امکان از کراپ های کمی استفاده کنید چون این را در نظر داشته باشید که به ازای هر تصویری که بارگذاری می کنید به تعداد کراپ های ایجاد شده فایل جدید ایجاد می شود. مثلا اگر ما ۸ کراپ داشته باشیم در واقع با کراپ های خود وردپرس ما حدودا ۱۲ فایل از یک عکس خواهیم داشت. که این موجب ازدیاد فایل های تصویری و پر شدن فضای هاست می شود.

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

با تشکر

کلمات کلیدی

هادی خانزاده

دانش آموخته مهندسی فناوری اطلاعات هستم و بیش از 11 سال سابقه در زمینه طراحی و برنامه نویسی وب دارم. عاشق وردپرس هستم و بیشتر پروژه هام رو بر اساس این سیستم مدیریت محتوای قدرتمند به اجرا در آوردم. همیشه آرزو داشتم یاد بگیرم و دانسته هام و در اختیار همه کسانی که علاقه مند به یادگیری هستند ، قرار بدم. وب استند متولد شده از این آرزوست :)