ژانویه 31, 2020 Mostafa بدون دیدگاه

سلام دوستان! وقتی درحال طراحی یک پوسته (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  پوسته های شما با انواع مرورگرها و سیستم عامل ها.


نظرات

توجه : لطفاً فقط نظرات خود را از این طریق ارسال نمایید و سوالات و مشکلات خود را در انجمن سایت مطرح نمایید.