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

 set_wp_with_all_browsers

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

crossplatform

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

مشاوره آموزشی رایگان
شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، از مشاوره رایگان کارشناسان آموزشی مجموعه همیار آکادمی استفاده نمائید.
 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

352,683 نفر

دیدگاهتان را بنویسید

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

دوره‌های آموزشی