همگام سازی وردپرس با مرورگرها

سلام خدمت همراهان گرامی مکانیک وردپرس ؛
بی هیچ مقدمه بریم سر اصل مطلب…
یکی از بزرگترین و در عین حال بجاترین انتظارات از یک وب سایت همگام بودن آن با تمامی مرورگر هاست.
یعنی ما توقع داریم سایتی که با وردپرس راه اندازی کرده ایم، در تمامی مرورگرها بخوبی نمایش داده شود.
اما گاهی اوقات خود شما نیز متوجه این موضوع شده اید که همه چیز بخوبی پیش نمیرود و ممکن است سایت ما در یک مرورگر خاص، نمایش استانداردی نداشته باشد.
اما راه حل چیست؟؟؟؟
با ما همراه باشید.

آموزش همگام سازی وردپرس با مرورگرها

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

تشخیص مرورگر در وردپرس با استفاده از کدهای جاوا اسکریپت

در وحله ی اول شما باید قابلیتی در سایت خود ایجاد کنید که وردپرس شما قدرت تشخیص این موضوع را داشته باشد که کاربران با چه مرورگری وارد سایت شما میشوند.
برای ایجاد چنین قابلیتی باید از قطعه کد زیر در فایل Header.php قالب وردپرس خود استفاده کنید.

var isOpera = !!(window.opera && window.opera.version);

توجه: قطعه کد بالا باید مابین دو تگ باز و بسته <script> قرار گیرد.
قطعه کد گفته شده برای تشخیص مرورگر در راستای همگام سازی وردپرس با مرورگرها مورد استفاده قرار گرفته و کاربر برای مشاهده سایت، تمامی مرورگر های معروف و مورد استفاده فعلی از قبیل فایرفاکس، گوگل کروم، سافاری، اینترنت اکسپلورر و… را بررسی میکند. استفاده از کد بالا برای تشخیص مرورگر بهترین روش در این زمینه است.

تشخیص مرورگر گجت های همراه در وردپرس با استفاده از کدهای جاوا اسکریپت

همانند روش قبل قطعه کد زیر را در فایل Header.php قالب وردپرس خود قرار دهید.

var isMobile = {
 Android: function() {
  return navigator.userAgent.match(/Android/i) ? true : false; }, BlackBerry: function() 
  { return navigator.userAgent.match(/BlackBerry/i) ? true : false; }, iOS: function() 
  { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; }
  , Windows: function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; }
  , any: function() 
  { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); }
};

اما ممکن است شما بخواهید در حالت کلی برای همه تلفن های همراه و گجت های غیر رایانه ای از یک حالت نمایش استفاده کنید. برای این منظور باید از کد زیر استفاده نمائید:

if( isMobile.any() ) {alert('Mobile Device');}

برای چک کردن تلفن های همراه برند بلک بری میتوانید کد زیر را مورد استفاده قرار دهید:

if( isMobile.BlackBerry() ) alert('BlackBerry');

برای چک کردن تلفن های همراه برند اپل میتوانید کد زیر را مورد استفاده قرار دهید:

if( isMobile.iOS() ) alert('iOS');

برای چک کردن تلفن های همراه با مرورگر IE میتوانید از کد زیر استفاده کنید:

if( isMobile.IEMobile() ) alert('IEMobile');

در نهایت برای چک کردن تلفن های همراه با سیستم عامل اندروید میتوانید از کد زیر استفاده کنید:

if( isMobile.Android() ) alert('Android');

اجرای صحیح وردپرس در مرورگرها با استفاده از کدهای جاوا اسکریپت

پس از گذراندن مراحل فوق باید وب سایت خود را در مرورگر های مختلف تنظیم نمائید. در ابتدای کار شما باید بیاموزید که چگونه از جاوا اسکریپت در css استفاده کنید.در ادامه چندین مورد از مثال هایی برای استفاده جاوا اسکریپت در css را آورده ایم که میتوانید استفاده کنید:

document.getElementById('divID').style.top="50px";
document.getElementById('divID').style.marginRight="-15px";
document.getElementById('divID').style.height="300px";
document.getElementById('divID').style.width="400px";

امیدوارم شما همراهان عزیز مکانیک وردپرس با استفاده از کدها و نکات بالا بتوانید وردپرس خود را با تمامی مرورگرهای موجود چه در گجت ها و چه در Pc ها، همگام کنید.
موفق باشید…