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

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

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

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

حتما بخوانید : نمایش مطالب جدید در وردپرس با Recent Posts Widget With Thumbnails

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

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

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

در ابتدای امر باید سایت شما دریابد که در چه مرورگری توسط کاربر بارگذاری شده و در حال استفاده است. برای این منظور یک کد جاوا اسکریپت وجود دارد که به سادگی این کار را ممکن می سازد. برای استفاده از این کد در مرحله نخست باید از سایت خود نسخه پشتیبان دریافت نمائید و سپس کد ذیل را در فایل 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> قرار گیرد. قطعه کد گفته شده برای تشخیص مرورگر در راستای همگام سازی وردپرس با مرورگرها مورد استفاده قرار گرفته و کاربر برای مشاهده سایت، تمامی مرورگر های معروف و مورد استفاده فعلی از قبیل فایرفاکس، گوگل کروم، سافاری، اینترنت اکسپلورر و… را بررسی می کند. استفاده از کد بالا برای تشخیص مرورگر بهترین روش در این زمینه است! البته شما می توانید از روش های دیگر نیز استفاده کنید که توصیه نمی شود.

حتما بخوانید : جلوگیری از اسپم ها در وردپرس با افزونه Antispam bee

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

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

حتما بخوانید : ساخت صفحه در دست تعمیر برای وردپرس با WP Maintenance Mode

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

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

در مثال فوق ما یک شماره از متغیر المنت های یک جدول را از درون حلقه نوشته شده با استفاده از نام کلاس دریافت کردیم و سپس در یک حلقه و به صورت پویا عرض هر یک از المنت ها را تغییر دادیم. این کد یک مثال برای تغییرات پویا در نمایش و همگام سازی وردپرس با مرورگرها و در تمامی دستگاه های هوشمند است. اما یک روش جالبتر این است که شما از راهکار فوق برای آرایه ای از 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="۱۰۰%"; }//parswp.ir end for loop.

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

جمع بندی

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

پیروز و موفق باشید …