چگونه در وردپرس تصاویر واکنشگرا یا رسپانسیو بسازیم - طراحی سایت | ساخت سایت | قالب وردپرس

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

۱۴ اردیبهشت ۱۳۹۲
1466 بازدید
فاقددیدگاه
responsive.www.dty.ir

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

function responsive_images($atts, $content = null) {
     return '</pre>
<div class="image-resized">' . $content .'</div>
<pre>
';
}

add_shortcode('responsive', 'responsive_images');

و سپس فایل style.css پوسته خود را بازکنید و کد زیر را درون آن قرار دهید:

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

حالا شما می توانید با شورت کد [responsive] در هرجای پوسته که خواستید از تصاویر واکنشگرا استفاده کنید.مثال:

[responsive]<img title="title" alt="alt" src="image_url" />[/responsive]
امتیاز:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...
اشتراک گذاری:
مطالب مرتبط
دیدگاه شما