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

زمانی که شما تصمیم به طراحی و راه اندازی یک سایت می گیرید، به دنبال یک cms یا سیستم مدیریت محتوایی خوب هستید که بتواند نیاز شما را برطرف سازد که گاهی به دلیل ویژگی هایی که وردپرس در اختیارتان قرار می دهد این cms را انتخاب می کنید. سیستم محتوایی وردپرس در عین ساده بودن بسیار حرفه ای عمل می کند. شما سایت خود را با قالب وردپرس طراحی می کنید و تمام تلاش خود را انجام می دهید تا آن را به بهترین شکل نمایش دهید، اما گاهی عدم تطابق با تمامی مرورگرها باعث درگیر شدن ذهن ما خواهد شد. بزرگترین و به جاترین انتظاری که از یک سایت وردپرسی می توان داشت این هست که در همه مرورگرها به خوبی نمایش داده شود. همه کاربران وردپرس، چه کسانی که یک سایت ساده را راه اندازی می کنند و چه کسانی که به طور حرفه ای برنامه نویسی کرده و افزونه و قالب وردپرس ایجاد می کنند و  به طراحی حرفه ای سایت می پردازند، انتظار دارند که سایت آنها بدون عیب باشد. اما گاهی همه چیز به درستی پیش نمی رود و ممکن است سایت در یک مرورگر خاص به صورت استاندارد نشان داده نشود. پس توجه به این نکته مهم است که سایت و محتوا با همه مرورگرها هماهنگ باشد. در این بخش قصد داریم آموزش هماهنگ سازی سایت وردپرس با مرورگرها را در اختیار شما همراهان همیشگی وبمستر 98 قرار دهیم. پس تا انتهای این بخش از آموزش وردپرس همراه ما باشید.

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

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

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

در ابتدا باید این قابلیت را برای سایت وردپرسی خود ایجاد نمایید که بتواند تشخیص دهد در چه مرورگری توسط کاربران در حال استفاده است. به این منظور یک کد جاوا اسکریپت وجود دارد که به کمک آن می توانید این قابلیت را به سایت خوذ اضافه نمایید، این کار به سادگی و بدون پیچیدگی انجام خواهد شد، اما قبل از انجام هرگونه تغییر از سایت خود نسخه پشتیبان تهیه نمایید. سپس در فایل header.php قالب وردپرس خود، کد زیر را بین دو تگ باز و بسته <script> قرار دهید. این کد همه ی مرورگرهای شناخته شده مانند گوگل کروم، سافاری، فایرفاکس، اینترنت اکسپلورر و … را بررسی نمایید.

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

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

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

استفاده از کدهای جاوا اسکریپت برای تشخیص مرورگر گجت های همراه در وردپرس نیز مانند روش بالا است. برای این کار باید کد زیر را در فایل 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');

شما می توانید بسته به نیاز خود، در کدهای بالا هشدارها را تغییر دهید. به عنوان مثال در کد آخر در سیستم عامل اندروید هشدار 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";

به کمک کدهای فوق می توانید برای element های مختلف مانند div استایل های مختلفی اعمال نمایید. البته باید ID المنت موردنظرتان را داشته باشید. اما در بیشتر مواقع در قالب وردپرس تغییرات براساس نام کلاس انجام می شود.

بهره گیری از شیوه های نامه های مختلف برای دستگاه های مختلف

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

var table_array = document.getElementsByClassName(‘maintd’);//array of main tablesvar table_cnt = table_array.length;//loop thru table_array and set width of ea.: for(i=0;i < table_cnt; i++) { table_array[i].style.width=”۱۰۰%”; }//end for loop.

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

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