سلام دوستان! وقتی درحال طراحی یک پوسته (theme) وردپرسی هستیم ,باید به این نکته توجه کنیم که کدهای CSS و JQeury پوسته شما ممکنه در سیستم عامل ها یا مرورگرهای مختلف به صورت کاملا متفاوتی نمایش داده بشه.برای جلوگیری از این مشکل می توانیم کلاس (class) های مخصوص مرورگرها یا سیستم عامل های مختلف رو در body class وردپرس قرار بدیم.
با اینکه WordPress به صورت پیش فرض کلاسهایی رو برای هماهنگی و فیلتر کردن کدهای پوسته ها و افزونه ها داره اما ما می تونیم کدهایی رو برای همانگی بهتر به body_clss اضافه کنیم.
خب برای قدم اول کدهای زیر رو در فایل functions.php قرار میدیم:
<pre>function mv_browser_body_class($classes) {
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(); ?>>
توجه:اگه شما از framework های مخصوص طراحی پوسته استفاده می کنید,تگ body پوسته ای که ساخته اید توانایی نشان دادن نوع سیستم عامل و مرورگر کاربر رو داره و در ضمن class های دیگه رو هم به تگ body وردپرستون به صورت خودکار اضافه کرده (این یکی از امکاناتی است که ابزار های توسعه مثل framework ها در اختیار شما قرار می دهند.).
امیدوارم این مقاله کمکی باشه برای هماهنگی بیشتر کدهای JQuery وcss پوسته های شما با انواع مرورگرها و سیستم عامل ها.
