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

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

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

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

نکته مهم!

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

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

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

حال شما باید هشدار هر یک از کد ها را با توجه به نیاز خود تغییر دهید. یعنی برای مثال در کد آخر اگر سیستم عامل اندروید باشد، هشدار تعبیه شده Android است که میتوانید با توجه به نیاز خود آن را تغییر دهید.

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

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

document.getElementById('divID').style.top="45px";document.getElementById('divID').style.marginRight="-14px";document.getElementById('divID').style.height="200px";document.getElementById('divID').style.width="300px";

با استفاده از کد های فوق شما میتوانید استایل های خاصی را برای المنت های متفاوت همانند div اعمال کنید البته برای این کار نیاز به آی دی المنت مورد نظر خود دارید اما اغلب در وردپرس نیاز است تغییرات بر حسب نام کلاس اعمال شوند. روش استفاده از نام کلاس در css و js در مثال زیر آورده شده است:

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="100%"; }//end for loop.

.

در مثال فوق ما یک شماره از متغیر المنت های یک جدول را از درون حلقه نوشته شده با استفاده از نام کلاس دریافت کردیم و سپس در یک حلقه و به صورت پویا عرض هر یک از المنت ها را تغییر دادیم. این کد یک مثال برای تغییرات پویا در نمایش و همگام سازی وردپرس با مرورگرها و در تمامی دستگاه های هوشمند است.اما یک روش جالبتر این است که شما از راهکار فوق برای آرایه ای از div ها و یا المان های دیگری که دارای نام کلاس هستند استفاده کنید.

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

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

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=”100%”; }//end for loop.

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

جمع بندی

در انتها و در خصوص کلیت مطالب ذکر شده اشاره به چند نکته ضروری است!
دوستان آموزش فوق فقط محدود به سیستم وردپرس نیست و در واقع تنها برای همگام سازی وردپرس با مرورگرها نمی باشد  و شما میتوانید بر روی هر سایت دیگر نیز آن را اعمال کنید فقط کافیست که دانش کد نویسی css و js خود را تقویت کنید اما امیدواریم در انتهای این آموزش توانسته باشید راه خود در خصوص همگام سازی سایت با مرورگر ها و دستگاه های هوشمند را بیابید و سایت خود را با تمامی مرورگر ها و گجت ها سازگار نمائید.

پیروز باشید