سلام دوستان! وقتی درحال طراحی یک پوسته (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 پوسته های شما با انواع مرورگرها و سیستم عامل ها.
علی شجاعی فر
با سلام خدمت شما
من از قالب انفولد استفاده می کنم و زمانی که با فیلتر شکن وارد سایتم می شم قالب به درستی نمایش داده میشه ولی زمانی که بدون فیلتر شکن وارد می شم با هر مرورگری که می رم قسمت هدر و فهرست سایت بد نمایش داده میشه .
اگر امکانش هست من رو راهنمایی کنید تا بتونم مشکلم رو حل کنم در ضمن من تازه با وردپرس آشنا شدم و از کد نویسی هم چیزی نمی دونم ، لطفا یه طوری توضیح بدید که بتونم اجراش کنم
با تشکر از شما
میلاد
سلام
تگ Body توی فایل headre.php قالب من به صورت پیشفرض حالت <body > هستش با این تفاسیر بازم قالبم برای قسمت محصولات و اسلایدر با مرورگرهای مختلف ست نیست . مشکل کجاست!؟
storetel04 9 سال عضو همیار وردپرس
با سلام
من از قالب boemia استفاده میکنم . یه مدتی هست که انازه های سایتم بهم ریخته وو قالب در تمام صفحه نیست و اندازش نصف شده و ابزارک ها هم به جای گوشه در زیر مطالب نمایش داده میشه
مشکل از کجاست
با احترام
اردلـان 10 سال عضو همیار وردپرس
با سلام
تنها با افزودن این ۲کد خوده قالب درست میشه و نیازی به تغییر توش نیست؟
حسین رحیمی 11 سال عضو همیار وردپرس
با احترام
الان دیگه نیازی به این کار نیست و قالب ها بخوبی از مرورگر ها پشتیبانی می کنند.
اردلـان 10 سال عضو همیار وردپرس
اوکی…ممنون 🙂
reza
این کد فک کنم اشتباست منم امتحان کردم وب سایت قاطی کرد بررسی مجدد نمایید و یا بیشتر توضیح بدین
حسین رحیمی 11 سال عضو همیار وردپرس
با سلام.بله این کد تست نشده و استفاده از آن ریسک داره.
satin
سلاممیشه بیشتر رانمایی و توضیح دهید که این کد رو باید کجای functions.php گذاشت؟ آخه من یکسری کد تو functions.php دارم.یقسمت دوم body class اصلا متوجه مشدم که باید چیرو با چی جایگزین کرد!
حسین رحیمی 11 سال عضو همیار وردپرس
با سلام در مورد بخش اول کافیه که کد رو فایل functions.php قرار بدید(در هر جایی از فایل بود مهم نیست).
در قسمت دوم کد یک خطی رو در فایل header.php قالبتون در قسمت body کپی کنید همین.
satin
سلام دوباره
یرای functions یعنی زیر اون قسمتی که مشخص کردم تو تصویر کدها رو قرار بدم؟
http://www.up2www.com/uploads/cod.png
و برای body هم زیر اون قسمت که مشحص شده بزام؟
http://www.up2www.com/uploads/cod2.png
حسین رحیمی 11 سال عضو همیار وردپرس
برای functions بالای جایی که مشخص کردید مناسبه.
برای body تگ body ک مشخص کردید رو پاک کنید و اون خط رو جایگزین کنید.
satin
من هم برای functions همین جایی که گفتین کذاشتم ولی error داد!Parse error: syntax error, unexpected ‘<‘ in /home/test/public_html/wp-content/themes/b2014/functions.php on line 16
bahar 11 سال عضو همیار وردپرس
سلام
برای جایگذاری کد کوتاه در header.php دقت کنید ! من فکر میکنم مشکل از این بخش باشه
با احترام
وب کیک
خیلی کاربردی بود.
البته روش ساده تر اینکه برای مرورگر های مختلف می شه یک فایل css جداگانه نوشت.
محمود
سلام همیار وردپرس…
سال نو مبارک
میگم عجب قالب توپی واسه خودتون ردیف کردید هاااا.
خوشحال میشم از سایت بنده هم دیدن کنید.
http://www.arize.ir
سال خوب و پر امیدی براتون آرزو می کنم.
هادی
ممنون مطلب خوبی بود
امیر
بسیار عالی و کاربردی …
موفق باشید