تا حالا دقت کردی وقتی بعضی سایتها رو توی موبایل یا کامپیوتر باز میکنی، رنگ نوار بالا (همون تب مرورگر) همرنگ با برند اون سایت شده؟ اگه دلت میخواد توی سایت وردپرسی خودت هم این افکت جذاب رو داشته باشی، این آموزش کوتاه و ساده دقیقاً یادت میده چطور تغییر رنگ نوار تب مرورگر در وردپرس بدون کدنویسی رو انجام بدی — حتی اگه اصلاً بلد نباشی کدنویسی چیه یا header.php کجاست!
اصلاً نوار تب مرورگر چیه و چرا باید رنگش رو تغییر بدیم؟
وقتی کاربر سایتت رو باز میکنه، مرورگر (مخصوصاً توی موبایل) یه نوار بالا داره که اسم سایت و گاهی آیکون توش میاد. این نوار به طور پیشفرض خاکستری یا بیرنگه. ولی تو میتونی با یه خط کد ساده رنگش رو عوض کنی. این کار باعث میشه ظاهر سایتت خاصتر بشه و حس اعتماد و حرفهای بودن رو به بازدیدکننده منتقل کنه.
تغییر رنگ نوار تب مرورگر در وردپرس
روش 1 – اگه از المنتور پرو استفاده میکنی
اگه از المنتور پرو برای ساخت وبسایتت استفاده کردی، باید این مراحل رو به ترتیب طی کنی:
وارد بخش تنطیمات سایت المنتور شو
وقتی تو یه صفحه، گزینه ویرایش با المنتور رو انتخاب میکنی، در پنجره جدید از قسمت بالا سمت راست، گزینه تنظیمات سایت (Site Settings) رو انتخاب کن.
از منویی که باز شده، گزینه پس زمینه رو انتخاب کن
تو بخش تنظیمات، گزینه پس زمینه رو انتخاب کن. حواست باشه که باید نسخه المنتور پرو رو داشته باشی و توی نسخه رایگان این گزینه نیست.
در بخش پس زمینه مرورگرهای موبایل، رنگ مورد نظرت رو انتخاب کن.
حالا میتونی توی بخش “پس زمینه مرورگرهای موبایل” کد رنگ رو وارد کنی و بعدش تنظیمات رو ذخیره کن. تمام! حالا وقتی سایتت رو توی موبایل باز میکنی، تغییر رنگ نوار تب مرورگر رو میبینی و تب مرورگرت به رنگ دلخواهی که انتخاب کردی درمیاد.
روش 2 – اگه مستقیما میخوای کد بنویسی
اگه میدونی فایلهای قالب چیه و مشکلی با کدنوشتن نداری، میتونی کد رو مستقیم به فایل header.php اضافه کنی.
اگه قالبت اجازه ویرایش پرونده رو از طریق پیشخوان وردپرس میده، باید این مراحل رو به ترتیب طی کنی:
-
از طریق پیشخوان وردپرس، برو به نمایش > ویرایشگر پرونده پوسته
-
از منوی سمت چپ، سربرگ پوسته (header.php) رو انتخاب کن.
-
این خط کد رو آخر این فایل اضافه کن و روی دکمه “به روزرسانی پرونده” کلیک کن:
<“meta name=”theme-color” content=”#805CEB>
به جای 805CEB#، کد رنگ دلخواهت رو بذار. میتونی از طریق وبسایتهایی مثل htmlcolorcodes.com یا imagecolorpicker.com این کد رو پیدا کنی. البته از طریق نرمافزارهای گرافیکی مثل فوتوشاپ هم میتونی اینکار رو انجام بدی.
🧠 چند نکته مهم در تغییر رنگ نوار تب مرورگر
- ممکنه به دلیل نصب افزونه امنیتی یا چون خود قالبت این امکان رو مخفی کرده، گزینه “ویرایشگر پرونده پوسته” رو در قسمت نمایش توی پیشخوان وردپرس نبینی. اگه این اتفاق افتاده باید بری داخل کنترل پنل هاستت (Cpanel یا Directadmin)، و از مسیر public_html/wp-content/themes دنبال اسم پوشه قالبت بگردی. داخل اون پوشه فایل header.php رو مشاهده میکنی و از اونجا میتونی کدی که بالاتر قرار دادیم رو وارد کنی.
- در برخی موارد، این ویژگی ممکنه عمل نکنه و رنگ تب تغییری نمیکنه. نحوه عملکرد تغییر رنگ نوار تب مرورگر رو میتونی تو این جدول ببینی
| دستگاه/مرورگر | رفتار |
|---|---|
| اندروید + Chrome | ✅ رنگی میشه (هم در تب، هم در task switcher) |
| اندروید + Firefox | ✅ رنگی میشه (اگر theme-color داشته باشی) |
| Samsung Internet (اندروید) | ✅ پشتیبانی میکنه |
| iOS + Safari | ❌ این تگ رو نادیده میگیره، مگر از apple-mobile-web-app-status-bar-style استفاده کنی |
| iOS + Chrome | ❌ از Safari WebView استفاده میکنه → رنگی نمیشه |
| دسکتاپ Chrome, Firefox, Edge | ❌ تأثیری نداره، نوار آدرس رنگی نمیشه |
نتیجهگیری
تو این مقاله از دو روش، یکی بدون نیاز به کدنویسی و یکی به همراه اون، تغییر رنگ نوار تب مرورگر در وردپرس رو با هم بررسی کردیم. اگه باز هم از این نوع ترفندهای بهبود ظاهر و عملکرد سایت میخوای یاد بگیری، میتونی یه سر به مطالب آموزشی ما بزنی تا به سایر مقالات هم یه نگاه بندازی. اگه هم واسه بهبود عملکرد تخصصی وبسایتت مشاوره رایگان میخوای، همکاران ما در بخش پشتیبانی لئونیک 24 ساعته آماده شنیدن حرفات و کمک کردن بهت هستند.
سوالات متداول
آیا میتوان رنگ نوار تب مرورگر را با کدنویسی تغییر داد؟
بله. کافی است کد <meta name="theme-color" content="#کد_رنگ"> را در فایل header.php قالب وردپرس خود اضافه کنید. با این کار رنگ نوار تب مرورگر مطابق رنگ انتخابی شما تغییر میکند.
بدون کدنویسی چطور میتوان رنگ نوار تب مرورگر را تغییر داد؟
اگر از المنتور پرو استفاده میکنید، میتوانید در تنظیمات سایت > پسزمینه، رنگ نوار مرورگرهای موبایل را انتخاب کنید. این روش سریع و بدون نیاز به ویرایش فایلهای قالب است.
آیا همه مرورگرها این تغییر رنگ را نمایش میدهند؟
مرورگرهای موبایل اندروید مثل Chrome، Firefox و Samsung Internet رنگ را نشان میدهند.
مرورگر iOS Safari و iOS Chrome به صورت پیشفرض این ویژگی را پشتیبانی نمیکنند و نیاز به تگهای خاص دیگری دارد.
مرورگرهای دسکتاپ (Chrome, Firefox, Edge) رنگ نوار آدرس را تغییر نمیدهند.
اگر گزینه ویرایش فایل قالب در پیشخوان وردپرس فعال نبود چه کنم؟
ممکن است افزونههای امنیتی یا قالب شما این گزینه را مخفی کرده باشند. در این صورت میتوانید با ورود به کنترل پنل هاست (Cpanel یا DirectAdmin)، فایل header.php قالب خود را از مسیر public_html/wp-content/themes/نام_قالب پیدا کرده و کد مربوطه را اضافه کنید.
چگونه کد رنگ دلخواه برای نوار تب مرورگر پیدا کنیم؟
میتوانید از وبسایتهایی مثل htmlcolorcodes.com یا imagecolorpicker.com و یا نرمافزارهای گرافیکی مثل فتوشاپ، کد رنگ مورد نظر خود را پیدا کنید و در تگ meta جایگذاری کنید.
