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

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

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

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

نکته مهم!

اما نکته مهم در این آموزش این است که چگونه وب سایت خود را برای تمامی مرورگر ها همگام سازی کنیم تا محتوای وب سایت در تمامی مرورگر های موجود و مورد استفاده کاربران به درستی نمایش داده شود. برای این منظور روش های بسیار ساده ای موجود است که در ادامه به بررسی هر یک میپردازیم.

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

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

var isOpera = !!(window.opera && window.opera.version); //Check for Opera 8.0+var isIE = /*@cc_on!@*/false || testCSS(‘msTransform’); // See if At least IE6var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf(‘Constructor’) > 0;//check for safarivar isChrome = !isSafari && testCSS(‘WebkitTransform’); //check for chromeif(navigator.product == ‘Gecko’){var isFF=true;}// check for FireFox

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

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

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

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');