خانه » آموزش » وردپرس » هماهنگ کردن وردپرس با مرورگرها

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

1,014 وردپرس مینا تیموریان جمعه ۲۸ آبان ۱۳۹۵

2 رای

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

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

وقتی درحال طراحی یک پوسته (theme) وردپرسی هستیم ,باید به این نکته توجه کنیم که کدهای CSS و JQeury پوسته شما ممکنه در سیستم عامل ها یا مرورگرهای مختلف به صورت کاملا متفاوتی نمایش داده بشه.برای جلوگیری از این مشکل می توانیم کلاس (class) های مخصوص مرورگرها یا سیستم عامل های مختلف رو در body class وردپرس قرار بدیم.

خب برای قدم اول کدهای زیر رو در فایل functions.php قرار میدیم :

  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
        if($is_lynx) $classes[] = 'lynx';
        elseif($is_gecko) $classes[] = 'gecko';
        elseif($is_opera) $classes[] = 'opera';
        elseif($is_NS4) $classes[] = 'ns4';
        elseif($is_safari) $classes[] = 'safari';
        elseif($is_chrome) $classes[] = 'chrome';
        elseif($is_IE) {
                $classes[] = 'ie';
                if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
                $classes[] = 'ie'.$browser_version[1];
        } else $classes[] = 'unknown';
        if($is_iphone) $classes[] = 'iphone';
        if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
                 $classes[] = 'osx';
           } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
                 $classes[] = 'linux';
           } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
                 $classes[] = 'windows';
           }
        return $classes;
}
add_filter('body_class','mv_browser_body_class');</pre>

global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

if($is_lynx) $classes[] = 'lynx';

elseif($is_gecko) $classes[] = 'gecko';

elseif($is_opera) $classes[] = 'opera';

elseif($is_NS4) $classes[] = 'ns4';

elseif($is_safari) $classes[] = 'safari';

elseif($is_chrome) $classes[] = 'chrome';

elseif($is_IE) {

$classes[] = 'ie';

if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))

$classes[] = 'ie'.$browser_version[1];

} else $classes[] = 'unknown';

if($is_iphone) $classes[] = 'iphone';

if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {

$classes[] = 'osx';

} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {

$classes[] = 'linux';

} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {

$classes[] = 'windows';

}

return $classes;

}

add_filter('body_class','mv_browser_body_class');</pre>

بخش اول این کد مرورگر کاربر رو تشخیص میده و به $classes اضافه میکنه, بخش دوم هم سیستم عامل کاربر رو تشخیص داده و به $classes اضافه میکنه, بخش آخر هم فیلتر های body_classes مورد نیاز این سیستم عامل و مرورگر رو به classes اضافه میکنه.

حالا شما باید body class رو به تگ <body> کد HTML پوسته خودتون در فایل header.php اضافه کنید.به جای کد body پوسته ی خودتون کد زیر رو جایگزین کنید:

<body <?php body_class(); ?>>

1	<body <?php body_class(); ?>>

توجه : اگه شما از framework های مخصوص طراحی پوسته استفاده می کنید,تگ body پوسته ای که ساخته اید توانایی نشان دادن نوع سیستم عامل و مرورگر کاربر رو داره و در ضمن class های دیگه رو هم به تگ body وردپرستون به صورت خودکار اضافه کرده است.