اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

مقدمه

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

در بخش اول سرفصل های زیر بررسی شدند:

• چگونه وردپرس تصاویری که آپلود می کنید را مدیریت می کند؟
• اندازه تصاویر وردپرس چقدر است و چه مواردی را باید در نظر داشته باشید؟
• وردپرس تصاویر را کجا و چگونه ذخیره می کند؟
• اندازه تصاویر پیشفرض وردپرس چقدر است؟
• اندازه تصویر ایده آل وردپرس چقدر است؟
• اندازه تصویر ایده آل برای هدر وردپرس چقدر است؟
• چگونه سایز تصویر پیش فرض را تغییر دهید؟
• چگونه اندازه های سفارشی را با استفاده از افزونه به وردپرس اضافه کنید؟

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

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

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

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

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

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

آموزش تهیه نسخه پشتیبان در دایرکت ادمین

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

تصویر(1)

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

add_theme_support( 'post-thumbnails' );

تصویر(2)

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

اکنون می توانید برای تنظیم اندازه دلخواه تصاویر خاصی که مدنظرتان است، به دنبال رشته "add_image_size" در فایل "functions.php" باشید. 

add_image_size( 'example-custom-image-size', 800, 640 );

به طور مشخص، می بایست داخل کوتیشن ها، نام سایز جدید خود را وارد کنید. توصیه می گردد که نام را ساده و توصیفی انتخاب کنید. (به عنوان مثال main-image-size)

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

در اسکرین شات زیر می توانید نمونه کد را مشاهده کنید: 

تصویر (3)

برش تصاویر (Cropping) چگونه کار می کند؟

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

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

در زمان افزودن اندازه های دلخواه تصاویر می توانید تنظیمات را طوری انجام دهید که وردپرس به صورت خودکار تصاویر را بر اساس اندازه های تنظیم شده شما و اندازه اصلی آن برش دهد. به این منظور کافی است عبارت "True" را به انتهای آرایه اضافه کنید. (این مورد در تصویر (3) نیز استفاده شده است.)

در زیر همان مثال قبلی با ویژگی برش آورده شده است:

add_image_size( 'example-custom-image-size', 800, 640, true );

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

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

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

اکنون باید فایل قالب خود را ویرایش کرده و قطعه کد زیر را به آن اضافه کنید:

the_post_thumbnail( 'example-specified-image-size' );

 برای یافتن این فایل در قسمت "ویرایشگر پرونده پوسته" در زیر منوی "نمایش" به دنبال فایل "index.php" باشید.  زمانی که آن را پیدا کردید همانند تصویر زیر قطعه کد بالا را به آن اضافه کنید. 

تصویر(4)

می توانید همانند مورد فوق عبارت "new-homepage-feature" را با نام اندازه تصویر جدید خود جایگزین کنید. 

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

نحوه بروزرسانی تصاویر کوچک قدیمی

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

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

افزونه Regenerate Thumbnails

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

به منظور نصب افزونه به بخش "افزونه ها" سپس "افزودن" مراجعه کرده و عبارت "Regenerate thumbnails" را جستجو نموده، آن را نصب و فعال کنید.

تصویر(5)

سپس در زیر منوی "ابزارها" روی "بازسازی تصاویر بندانگشتی" کلیک کنید:

تصویر(6)

می‌توانید روی "بازسازی تصاویر بندانگشتی برای همه [#] پیوست" کلیک کنید تا اندازه‌ های جدید روی همه تصاویر قدیمی نیز اعمال شود.

نکته: در علامت زدن چک باکس "فایل‌های تصاویر بندانگشتی برای اندازه‌های قدیمی ثبت نشده را حذف کنید…" مراقب باشید، زیرا اگر سایتتان همچنان تصاویر قدیمی با اندازه‌هایی داشته باشد که دیگر استفاده نمی‌کنید، ممکن است با تصاویر شکسته در سایت خود مواجه شوید.

همانطور که از تصویر بالا مشاهده می کنید، Regenerate Thumbnails تمام سایز های تصاویری که در حال حاضر در سایت شما فعال هستند را فهرست می کند. ممکن است اندازه های تصویری را بیابید که از آن اطلاعی نداشتید. این سایزها اغلب توسط افزونه ها ایجاد می شوند، به خصوص اگر برای بهبود ظاهر، طراحی یا عملکرد سایت شما باشند.

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

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

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

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

روی دکمه "ویرایش تصویر" درست در زیر تصویر کلیک نمایید:

تصویر(7)

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

​​​​​​​تصویر(8)

به محض اینکه روی "مقیاس" کلیک نمایید، سایز موردنظر به طور خودکار ذخیره می شود. اگر به هر دلیلی اندازه تصویر جدید را مناسب نمی دانید، همواره می توانید با استفاده از گزینه "بازیافت تصویر اصلی" (درست در زیر فیلد اندازه تصویر) تصویر را به اندازه اصلی بازگردانید.

ویرایش تصاویر در گوتنبرگ وردپرس

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

​​​​​​​

​​​​​​​تصویر(9)

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

بهینه سازی تصاویر شما

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

51 نکته در مورد سئو تصاویر | بهینه سازی تصاویر برای موتورهای جستجو

در نظر داشته باشید، هنگامی که اندازه‌های سفارشی تصویر را اضافه می‌کنید، باید از نحوه بهینه سازی آنها نیز مطلع باشید تا مطمئن شوید که بر عملکرد سایت شما تأثیر نمی‌گذارند یا منابع بیشتری در سرور، نسبت به مقدار مورد نیاز مصرف نمی‌کنند.

در مورد نوع فایل تصمیم بگیرید

• انتخاب نوع فایل مناسب برای تصاویر، می تواند حجم آنها را به میزان قابل توجهی کاهش دهد. در حالی که انواع مختلفی از فرمت های تصویری وجود دارد اما اکثریت قریب به اتفاق آنها JPEG یا PNG هستند.
• وقتی صحبت از تصاویر رنگارنگ به میان می آید، JPEG برنده است. همچنین، می‌توانید فایل‌های JPEG را فشرده‌تر کنید تا حجم آن‌ها را تنها با اندکی کاهش کیفیت (اگر این کار را درست انجام دهید)، کمتر نمایید. از سوی دیگر، PNG معمولاً گزینه بهتری برای طراحی، متن، اسکرین شات ها و گرافیک می باشد.

تغییر اندازه تصاویر

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

از مزایای فشرده سازی استفاده کنید

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

از Lazy Loading استفاده کنید

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

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

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

• Imagify: امکان سفارشی سازی سطح فشرده سازی و سایر ویژگی های بهینه سازی تصویر را دارد.
• Kraken: افزونه فشرده سازی مفید و بدون ضرر است اما فقط در صورت خرید نسخه پریمیوم عالی است.
• ShortPixel: از فشرده سازی با اتلاف و بدون اتلاف پشتیبانی کرده و با انواع مختلفی از تصاویر کار می کند.
• Optimole: برای CDN و Lazy Loading مناسب است، که راه های بسیار موثری برای بهینه سازی تصاویر شما هستند.

همچنین می توانید به لینک زیر مراجعه نمایید:

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

خلاصه

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

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