ویدیوهای فارسی و رایگان آموزش وردپرس

همینک دانلود و تماشا کنید

افزودن اندازه های دیگری از عکس های بارگذاری شده روی وردپرس

حتماً تا به حال متوجه این موضوع شدید که وقتی عکسی را روی وردپرس بارگذاری می‌کنید، اندازه‌های متفاوتی از آن عکس در پوشهٔ wp-content/uploads ذخیره می‌شوند. این به این خاطر است که قالب سایت ما بتواند بسته به موقعیت و اندازهٔ مکان نمایش، از عکس‌های متناسب استفاده کند. البته این شدنی است که از یک عکس برای جایگاه‌های مختلف استفاده کرد؛ به این صورت که عکس را تغییر اندازه داد. ولی مثلاً فرض کنید در صفحهٔ اول سایت، در کنار عنوان هر نوشته، عکسی از آن نوشته هم به نمایش گذاشته شود. در این صورت اگر قرار باشد اندازهٔ اصلی اولین عکس نوشته برای هر نوشته نمایش داده شود، حجم صفحات افزایش قابل توجهی خواهد داشت. به همین دلیل همیشه وردپرس یک نسخهٔ بدانگشتی از هر تصویر هم ایجاد و روی هاست ذخیره می‌کند.

افزودن اندازه های دیگری از عکس های بارگذاری شده روی وردپرس

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

چگونگی افزودن سایزهای دیگر از عکس‌های بارگذاری شده روی وردپرس

پس برای افزودن اندازه هیا دیگری از عکس های بارگذاری شده روی وردپرس، سند functions.php قالب فعال سایت‌تان را باز کنید. البته در جای دیگری مثل اسناد افزونه هم می‌توانید این کار را بکنید. در کل جایی که بتوان توابع وردپرس را اجرا کرد، کدهای زیر را می‌توانید قرار دهید.

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

کدهای بالا سه تا اندازهٔ دیگر، به غیر از اندازه‌های پیش فرضی که در صفحهٔ تنظیمات وردپرس وارد کردید را ایجاد می‌کند که همگی مربوط به تصاویر بند انگشتی‌ای هستند که در جاهای مختلفی به نمایش در می‌آیند. مثلاً اندازهٔ sidebar-thumb تصویر بند انگشتی از یک تصویر است که در نوار کناری سایت نمایش داده می‌‌شود. یا homepage-thumb تصویر بدانگشتی از یک تصویر است که در صفحهٔ اصلی یا همان صفحهٔ اول سایت نمایش داده می‌شود و singlepost-thumb تصویر بند انگشتی از هر عکسی است که در صفحهٔ همان نوشته ظاهر می‌گردد.

یک آموزش جذاب دیگه!  تبدیل خودکار عکس های PNG به JPG با افزونه PNG to JPG

همانطور که می‌بینید، ما از تابع add_image_size استفاده کردیم که ۴ تا نشانوند دریافت کرده است. اولین نشانوند نام یا همان شناسهٔ انحصاری هر اندازه از تصاویر سایت است. از این شناسه برای دریافت اندازهٔ هر کدام از تصاویر سایت استفاده خواهیم کرد. یعنی با همین شناسه است که می‌گوییم چه اندازه‌ای از چه عکسی در کجای سایت به نمایش درآید.

دومین و سومین نشاوند مربوط به اندازه طول و عرض تصویر است که در زمان بارگذاری شدن عکس، از همین اندازه‌ها برای تغییر اندازه استفاده می‌شود. چهارمین نشانوند هم مربوط به نوع Crop یا برش خوردن تصویر است. اگر مقدار true برای آن در نظر گرفته شود، تصویر به صورت اجباری برای رسیدن به اندازهٔ ایده‌آل برش می‌خورد. در این صورت ممکن است بخشی از تصویر به علت برش خوردن، حذف شود. ولی چیزی که هست، این است که در هر صورت اندازهٔ عکس قطعی ۱۲۰ در ۱۲۰ پیکسل خواهد شد (در مورد اول).

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

یک آموزش جذاب دیگه!  متن جایگزین تصویر در وردپرس

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

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

چگونگی استفاده از سایزهای عکس‌های مختلف

حالا می‌رویم به سراغ نحوهٔ فراخوانی عکس با اندازه‌ای که از قبل برای تصاویر روی سایت ساخته شده. برای این منظور باید از تابع the_post_thumbnail به صورت زیر استفاده شود.

<?php the_post_thumbnail( 'homepage-thumb' ); ?>

در داخل پرانتز و در بین ‘ ‘ شما باید نام اندازهٔ عکسی را وارد کنید که آن سایز از عکس برای نمایش مد نظر شماست. مثلا در کد بالا homepage-thumb وارد شده که اندازهٔ بند انگشتی برای صفحهٔ اصلی سایت نشان داده میشود. این تابع را باید درون Loop فراخوانی پست‌های وردپرس یا همان دستور while وارد کنید که به صورت خودکار برای هر پست، تصویر مربوطهٔ همان نوشته را با اندازهٔ دلخواه نمایش می‌دهد. البته برای نمایش در خارج از Loop باید از روش‌های دیگری استفاده کنید،

با همین روش شما می‌توانید اندازه‌های دلخواه عکس‌های سایت خود را تعیین کنید و آنها را برای نمایش در جایگاهی از سایت آماده کنید. فراموش نکنید که خود وردپرس سه تا اندازه به صورت پیش فرض برای هر عکسی که روی سایت بارگذاری می‌کنید، ایجاد می‌کند. برای مشاهدهٔ این اندازه‌ها، کافی است از پیشخوان وردپرس به مسیر تنظیمات » رسانه بروید تا گزینه‌های تنظیمات اندازهٔ بندانگشتی و اندازهٔ میانه و اندازهٔ بزرگ را ببینید. هر کدام را که نخواسته باشید، می‌توانید با وارد کردن عدد ۰ برای طول و عرض همان اندازه از تصویر، غیرفعالش کنید.

۱۴۰۱/۰۱/۰۹

هک وردپرس
بدون دیدگاه

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.

آموزش جامع وردپرس

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

آموزش افزونه Yoast SEO

درباره ®WPTutorial

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

هنوز دنبال هاست خوب می‌گردید؟!

🥇 هاست حرفه‌ای همراه با؛ بسته های رایگان ویدیوهای آموزش وردپرس و طراحی سایت !
کد تخفیف 10 درصد : off10wt

خرید هاست و دامین ارزان