پیش فرض اندازه تصاویر در وردپرس و نحوه افزودن اندازه های سفارشی
زمانی که شما یک تصویر را به راحتی در وردپرس بارگذاری می کنید، پشت پرده وردپرس کار های زیادی انجام می دهد تا تصویر به بازدید کنندگان شما نمایش داده شود. شما می توانید در این فرایند تصویر را از نظر اندازه سفارشی سازی کنید و به صورت دستی اندازه های مورد نظر خودتان را برای تصویر وارد کنید.
در این مطلب قرار است به صورت مفصل در خصوص تصاویر و ابعاد آن ها در وردپرس و همینطور فرایند های مختلف آن ها توضیح دهیم. سپس آموزش کوتاهی در خصوص چگونگی اعمال تغییرات بر روی ابعاد تصاویر خواهیم داشت.
اندازه های تعریف شده تصاویر در وردپرس
هر بار که تصویری را در کتابخانه رسانه وردپرس آپلود می کنید، چند گزینه در خصوص ابعاد تصاویر به صورت پیش فرض برای شما مهیا خواهند بود:
بند انگشتی
متوسط
متوسط بزرگ
بزرگ
اگر شما به ابعاد دیگری هم نیاز دارید، وردپرس امکان پیگیری آن را برای شما مهیا کرده است. وردپرس ابعاد اصلی تصویری که شما آپلود کردید را هم حفظ می کند و آن تصویر را با ابعاد اورجینال و اسم کامل ذخیره می کند.
شما می توانید همه این موارد را (به استثنای Medium_Large) در بلوک تصویر Gutenberg ببینید. اندازه یک تصویر هنگام قراردادن تصویر در یک صفحه یا پست کاهش پیدا خواهد کرد.
چرا وردپرس تصاویر زیادی ایجاد می کند؟
تصاویر دقیقا مثل شلوار هستند. شما باید مطمعن باشید که اندازه درست و دقیق را انتخاب می کنید. تصاویر خیلی کوچک، خیلی هم احمقانه هستند و کاملا مشخص است که به درد هیچی نمی خورند. تصاویر بسیار کوچک در سایت به صورت کشیده در خواهند آمد.
از طرفی اگر تصاویر بیش از حد بزرگ هم باشند، فوق العاده بی فایده است. شما هیچ وقت شلواری را که اندازه یک مرد بالغ است برای یک کودک نمی خرید!
اگر تصاویر شما نسبت به صفحه تان خیلی بزرگ باشند در بارگذاری و سرعت سایت تان هم تاثیر زیادی می گذارند. اصلا به این فکر نکنید که تصویر هر چه بزرگ تر باشد، نظر کاربر نسبت به شما بهتر می شود! هیچ چیز به اندازه تصاویر استاندارد و مناسب نظر کاربر را جذب نمی کند.
مقاله پیشنهادی مفید و کاربردی: افزایش سرعت لود سایت های وردپرسی [مصاحبه]
در حالت ایده آل تصاویر شما که با اندازه کامل آپلود شده اند برای نمایش با همان ابعاد و کیفیت می بایست به اندازه کافی در ابعاد بزرگ جایگذاری شوند اما از انتخاب حالت های خیلی بزرگ می بایست جلوگیری کنید.
از آن جایی که مقیاس بندی تصاویر برای ایجاد ابعاد درست در نرم افزار هایی نظیر فتوشاپ ارزشمند هستند، وردپرس نیز این کار را به خوبی انجام می دهد تا هیچ مشکلی در استفاده از تصاویر برای شما به وجود نیاید.
تمام کاری که شما می بایست انجام دهید، این است که هنگام قرار دادن یک تصویر در سایت خود، اندازه مناسب را انتخاب کنید تا از تمام مزایا استفاده از آن تصویر به خوبی بهره مند شوید.
اگر ابعاد سفارشی وردپرس برای قالب سایت شما کاملا اندازه نباشند می توانید مقادیر پیش فرض در بخش رسانه ها > تنظیمات را مطابق نیاز خود تنظیم کنید یا اندازه های سفارشی دیگر را به آن اضافه نمایید تا در نهایت گزینه های بیشتری برای انتخاب در دسترس داشته باشید.
ابعاد تصاویر پیش فرض به شرح زیر هستند:
۱۵۰ پیکسل مربع برای تصاویر ریز
۳۰۰ پیکسل عرض برای تصاویر متوسط
۷۶۸ پیکسل حداکثر عرض برای تصاویر متوسط
۱۰۲۴ پیکسل حداکثر عرض برای تصاویر بزرگ
حالت Medium_large اضافه شده تا از تصاویر واکنشی پشتیبانی نماید و به همین دلیل در صفحه تنظیمات وجود ندارد. در این صفحه اصل صحبت در خصوص تصاویر ثابت یا به عبارتی ریسپانسیو می باشد.
تصاویر ریسپانسیو در وردپرس
همه این نوع از تصاویر در ابعاد مختلف اهدافی را دنبال می کنند، بنابراین نباید با اعمال تغییرات در پیش فرض وردپرس از عملکرد آن ها جلوگیری کنید.
وردپرس تصاویر ریسپانسیو را در نسخه ۴٫۴ خود به هسته افزود. به جای پرکردن src تصویر با URL تنها برای یک تصویر، وردپرس مجموعه ای از منابع را اضافه کرد که لیستی از URL های تصاویر با اندازه های مختلف است.
حدس بزنید برای ایجاد این لیست از چه تصاویری استفاده می کنید؟ خب وردپرس از همان تصاویر در اندازه های مختلف استفاده می کند که وقتی یک تصویر را آپلود می کنید، صورت می گیرد.
این فهرست را به مرورگر پیشنهاد می دهد تا بتواند تصویری را انتخاب کند که مناسب با دستگاه کاربر می باشد. اگر بازدید کننده ای از یک گوشی هوشمند استفاده کند، یک تصویر مناسب و کوچک برای آن گوشی دریافت خواهد کرد. اگر از یک کامپیوتر خانگی در حال بررسی صفحه شما باشند قطعا تصویری بزرگتر و متناسب با آن را مشاهده خواهد کرد.
زمانی که شما یک ابعاد را برای تصاویر به صورت سفارشی اضافه می کنید وردپرس آن را به srcset (مجموعه منابع) اضافه می کند. با این کار می توانید پلتفرم ها و ابعاد دستگاه های مختلف را پوشش دهید.
تصاویر کوچک وردپرس و اندازه تصویر مورد نظر
ما اکنون به بخشی از این مطلب آموزشی رسیده ایم که در آن کل تصویر کوچک / تصویر مورد نظر را باز می کنیم. در واقع مسئله این است؛ وردپرس در بروزرسانی ها و تکامل خود نام موارد مختلف را تغییر می دهد اما هر کدام از آن ها با نام های قدیمی خود همچنان امکان کارکرد دارند.
اندازه تصاویر تصویر بند انگشتی وردپرس در وردپرس نسخه ۲٫۹ معرفی شد اما بلافاصله در آپدیت ۳٫۰ خودش جایگاه و نام آن تغییر کرد که حسابی باعث بهم ریختی آموزش های قبلی در سایت های مختلف شد.
در اینجا چند نمونه داریم:
اگر موضوع شما تصاویر را نمایش نمی دهد و شما می خواهید این ویژگی را فعال کنید، می بایست مورد زیر را به فایل functions.php خود اضافه کنید.
add_theme_support( ‘post-thumbnails’ );
۱
add_theme_support( ‘post-thumbnails’ );
برای نمایش اندازه تصاویر در وردپرس در یک قالب، از مورد زیر استفاده کنید.
the_post_thumbnail()
۱
the_post_thumbnail()
ریز عکس ها و تصاویر featured-large در ابعاد ۱۵۰ پیسکل در ۱۵۰ پیسکل تقسیم می شوند اگر شما از the_post_thumbnail() برای مشخص کردن اندازه استفاده کنید، از اندازه مربع پیش فرض ۱۵۰ پیسکلی استفاده می کند.
برای اینکه این مسئله برای خودتان کمتر گیج کننده و گنگ باشد می توانید از اندازه های مناسب استفاده کنید، ما توصیه می کنیم که یک تصویر سفارشی ایجاد کنید و آن را چیزی مشابه به featured-large بگذارید سپس وقتی می خواهید از آن تصویر استفاده کنید در واقع از فیلد the_post_thumbnail(‘featured-large’) بهره میگیرید.
قبل از شروع ایجاد تصاویر سفارشی در وردپرس
زمانی که قصد شروع به ایجاد اندازه های سفارشی برای تصاویر در وردپرس می کنید، از ایجاد کردن تصاویر برای هر هدف قابل تصور اجتناب کنید. چرا که با استفاده از یک سرویس بهینه سازی تصاویر می توانید خیلی سریع هر تصویر را مطابق با نیاز های مختلف بهینه سازی نمایید.
با استفاده از یک برنامه مشخص در خصوص بهینه سازی تصاویر می توانید هر تصویر را با توجه به نوع و ابعادی که نیاز است بدون شلوغ کاری در هسته وردپرس خودتان تنظیم کنید و ابعاد متنوعی را برای آن در نظر بگیرید.
Smush Pro یک نمونه عالی است که با هیچ محدودیتی هم در بهینه سازی تصاویر رو به رو نیست و همچنین با یک CDN همراه است پس شما می توانید فضای ذخیره سازی سرور خود را هم بیشتر حفظ کنید. با چنین برنامه ای شما قادر به افزودن حالت های سفارشی بیشتری برای هر تصویر خواهید بود.
چگونه اندازه سفارشی تصاویر را در وردپرس اضافه کنیم
در اینجا کدی که نیاز است به فایل های functions اضافه کنید جهت سفارشی سازی تصاویر آمده است:
add_image_size( ‘the-name-for-custom-image-size’, 600, 400, true );
۱
add_image_size( ‘the-name-for-custom-image-size’, 600, 400, true );
این کد ۴ دستور مهم را اعمال می کند:
نامی که برای تصویر دلخواه خود می گذارید
عرض تصویر در پیکسل
طول تصویر در پیکسل
می بایست تصویر را مطابق با عرض و طولی که در بالا ذکر شده قرار دهید
بریدن تصاویر در وردپرس چگونه است؟
پارامتر بریدن اتوماتیک است، بنابراین شما درست یا غلط از آن استفاده می کنید. اگر آن را به طور کامل ترک و یا حذف کنید هم عملکردی نادرست را انجام داده اید.
اگر پارامتر بریدن را به درستی تنظیم کنید، وردپرس تصویر شما را کراپ می کند تا متناسب با ابعاد مشخص شده شما در ایجاد تصویر سفارشی باشد.
برای مثال اگر اندازه تصویر سفارشی شما ۶۰۰ پیکسل در ۶۰۰ پیکسل تنظیم شود و بعد از آن شما تصمیم بگیرید یک تصویر ۶۰۰ پیکسلی در ۸۰۰ پیکسلی آپلود کنید، ۲۰۰ پیکسل از آن بریده خواهد شد تا تصویر به صورت مربعی ایجاد شود.
add_image_size( ‘custom-image-square’, 600, 600, true );
۱
add_image_size( ‘custom-image-square’, 600, 600, true );
به طور کلی استفاده از پارامتر برش درست و منطقی است و در شرایط مختلف به خوبی به کار می آید به ویژه برای دقیق کردن تصاویر نسبت به کاربران مختلف؛ تصاویر آرشیو یکی از مهم ترین وجه هایی هستند که این پارامتر را نیاز دارند.
استفاده از این پارامتر باعث تغییر دادن تصویر نمی شود بلکه آن را متناسب با ابعادی که در نظر گرفته اید می سازد. البته بسته به نوع تنظیم دارد چرا که در شرایطی می تواند باعث حذف بخشی از تصویر بشود.
بازسازی ریز عکس ها در وردپرس
یکی از مهم ترین گام ها زمانی است که:
اصلاح اندازه تصاویر پیش فرض وردپرس
اضافه کردن اندازه تصاویر سفارشی یا
تغییر به یک موضوع جدید که دارای اندازه های مختلف سفارشی است
در این زمینه ریز عکس ها به تمام تصاویر اضافی که وردپرس ایجاد می کند، از جمله اندازه های تصویر سفارشی که در موضوع شما و آن هایی که شما از طریق فایل functions خود ایجاد می کنید، اشاره می شود.
زمانی که شما تغییری در نحوه ایجاد تصاویر وردپرس ایجاد می کنید، آن ها صرفا روی تصاویری که از این به بعد بارگذاری می کنید اعمال می شوند و این تغییرات تصاویری که قبل از این در کتابخانه رسانه وردپرس شما بارگذاری شده اند را شامل نمی شوند.
مقاله پیشنهادی مفید و کاربردی: نحوه دیدن بازدید سایت و گزارش گیری های مختلف در وردپرس
برای تغییر تصاویری که قبلا آپلود کرده اید، می بایست از افزونه محبوب Regenerate Thumbnails استفاده کنید.
پس از نصب این افزونه می توانید آن را در قسمت ابزار پیدا کنید.
زمانی که ریز عکس ها را در اندازه های جدید خود بازسازی می کنید سعی کنید اندازه های قدیمی که دیگر استفاده نمی شوند را حذف کنید تا فضای سرور خالی تر شود.
تنظیم تصاویر سفارشی با بهترین روش ها
در ادامه به چند نکته و راهنمای مختصر هم اشاره ای خواهیم داشت در در تولید تصاویر وردپرس به مشکل برنخورید:
همیشه بزرگترین فایلی را که می توانید آپلود کنید. اگر اندازه تصویر شما خیلی کوچک باشد، وردپرس نمی تواند تمام ابعاد سفارشی سازی شده را روی آن پیاده سازی نماید.
اگر شما به صورت پیش فرض اندازه medium_large را دارید از update_option() استفاده کنید. شما می توانید از این برای هرگونه بروز رسانی در تصاویر استفاده کنید.
اگر شما خارج از حلقه وردپرس هستید می توانید از get_the_post_thumbnail() در استفاده از تصاویر سفارشی سازی خود استفاده کنید.
همه چیزی که وجود دارد این است که تصویر سفارشی سازی را اضافه کنید
زمانی که شما به خوبی درک کنید که تصاویر سفارشی سازی شده چگونه در وردپرس تنظیم می شوند می توانید به خوبی آن ها را برای کاربران مختلف بهینه سازی کنید تا تصاویری مناسب به آن ها نمایش داده شود. این مسئله در سئو داخلی و سئو وردپرس شما تاثیر بسیار زیادی دارد.
اگر می خواهید فرایند بهینه سازی و شخصی سازی ابعاد را در تصاویر به بهترین شکل ممکن و بدون هیچ دردسری تجربه کنید، توصیه می کنیم از Smush استفاده کنید. این ابزار دارای یک CDN حرفه ای است که به تغییر اتوماتیک تصاویر برای بهینه سازی بیشتر با کمترین دردسر ممکن کمک می کند.