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

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

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

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

398,686 نفر

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

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

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

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

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

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

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

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

    • 8 سال عضو همیار وردپرس

      با احترام
      الان دیگه نیازی به این کار نیست و قالب ها بخوبی از مرورگر ها پشتیبانی می کنند.

    • 6 سال عضو همیار وردپرس

      اوکی…ممنون 🙂

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

    • 8 سال عضو همیار وردپرس

      با سلام.بله این کد تست نشده و استفاده از آن ریسک داره.

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

    • 8 سال عضو همیار وردپرس

      با سلام در مورد بخش اول کافیه که کد رو فایل functions.php قرار بدید(در هر جایی از فایل بود مهم نیست).
      در قسمت دوم کد یک خطی رو در فایل header.php قالبتون در قسمت body کپی کنید همین.

    • سلام دوباره

      یرای functions یعنی زیر اون قسمتی که مشخص کردم تو تصویر کدها رو قرار بدم؟
      http://www.up2www.com/uploads/cod.png

      و برای body هم زیر اون قسمت که مشحص شده بزام؟
      http://www.up2www.com/uploads/cod2.png

    • 8 سال عضو همیار وردپرس

      برای functions بالای جایی که مشخص کردید مناسبه.
      برای body تگ body ک مشخص کردید رو پاک کنید و اون خط رو جایگزین کنید.

    • من هم برای functions همین جایی که گفتین کذاشتم ولی error داد!Parse error: syntax error, unexpected ‘<‘ in /home/test/public_html/wp-content/themes/b2014/functions.php on line 16

    • 8 سال عضو همیار وردپرس

      سلام
      برای جایگذاری کد کوتاه در header.php دقت کنید ! من فکر میکنم مشکل از این بخش باشه

      با احترام

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

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

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

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

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