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


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

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

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

var isOpera = !!(window.opera && window.opera.version); //Check for Opera 8.0+var isIE = /*@[email protected]*/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

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

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

با کد بالا استایل خاصی را به المنت ها خاص دهید البته باید ای دی المنت را داشته باشید. اغلب در وردپرس تغییرات بر اثر کلاس ها انجام می گیرد.
روش استفاده از نام کلاس در 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 &lt; table_cnt; i++) { table_array[i].style.width="100%"; }//end for loop.

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

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

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.

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

ویرایش شده توسط کوروش عباسی شاد باشید 🙂

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Solve : *
27 + 5 =


قالب وردپرس و افزونه وردپرس حرفه ای