تغییر رنگ نوار آدرس مرورگرهای موبایل در جوملا و وردپرس

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

طرز تهیه تغییر نوار آدرس بار در مروگر
برای انجام اینکار دو راه دارید :

1- استفاده از کد و جایگذاری به صورت دستی

2- استفاده از پلاگین (خیلی آسون و به راحتی آب خوردن )

روش اول : استفاده از کد

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

برای اعمال تغییرات و عملکرد در جوملا و وردپرس کافیست به مسیرهای زیر رفته و کد را قبل از </head> قرار دهید یعنی قبل از اتمام تگ Head

در صورتی که از جوملا استفاده می کنید :

/YOUR-SITE/templates/YOUR-TEMPLATE-NAME/index.php

در صورتی که از وردپرس استفاده می کنید این مسیر را بروید :

/YOUR-SITE/wp-content/themes/YOUR-THEME-NAME/header.php

کد جهت قرار دادن در فایل های بالا :

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ff3364">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ff3364">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ff3364">

برای تغییر رنگ کافیست بجای #ff3364 کد رنگ مورد نظر خودتون رو قرار بدید.در واقع این کد به مرورگر می فهماند که رنگ نوار آدرس سایت شما یعتی در واقع همان رنگ برند سایت شما این رنگی است و باید به آن تغییر پیدا کند.

روش دوم : استفاده از پلاگین

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

خب اول بریم سراغ پلاگین وردپرس

بعد از اینکه پلاگین رو از آی سی ام اس دریافت کردید یک گزینه به نام Browser Color در منو تنظیمات ایجاد می شود ، کافیست بروی آن کلیک کنید تا به صفحه تنظیمات هدایت شوید.

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

و اما در جوملا چطور هست ؟

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

همانطور که در زیر مشاهده می کنید نوار آدرس مرورگر تغییر کرده است و کد رنگی که در این آموزش قرار داده ایم را نمایش می دهد.