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

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

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

ثبت اندازه های تصویر اضافی برای تم خود h4>

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

 add_theme_support ('post-thumbnails')؛ 

هنگامی که پشتیبانی از تصاویر کوچک پست را فعال کردید ، اکنون می توانید از قابلیت ثبت اندازه های اضافی تصویر با عملکرد add_image_size () استفاده کنید. استفاده از تابع add_image_size به این صورت است: add_image_size (“اندازه اندازه” ، عرض ، ارتفاع ، حالت برش) ؛

کد نمونه می تواند مانند این باشد:

 add_image_size ('sidebar-thumb'، 120، 120، true)؛ // حالت برداشت سخت
add_image_size ('homepage-thumb'، 220، 180)؛ // حالت برداشت نرم
add_image_size ('singlepost-thumb' ، 590 ، 9999)؛ // حالت نامحدود قد

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

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

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

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

Soft Crop Example

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

Unlimited Height Mode Example

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

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

  

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

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

بازسازی سایزهای تصویر اضافی h4>

اگر این کار را در یک سایت کاملاً جدید انجام نمی دهید ، احتمالاً مجبور خواهید بود که تصاویر کوچک را دوباره تولید کنید. روش کارکرد add_image_size () بدین صورت است که فقط اندازه هایی را از نقطه ای که به موضوع اضافه شده تولید می کند. بنابراین هر عکس پستی که قبل از درج این عملکرد اضافه شده باشد ، اندازه جدید نخواهد داشت. بنابراین کاری که ما باید انجام دهیم ایجاد مجدد اندازه تصویر جدید برای تصاویر پست قدیمی است. این کار توسط افزونه ای به نام بازسازی انجام می شود تصاویر کوچک . پس از نصب و فعال سازی این افزونه ، گزینه جدیدی در زیر منو اضافه می شود: Tools »Regen. تصاویر کوچک

Regenerate Thumbnail Plugin Screen

روی نماد Regenerate Thumbnail کلیک کنید و اجازه دهید افزونه کار خود را انجام دهد.

افزونه دیگری که می تواند این کار را انجام دهد اندازه های تصویر ساده .

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

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

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

Post Insertion for Additional Image Sizes

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

Additional Image Sizes for Posts

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

پلاگین Simple Image Sizes همچنین به شما امکان می دهد اندازه های تصویر سفارشی را مستقیماً از داشبورد وردپرس ایجاد کنید.

ما معتقدیم که این روش باید تحت بهترین روشها برای همه توسعه دهندگان قالب وردپرس اضافه شود. نظر شما چیست؟

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/.

دیدگاهتان را بنویسید