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

بازدید : 47
نویسنده : مرتضی براتی
به این مطلب امتیاز بده
مطالعه در 1 دقیقه
انتشار : اردیبهشت ۲۱, ۱۳۹۶
بروزرسانی : تیر ۱۶, ۱۳۹۸
آموزش وردپرس همگام سازی سایت با مرورگر های مختلف

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

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

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

اگر مایل بودید برای همه تلفن های همراه و گجت های غیر رایانه ای از یک حالت استفاده کنید از کد زیر استفاده کنید.

برای چک کردن تلفنهای همراه با برند بلک بری از کد زیر استفاده کنید

برای تلفنهای همراه برند اپل

برای چک کردن تلفنهای همراه مرورگر IE

برای چک کردن تلفنهای همراه با سیستم عامل اندروید

توجه داشته باشید می توانید هشدار هر یک از کد ها را تغییر دهید بطور مثال هشدار android بنابر نیاز خود آن را تغییر دهید
حالا نوبت تنظیم سایت خود در مرورگرهای مختلف است در اینجا باید بیاموزید که چگونه از css در جاوا اسکریپت استفاده کنیم.
در ادامه چند مورد را آورده ایم که می توانید از آن استفاده کنید.

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

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

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

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

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


دیدگاه بگذارید

avatar
  Subscribe  
Notify of
قالب فروشگاهی دیجی کالا

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

Scroll Up
کانال آپارات ما اینستاگرام مبنای وردپرس