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

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

گاهی اوقات پیش می آید که سایت در یک یا چند مرورگر به صورت استاندارد درست نمایش داده نمیشود پس باید توجه داشت که سایت باید با همه مرورگر ها هماهنگ باشد .

در این مقاله ما به شما همراهان سایت تمی چگونگی هماهنگی بین وردپرس و مرورگرهارا آموزش میدهیم .

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

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

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

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

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

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

var isOpera = !!(window.opera && window.opera.version)

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

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

حال اگر میخواهید حالت نمایش را برای تلفن های همراه و گجت های مشابه آن مانند (تبلت ، کتاب خوان و…)نمایش دهد باید از این کد دستوری استفاده کنید

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’)

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

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

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

اگر یک فرد حرفه ای در این حوزه هستید که حتما روش استفاده از جاوا اسکریپت در css را مدانید در غیر این صورت ابتدا باید یادبگیرید چگونه از جاوا اسکریپت در css اتفاده کنید. در پایین مثال هایی برای استفاده جاوا اسکریپت در css  :

.document.getElementById(‘divID’).style.top=”50px”;

document.getElementById(‘divID’).style.marginRight=”-15px”;

document.getElementById(‘divID’).style.height=”300px”;

document.getElementById(‘divID’).style.width=”400px”;

با استفاده از کد های بالا می توانید برای element های مختلف مانند div استایل های مختلفی اعمال نمایید  فقط باید توجه داشته باشید ID المنت مورد نظر را داشته باشید. البته اکثر مواقع در قالب وردپرس ویرایش در نام کلاس انجام میشود.

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

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

برای مثال :

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.

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

سخن پایانی

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