طراحی سایت آسا

طراحی سایت ,سئو و دیجیتال مارکتینگ

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

  سارا نصیری

 ۹/ آذر/ ۹۵

  2252

  ۰

retina

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

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

گام اول

دانلود فایل retina.js و قرار دادن آن در قالب وردپرسی تان در پوشه js/  یا پوشه ی scripts/  بنابراین با توجه به ساختار قالب فایل را اپلود کنید.

گام دوم

فایل function.php را باز کنید (قبل از تغییر بکاپ گیر کنید) و کدهای زیر را وارد کنید.

/*-----------------------------------------------------------------------------------*/
/*	Register and load front end JS
/*-----------------------------------------------------------------------------------*/

if( !function_exists( 'dw_enqueue_scripts' ) ) {
    function dw_enqueue_scripts() {
		
		//Use Google jQuery Libary
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
		
		//Register the Retina.js file
		wp_register_script('retinajs', get_template_directory_uri() . '/js/retina.js', 'jquery', '1.0', TRUE);
		
        // Enqueue our JS scripts
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('retinajs');

    }
    
    add_action('wp_enqueue_scripts', 'dw_enqueue_scripts');
}

گام سوم

هنگامی که فایل retina.js لود کردید میتوانید تصاویری که میخواهید حالت رتینا را رائه بدهند پیشوند “۲x@”  قراردهید و تصاویر عادی را همان نام عکس my_image.png خود را بگذارید و تصاویر دو برابر را به صورت my_image@2x.png قرار دهید.

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

wp-retina-2x

WP Retina 2x

یکی از پلاگین های محبوب  وردپرس که یک فایل جداگانه که برای نمایش رتینا لازم است را ایجاد میکند و به بازدیدکنندگان نمایش میدهد ,وب سایت شما را زیبا و مناسب جلوه میدهد.

برچسب‌ها, , ,


مطالب زیر را حتما بخوانید