امروز : چهارشنبه ۲ اسفند ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

یکی از انتظاراتی که کاربران از وب سایت خود دارند ، همگام بودن با تمام مرورگر هاست و اینکه در همه ی حالات به خوبی نمایش داده شود. اما گاهی اوقات می بینیم که همه چیز به خوبی پیش نمیرود و سایت با مشکل روبه رو می شود. پس در این مقاله میخواهیم به همگام سازی قالب وردپرس در همه ی مرورگر ها بپردازیم.و این که چطور می توان وردپرس را با مرورگر ها همگام ساخت.

هماهنگ کردن وردپرس با همه ی مرورگر ها:

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

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

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

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

نکته : حتما قبل از اعمال تغییرات روی ساییتان نسخه پشتیبان یا بک آپ از  آن بگیرید.

کد زیر در فایل 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

 

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

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

برای تشخیص این موضوع نیز از روشی همانند روش قبل استفاده می کنیم ، کد زیر در فایل 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');

– چک کردن موبایل هایی با سیستم عامل Android:

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";

 

کد های بالا این امکان را به شما میدهد که استایل های خاصی را روی المنت های مختلف مانند 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 &lt; 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=”۱۰۰%”; }//end for loop.

 

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

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

در اخر این نکته حائز اهمیت است که این روش فقط برای سایت های وردپرسی نیست و برای همه ی سایت ها قابل استفاده است.

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

 

 

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 165 بار دسته بندی : آموزش وردپرس دیدگاه : ۰ تاريخ : ۱۱ بهمن ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

دیدگاه کاربران تعداد دیدگاه : ۰