ریسپانسیو کردن عکسها در طراحی سایت وردپرس


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

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



ریسپانسیو کردن عکسهای وردپرس از طریق کد نویسیبرای اینکه بتوانید به صورت حرفه ای عکسهای طراحی سایت وردپرسی خود را ریسپانسیو کنید اول باید به فایل function.php در پوشه قالبی که ساختید بروید و بعد از آن این تکه کد و تابع را در داخل آن وارد کنید شما باید تابع add_image_size را در فایل function.php فراخوانی کنید
add_image_size( 'sml_size', 300 );

add_image_size( 'mid_size', 600 );

add_image_size( 'lrg_size', 1200 );

add_image_size( 'sup_size', 2400 );

 
راه دوم : نصب پلاگین ریسپانسیو کردن عکسها

خوب ما ایرانی ها همیشه راه آسان تر را دوست داریم و آن نصب پلاگین هست و نمی دانیم که همین پلاگین چقدر باعث کاهش سرعت در طراحی سایت ما شود و در ساین وب راه اول اضافه کردن کد را پیشنهاد می کنیم از موضوع خارج نشویم شما برای اینکه عکسهای خود را در وردپرس ریسپانسیو کنید باید پلاگین RICG Responsive Images را نصب کنید اگر دقت کرده باشید قبل از نصب پلاگین کدی در ادیتور html  به شما می دهد اینجوری هست

<img class="aligncenter wp-image–176 size-full" src="http://signwebdesign.ir/wp-content/uploads/2017/05/img1.jpg" >

 ولی وقتی شما پلاگین را نصب می کنید به این شکل در می آید <img class="aligncenter wp-image–137 size-full" src="http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo.jpg" srcset="http://signwebdesign.ir/2/wp-content/uploads/2017/05/onavo–169x300.jpg 169w, http://signwebdesign.ir/2/wp-content/upl...6x1024.jpg 576w, http://signwebdesign.ir/2/wp-content/upl...00x534.jpg 300w, http://localhost/SebastianGreen/2017/wp_dev/wp-content/uploads/2017/05/onavo–600x1067.jpg 600w, http://signwebdesign.ir/2/wp-content/upl.../onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">
خوب تصاویر سایت وردپرسی شما ریسپانسیو شد به همین راحتی و
آسانی خیلی راحت نبود؟با نظرات خود ما را در جهت نوشتن مطالب بروز یاری دهید