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

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

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

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

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

قبل هر تغییر و رفتن به ادامه از سایت خود یک نسخه پشتیبان تهیه نمایید

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

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

var isOpera = !!(window.opera &amp;&amp; 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’) &gt; 0;//check for safarivar isChrome = !isSafari &amp;&amp; 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";

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

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

دوستان امیدوارم براتون مفید بوده باشه

منبع : قالب وردپرس

پاسخ دهید

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