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

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

اگر کمی دقت کرده باشید وقتی با مرورگر گوشی وارد بعضی از سایت ها می شوید نوار آدرس بار هماهنگ با قالب سایت و یا برند سایت می شود.این قابلیت از نسخه 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 در منو تنظیمات ایجاد می شود ، کافیست بروی آن کلیک کنید تا به صفحه تنظیمات هدایت شوید.

تغییر رنگ نوار آدرس مرورگرBrowser Theme Color

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

تغییر رنگ نوار آدرس مرورگرBrowser Theme Color

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

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

تغییر رنگ نوار آدرس مرورگرجوملا SIS Theme Color

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

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

پست های مرتبط

ریلیز کننده محصول

محمدحسین نیازی اولش طراحی گرافیکی و رابط کاربری می کرده بعد ها کارشناسی نرم افزارشو گرفته و به کد زنی علاقه مند میشه ، تا اینکه تیم طراحی استودیو لاوان رو راه میندازه و بعدش میره سر وقت آی سی ام اس و الان اون اینجاست تا با تجربه بیش از 12 ساله خودش ، فوت‌وفن‌های خودش رو در اختیار شما قرار بده تا اون‌ها رو در جریان کاری‌تون بگنجونین و مهارت‌هاتون رو ارتقاء بدین.

محمدحسین نیازی
2 دیدگاه تاکنون ارسال شده
  • شیدا خانم
    مهمان
    آموزش خیلی روان و واضح بود و برای منی که به کدنویسی وارد نبودم زیاد ، تونستم به روش کد ، تغییراتو اعمال کنم لطفا اموزش های بیشتری قرار بدید
  • حسام
    مهمان
    من از کد استفاده کردم و اوکی شد عیدتونم مبارک
ارسال نظر
در پاسخ به Some User
تجاری رایگان با عشق
انتشار

یکشنبه, 03 فروردين 1398

بروز رسانی

دوشنبه, 20 مرداد 1402

نسخه

1.2-1.0 - (تغییرات)

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

آی سی ام اس

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