Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Mobil Tarayıcıda Adres Çubuğunun Rengini WordPress Sitenizle Eşleşecek Şekilde Değiştirme

Mobil tarayıcılardaki adres çubuğunun rengini WordPress sitenizle eşleşecek şekilde özelleştirmek, markanızın görsel kimliğini geliştirebilir ve daha uyumlu bir kullanıcı deneyimi yaratabilir.

BBC ve Facebook gibi birçok popüler web sitesi, mobil tarayıcılardaki adres çubuğu için kendi marka renklerini kullanıyor. Bu, kullanıcıların tekrar ziyaretlerini teşvik ederek etkileşimi artırmalarına yardımcı oldu.

Yıllar içinde, iş ortağı markalarımızın birçoğunun web sitelerinin adres çubuğu rengini mobil cihazlarda özelleştirdiğini gözlemledik. Bu ince değişiklik, sitelerinin mobil tarayıcılardaki diğer açık sekmeler arasında öne çıkmasına yardımcı olarak kullanıcılar tarafından daha iyi tanınmasını sağlıyor.

Bu makalede, bir mobil tarayıcıdaki adres çubuğunun rengini WordPress sitenizle eşleşecek şekilde nasıl kolayca değiştirebileceğinizi göstereceğiz.

Address bar color in mobile browser for WordPress site

Mobil Tarayıcıda Adres Çubuğu Rengi Neden Eşleşir?

En popüler WordPress temaları mobil uyumludur. Bu, sitenizin mobil cihazlarda harika görünmesini sağlar. Ancak yine de bir web sitesi gibi görünür ve hissettirir.

Adres çubuğunun rengini WordPress sitenizle eşleştirerek yerel uygulama benzeri bir his sağlayabilirsiniz. Bu, kullanıcı deneyimini iyileştirir ve sonuçta satışları ve dönüşümleri artırır.

Color address bars in mobile browser on Android

İyi seçilmiş bir adres çubuğu rengi, web sitenizin daha profesyonel ve görsel olarak çekici görünmesini bile sağlayabilir.

Bunu söyledikten sonra, mobil tarayıcıdaki adres çubuğunu WordPress temanızla nasıl kolayca eşleştirebileceğinizi görelim.

Not: Bu yöntemin şu anda yalnızca Lollipop veya daha yeni sürümleri kullanan Android cihazlardaki Google Chrome web tarayıcısı için çalıştığını lütfen unutmayın.

Mobil Tarayıcıda Adres Çubuğunun Rengini WordPress Sitenizle Eşleşecek Şekilde Değiştirme

Temanızın veya alt temanızın header.php dosyasına kapanış </head> etiketinden hemen önce özel kod ekleyerek mobil tarayıcıdaki adres çubuğu rengini kolayca değiştirebilirsiniz.

Yine de, en küçük bir hata web sitenizi bozabilir ve erişilemez hale getirebilir.

Bu yüzden WPCode kullanmanızı öneriyoruz. Piyasadaki en iyi WordPress kod parçacıkları eklentisidir ve web sitenize özel kod eklemenin en güvenli yoludur.

Öncelikle WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Not: WPCode eklentisinin bu eğitim için kullanabileceğiniz ücretsiz bir sürümü de vardır. Ancak, ücretli plana yükseltme yapmak size kod parçacığı kitaplığı, koşullu mantık ve daha fazlası gibi özelliklere erişim sağlayacaktır.

Etkinleştirmenin ardından WordPress yönetici kenar çubuğundan Code Snippets ” + Add Snippet sayfasını ziyaret edin.

Burada, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’ düğmesine tıklayın.

Add

Bu sizi kod parçacığı için bir ad ekleyerek başlayabileceğiniz ‘Özel Snippet Oluştur’ sayfasına götürecektir. Bu ad ön uçta gösterilmeyecektir ve yalnızca sizin tanımlamanız içindir.

Ardından, sağdaki açılır menüden kod türü olarak ‘HTML Snippet’i seçin.

Choose HTML Snippet option to change the address bar color in mobile browsers

Şimdi tek yapmanız gereken aşağıdaki kod parçacığını kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırmak:

<meta name="theme-color" content="#ff6600" />

Bunu yaptıktan sonra, koddaki content= satırının yanına seçtiğiniz rengin hex kodunu ekleyebilirsiniz.

Bu renk daha sonra mobil tarayıcıdaki adres çubuğunuz için kullanılacaktır.

İpucu: Adobe Photoshop, Gimp, Paint gibi herhangi bir görüntü düzenleme yazılımını kullanarak bir rengin HEX değerini elde edebilirsiniz.

Add Hex code

Bundan sonra, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekleme’ modunu seçin.

Bu şekilde, kod etkinleştirildiğinde web sitenizde otomatik olarak yürütülecektir.

Choose the Auto Insert mode

Son olarak, en üste geri gidin ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin.

Ardından, ayarlarınızı kaydetmek ve kodu çalıştırmak için ‘Snippet’i Kaydet’ düğmesine tıklayın.

Save the code snippet for changing the address bar color in the mobile browser

Mobil Uyumlu WordPress Sitesi Oluşturmak İçin Bonus İpuçları

Mobil uyumlu bir web sitesi oluşturmak için adres çubuğu rengini değiştirmenin yanı sıra başka ipuçlarından da yararlanabilirsiniz. Bunun nedeni Google gibi arama motorlarının mobil öncelikli indekslemeye öncelik vermesidir.

Ayrıca, mobil aramalar masaüstündeki benzerlerine göre %85,8 daha fazla gösterim alarak daha fazla potansiyel müşteri oluşturmanıza yardımcı olur.

Mobil uyumlu bir site oluşturmak için, duyarlı bir WordPress teması veya SeedProd gibi bir sayfa oluşturucu kullanmanızı öneririz.

Ayrıntılar için WordPress’te özel bir temanın nasıl oluşturulacağına ilişkin eğitimimize bakın.

Install theme

Web sitenize iletişim, kayıt ve giriş formları gibi formlar eklemek için WPForms gibi bir eklenti de kullanmalısınız.

Bunun nedeni WPForms’un 1900’den fazla hazır şablon, tam spam koruması ve mobil cihazlar için özel olarak optimize edilmiş olması ve mobil ziyaretçilere birinci sınıf bir deneyim sunmasıdır.

WPForms page title and subtitle

Bunun dışında, büyük resimleri yeniden boyutlandırmalı, hızlı bir barındırma sağlayıcısı kullanmalı, yorumları tembel yüklemeli, mobil uyumlu bir gezinme menüsü oluşturmalı ve çok daha fazlasını yapmalısınız.

Diğer ipuçlarını öğrenmek için mobil uyumlu bir WordPress sitesi oluşturmanın yolları hakkındaki eğitimimize bakın.

Bu makalenin, mobil tarayıcıdaki adres çubuğunun rengini WordPress sitenizle eşleşecek şekilde nasıl değiştireceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress web sitenizdeki renkleri nasıl özelleştireceğinize ilişkin başlangıç kılavuzumuza ve WordPress için en iyi sayfa oluşturucu eklentileri uzman seçimlerimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

69 yorumBir Cevap Bırakın

  1. Jiří Vaněk

    Thank you for the instructions. I used them on my website and it works great. Too bad it only works on mobile Chrome.

    • WPBeginner Support

      Maybe in the future it will be more likely for desktop browsing. :)

      Yönetici

  2. Jiří Vaněk

    Thank you for the instructions. I used them on my website, and now the Chrome browser on mobile displays it with the colors of the website’s header. It looks much better. It’s just a pity that, most likely, no other browser besides mobile Chrome supports it.

    • WPBeginner Support

      Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often :)

      Yönetici

  3. Ankit Sahu

    Absolutely working

    Thanks for this

    • WPBeginner Support

      Glad our guide was helpful!

      Yönetici

  4. Sarah

    This seems to have stopped working… I implemented this on my website back in Feb and I just applied it to another one… upon checking the new one doesn’t work and neither does the old! Did something change here in Chrome mobile app?

    • WPBeginner Support

      If you’re using dark mode for your browser, chrome will override this setting.

      Yönetici

  5. Naveen Rana

    Where to find theme or child theme‘s header.php file?

  6. Manshant Singh

    Great post and it is working but not working on category page and when I open a post.

    • WPBeginner Support

      You would want to check with the support for your specific theme that thee is not a different header styling being assigned to those pages.

      Yönetici

  7. Aditya Savita

    First of all thank you for this great tutorial but now I’m facing a problem the address bar color is not showing on the homepage of my site. It’s perfectly showing on all pages and posts of my site except my homepage.
    What should I do now? Please help!

    • WPBeginner Support

      You may want to check with the support for your specific theme that it is not set on the homepage template that could be overriding your settings.

      Yönetici

  8. Almesh

    I was able to get it done by one shot. thank you

    • WPBeginner Support

      Glad our guide was helpful :)

      Yönetici

  9. Craige Wilson

    Does it takes time to update?

    • WPBeginner Support

      It can and browser caching would also delay the change as well.

      Yönetici

  10. Ebrahim Talebi

    Thanks a lot.
    But, be aware that this trick won’t work if the user has enabled dark mode on its phone because it overrides everything else. (Some phones has an option called dark mode)

    • WPBeginner Support

      Thank you for sharing that in case someone ran into that issue :)

      Yönetici

  11. Arif

    Mind-Blowing and simplest

    • WPBeginner Support

      Glad our guide was helpful :)

      Yönetici

  12. kafi

    I just needed to say man,
    you guys are the BEST.

    • WPBeginner Support

      Thank you, glad you like our content :)

      Yönetici

  13. Fred

    Another very easy tutorial from your team!

    I would like to add a gradient color to the address bar.

    Is it possible?

    • WPBeginner Support

      Not at the moment with this method.

      Yönetici

    • WPBeginner Support

      You’re welcome :)

      Yönetici

  14. Amit Ayalon

    Work very well! super easy to set up.
    Thank you very much!

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Yönetici

  15. Rafael

    Works perfectly!
    thanks

    • WPBeginner Support

      Glad our guide was helpful :)

      Yönetici

  16. Sunil Ilanthila

    Address bar color changed but text is in black, I wan it in Waite, how?

    • WPBeginner Support

      Unless I hear otherwise, that is decided by the mobile browser, not a color you set.

      Yönetici

  17. Deborah

    Thank you. Very quick and easy to do, and gives my website a rather posh look.

    • WPBeginner Support

      Glad our tutorial could help :)

      Yönetici

  18. Rohit

    Anyonebhelp me will it only work in Chrome and can it be used for asp.net also ?

    • WPBeginner Support

      For the moment it will only work on chrome.

      Yönetici

  19. Nasim

    If using elementor Page Builder How To Do That

    • Syaz Amirin

      It’s the same. The same process I meant, even using Elementor.

  20. M.Surana

    Any snippet for this?

  21. Philarpy

    Wonderful, it’s working for me as well. Thanks.

  22. Mark

    brilliant, 2 minute job and works a treat! Thanks ;)

  23. Phil Duffney

    Thank you so much, that was a huge help!

  24. Nitish

    It is working in android kit kat too…I think they updated chrome…

  25. JEEiEE

    Thank you

    but what about iphone and windows

  26. Craig Jon Smith

    Worked great for me on Weebly. Instead of messing with the code just go to settings, and drop it in the section that literally says header code. I’ve done it to two sites, now. One more to go

  27. Diego

    Very nice… and it works! But how do we get the text to to change to white?

  28. Taylor

    Thanks so much! Just what I was looking and worked just the way you described its setup!

  29. Akash gupta

    Simply add this code in your theme or child theme‘s header.php file just before the closing tag.

    but it is not work in one website . why?

  30. ethann

    looks like it works on android version 5.0 and above

  31. enack

    Great tip, worked great for my site (as your site always does) do let me know if you get the code for iphones also but either way can’t complain. Thanks!

  32. Irfan abbas

    Can this method work on newspaper 7 themes.

    • Hamid Roshaan

      Exactly what I want to know

  33. zakaria

    hello, thanks for this tip but is that working on blogger s templates? if yes how to add it? i ve tried many times but blogger always showing error.

  34. Saikot Hc

    Awesome boss! Thanks…!!

  35. Xaif

    It didn’t work for me. I was having eleven40 child theme but it is not working

  36. Queven

    Hi! It’s supported in what browsers?

  37. Terri

    Love this! Thanks for the tip

  38. dhiravat

    Very applicable trick. Thanks!

  39. Alessio

    This is really cool! Thanks!

  40. Gerard Jimenez

    Great piece of info, just changed my site.

  41. Bobby

    Nice tip. Let’s figure out how to do that for all browsers on mobile. :-)

    • Ahmad Fatah

      Wow look simple.. i will try on my blog.
      Terima Kasih :D

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.