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

 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  اضافه میکنه.

  درج خودکار کد QR در مطالب شما

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

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

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

امیدوارم این مقاله کمکی باشه برای هماهنگی بیشتر کدهای JQuery  وcss  پوسته های شما با انواع مرورگرها و سیستم عامل ها.

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

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

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

336,113 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. با سلام خدمت شما
    من از قالب انفولد استفاده می کنم و زمانی که با فیلتر شکن وارد سایتم می شم قالب به درستی نمایش داده میشه ولی زمانی که بدون فیلتر شکن وارد می شم با هر مرورگری که می رم قسمت هدر و فهرست سایت بد نمایش داده میشه .
    اگر امکانش هست من رو راهنمایی کنید تا بتونم مشکلم رو حل کنم در ضمن من تازه با وردپرس آشنا شدم و از کد نویسی هم چیزی نمی دونم ، لطفا یه طوری توضیح بدید که بتونم اجراش کنم
    با تشکر از شما

  2. سلام
    تگ Body توی فایل headre.php قالب من به صورت پیشفرض حالت <body > هستش با این تفاسیر بازم قالبم برای قسمت محصولات و اسلایدر با مرورگرهای مختلف ست نیست . مشکل کجاست!؟

  3. 4 سال عضو همیار وردپرس

    با سلام
    من از قالب boemia استفاده میکنم . یه مدتی هست که انازه های سایتم بهم ریخته وو قالب در تمام صفحه نیست و اندازش نصف شده و ابزارک ها هم به جای گوشه در زیر مطالب نمایش داده میشه
    مشکل از کجاست
    با احترام

  4. 4 سال عضو همیار وردپرس

    با سلام
    تنها با افزودن این ۲کد خوده قالب درست میشه و نیازی به تغییر توش نیست؟

  5. این کد فک کنم اشتباست منم امتحان کردم وب سایت قاطی کرد بررسی مجدد نمایید و یا بیشتر توضیح بدین

  6. سلاممیشه بیشتر رانمایی و توضیح دهید که این کد رو باید کجای functions.php گذاشت؟ آخه من یکسری کد تو functions.php دارم.یقسمت دوم body class اصلا متوجه مشدم که باید چیرو با چی جایگزین کرد!

  7. خیلی کاربردی بود.
    البته روش ساده تر اینکه برای مرورگر های مختلف می شه یک فایل css جداگانه نوشت.

  8. سلام همیار وردپرس…
    سال نو مبارک
    میگم عجب قالب توپی واسه خودتون ردیف کردید هاااا.
    خوشحال میشم از سایت بنده هم دیدن کنید.
    http://www.arize.ir
    سال خوب و پر امیدی براتون آرزو می کنم.

  9. ممنون مطلب خوبی بود

  10. بسیار عالی و کاربردی …
    موفق باشید

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

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