Telefonlarda iyi çalışmasını istediğiniz bir WordPress sitesi oluştururken, muhtemelen her şeyin ekrana sığdığından ve hızlı yüklendiğinden emin olmaya odaklanırsınız.
Ancak birçok kişinin gözden kaçırdığı küçük bir ayrıntı var: telefonunuzun adres çubuğunun rengi (web sitesi adreslerini yazdığınız üstteki çubuk). Bu ayrıntıyı doğru yapmak, sitenizin daha cilalı ve düzenli görünmesini sağlar ve görsel markanızı güçlendirebilir.
Sayısız WordPress site sahibinin web sitelerini mobil kullanıcılar için daha iyi hale getirmelerine yardımcı olduk. Öğrendiğimiz bir numara mı? Adres çubuğu renginizi web sitenizin tasarımıyla eşleştirmek her şeyi daha profesyonel gösterir.
Bu kılavuzda, mobil adres çubuğu renginizi WordPress sitenizin görünümüne uyacak şekilde değiştirmenin en kolay yolunu göstereceğiz
Mobil Tarayıcıda Adres Çubuğu Rengini Eşleştirme Neden Yapılır?
Duyarlı bir WordPress teması sitenizi mobilde işlevsel hale getirirken, adres çubuğu rengini eşleştirmek marka sunumunuzu bir adım öteye taşır.
Bu, web sitenizin daha çok yerel bir uygulama gibi hissetmesini sağlayan daha cilalı, özel bir görünüm oluşturur.
Görsel ayrıntılara gösterilen bu özenin gerçek bir etkisi vardır. Örneğin, Adobe'nin çalışmaları, insanların %38'inin tasarım çekici değilse bir web sitesiyle etkileşimini keseceğini gösteriyor.
Tarayıcının adres çubuğunun sitenizin renk şemasıyla eşleşmesini sağlayarak, daha uyumlu ve profesyonel bir kullanıcı deneyimi oluşturursunuz, bu da ziyaretçilerinizle güven oluşturmaya yardımcı olur.
Bunu söyledikten sonra, mobil tarayıcıdaki adres çubuğunu WordPress temanıza nasıl kolayca uyumlu hale getireceğinize bakalım.
Not: Bu özellik, iOS'ta Safari ve Android'de Google Chrome dahil olmak üzere çoğu modern mobil tarayıcı tarafından desteklenir. Bir ziyaretçi eski, desteklenmeyen bir tarayıcı kullanıyorsa, sitenizde herhangi bir sorun yaratmadan bu ayarı basitçe yok sayacaktır.
Mobil Tarayıcıda Adres Çubuğunun Rengini WordPress Sitenize Uyacak Şekilde Değiştirme
Tema dosyanıza veya çocuk 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.
Ancak, en küçük bir hata bile web sitenizi bozabilir ve erişilemez hale getirebilir.
Bu nedenle WPCode kullanmanızı öneririz. Kapsamlı testlerden sonra, bunun en iyi WordPress kod parçacığı eklentisi ve kodunuzu web sitenize eklemenin en güvenli yolu olduğuna karar verdik.
Eklenti hakkında daha fazla ayrıntı için WPCode incelemimize göz atabilirsiniz.
İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Not: WPCode eklentisinin bu eğitimde kullanabileceğiniz ücretsiz bir sürümü de bulunmaktadır. Ancak, ücretli plana yükseltme, kod parçacığı kitaplığı, koşullu mantık ve daha fazlası gibi özelliklere erişmenizi sağlayacaktır.
Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan Kod Parçacıkları » + Parçacık Ekle sayfasını ziyaret edin.
Burada, 'Özel Kodunuzu Ekle (Yeni Kod Parçacığı)' seçeneğinin altındaki 'Kod Parçacığını Kullan' düğmesine tıklayın.
Bu sizi, kod parçacığına bir ad ekleyerek başlayabileceğiniz 'Özel Kod Parçacığı Oluştur' sayfasına götürecektir. Bu ad ön uçta gösterilmeyecek ve yalnızca sizin kimliğiniz içindir.
Ardından, görünen komut isteminden kod türü olarak 'HTML Snippet'i seçin.
Şimdi tek yapmanız gereken aşağıdaki kod parçasını kopyalayıp 'Kod Önizleme' kutusuna yapıştırmak:
<meta name="theme-color" content="#ff6600" />
Bunu yaptıktan sonra, seçtiğiniz rengin onaltılık kodunu kodun content= satırının yanına ekleyebilirsiniz.
Bu renk daha sonra mobil tarayıcıdaki adres çubuğunuz için kullanılacaktır.
Profesyonel İpucu: Adobe Photoshop veya Gimp gibi herhangi bir görüntü düzenleme yazılımını kullanarak bir rengin HEX değerini alabilirsiniz.
Özel bir yazılım gerektirmeyen daha hızlı bir yöntem için, ücretsiz bir çevrimiçi renk seçiciyi veya hatta sitenizden tam hex kodunu bulmak için web tarayıcınızın yerleşik "İncele" aracını kullanabilirsiniz.
Bundan sonra, 'Ekleme' bölümüne aşağı kaydırın ve 'Otomatik Ekle' modunu seçin.
Bu şekilde, kod etkinleştirildiğinde web sitenizde otomatik olarak çalıştırılacaktır.
Son olarak, yukarı kaydırın ve 'Etkin Değil' anahtarını 'Etkin' olarak değiştirin.
Ardından, ayarlarınızı saklamak ve kodu çalıştırmak için 'Snippet Kaydet' düğmesine tıklayın.
Mobil Uyumlu Bir WordPress Sitesi Oluşturmak İçin Bonus İpuçları
Adres çubuğu rengini değiştirmek harika bir başlangıçtır, ancak gerçekten mobil uyumlu bir web sitesi oluşturmak birkaç adım daha içerir.
Google gibi arama motorları mobil öncelikli indekslemeyi önceliklendirdiği için, iyi bir mobil deneyim SEO'nuz için hayati önem taşır. Nitekim, mobil cihazlar tüm internet trafiğinin çoğunluğunu oluşturmaktadır.
Bu ziyaretçiler için sitenizi iyileştirmeye yönelik bazı ek ipuçları şunlardır:
- Duyarlı Bir Tema veya Sayfa Oluşturucu Kullanın: Temeliniz, farklı ekran boyutlarına uyum sağlayan duyarlı bir WordPress teması olmalıdır. Daha fazla kontrol için, SeedProd (kodlama gerektirmeden özel mobil uyumlu düzenler oluşturmanıza olanak tanıyan görsel bir sayfa oluşturucu) gibi bir eklenti kullanabilirsiniz.
- Mobil Uyumlu Formlar Oluşturun: İletişim formlarınızın, giriş formlarınızın ve anketlerinizin küçük bir ekranda doldurulmasının kolay olduğundan emin olun. Şablonları başlangıçtan itibaren mobil cihazlar için optimize edildiği için WPForms (sürükle ve bırak form oluşturucu) gibi bir eklenti öneriyoruz.
- Görselleri ve Medyayı Optimize Edin: Büyük görseller mobil bağlantılarda sitenizi yavaşlatabilir. Yüklemeden önce görsellerinizi web için yeniden boyutlandırdığınızdan ve web için sıkıştırdığınızdan emin olun.
- Site Hızına Odaklanın: Görsellerin ötesinde, hızlı bir WordPress barındırma sağlayıcısı kullanarak, yorumlar için tembel yüklemeyi etkinleştirerek ve bir önbellekleme eklentisi kullanarak sitenizi hızlandırabilirsiniz.
Daha fazla bilgi edinmek için mobil uyumlu bir WordPress sitesi oluşturmanın yolları hakkındaki tam eğitimimize bakın: mobil uyumlu bir WordPress sitesi oluşturmanın yolları.
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 sitenizin renklerini nasıl özelleştireceğinize dair başlangıç rehberimizi ve WordPress için en iyi sayfa oluşturucu eklentileri hakkındaki uzman seçimlerimizi de görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Julie
Mobil sekmenin web sitesinin en üst başlığıyla eşleşen görünümünü seviyorum, bu yüzden bunun bir yolunu arıyordum. Tüm bu talimatları izledim, ancak sitemi mobilde görüntülediğimde hiçbir şey değişmedi. Herhangi bir öneriniz var mı?
WPBeginner Desteği
Telefonunuz karanlık modda mı yoksa sitenizin temasının belirlediği stilin üzerine yazan başka bir stil mi kullanıyor? Bu, telefonunuz sitenizin belirlediği önceliği alacağı için stilin bu yöntemle ayarladığınızla eşleşmemesinin en yaygın nedenidir.
Yönetici
Pragati kumar sheel
Harika. Navigasyon çubuğunu da değiştirmemize yardımcı olabilir misiniz? Birkaç sitede bunu uyguladıklarını gördüm.
WPBeginner Desteği
Tema navigasyon çubuğunun kendi tasarımı ve ayarları olduğundan, öncelikle belirli temanızın desteğiyle görüşmek isteyeceksiniz.
Yönetici
Dennis Muthomi
Bunu o zamanlar uyguladığımı hatırlıyorum. Günümüzde işler değişti, kullanıcı arayüzü o zamankinden tamamen farklı görünüyor.
Mrteesurez
Bunu nasıl yapabileceğimi arıyordum, bu gönderide keşfettim. Sadece tek bir kod satırının bu sihri yapmasına şaşırdım. İşlevselliği beğendiğim için sitemde uygulayacağım.
Jiří Vaněk
Talimatlar için teşekkürler. Web sitemde kullandım ve harika çalışıyor. Keşke yalnızca mobil Chrome'da çalışmasaydı.
WPBeginner Desteği
Maybe in the future it will be more likely for desktop browsing.
Yönetici
Jiří Vaněk
Talimatlar için teşekkürler. Onları web sitemde kullandım ve şimdi mobil cihazlardaki Chrome tarayıcısı bunu web sitesinin başlığının renkleriyle görüntülüyor. Çok daha iyi görünüyor. Muhtemelen mobil Chrome dışındaki başka hiçbir tarayıcı bunu desteklemiyor, bu da yazık.
WPBeginner Desteği
Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often
Yönetici
Jiří Vaněk
Umarım zamanla daha fazla tarayıcı bunu destekler, çünkü şu ana kadar bu işlevi yalnızca mobil Chrome'da doğruladım. Tüm mobil tarayıcılar bunu yapabilse harika olurdu çünkü bu sadece web'in daha iyi görünmesini sağlamakla kalmaz, aynı zamanda çok fazla kişi kullanmadığı için benzersiz bir dokunuş da ekler. Umarım gelecekte bunu daha fazla tarayıcıda görürüz.
Mrteesurez
Kesinlikle! Sitelere benzersiz bir dokunuş katıyor ve onları ziyaretçiler için daha profesyonel ve çekici hale getiriyor. Chrome bunu ilk benimsemiş olsa da, şimdi Vivaldi gibi diğer tarayıcıların da bunu benimsediğini fark ettim. Gözleminiz için teşekkürler.
Ankit Sahu
Kesinlikle çalışıyor
Bunun için teşekkürler
WPBeginner Desteği
Rehberimizin yardımcı olmasına sevindik!
Yönetici
Sarah
Bu çalışmayı durdurmuş gibi görünüyor… Bunu Şubat ayında web siteme uyguladım ve başka bir tanesine de uyguladım… yeni olanı kontrol ettiğimde çalışmıyor ve eskisi de çalışmıyor! Chrome mobil uygulamasında burada bir şey mi değişti?
WPBeginner Desteği
Tarayıcınız için koyu modu kullanıyorsanız, Chrome bu ayarı geçersiz kılacaktır.
Yönetici
Naveen Rana
Tema veya alt temanın header.php dosyası nerede bulunur?
WPBeginner Desteği
Tema dosyalarınızı Görünüm>Tema Düzenleyici altında, barındırma sağlayıcınızın dosya yöneticisini kullanarak veya aşağıdaki kılavuzumuzu izleyerek bir FTP aracı kullanarak bulabilirsiniz:
https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
FTP veya barındırıcınızın dosya yöneticisi için, wp-content>Themes altında aktif temanızla aynı ada sahip klasörü bulmak isteyeceksiniz.
Yönetici
Manshant Singh
Harika bir yazı ve çalışıyor ama kategori sayfasında çalışmıyor ve bir gönderiyi açtığımda.
WPBeginner Desteği
Belirli temanızın desteğiyle, bu sayfalara farklı bir başlık stili atanmadığından emin olmak isteyebilirsiniz.
Yönetici
Aditya Savita
Her şeyden önce bu harika eğitim için teşekkürler ama şimdi bir sorunla karşı karşıyayım, sitemin ana sayfasında adres çubuğu rengi görünmüyor. Sitemin ana sayfası hariç tüm sayfalarında ve gönderilerinde mükemmel bir şekilde görünüyor.
Şimdi ne yapmalıyım? Lütfen yardım edin!
WPBeginner Desteği
Ayarlarınızı geçersiz kılan ana sayfa şablonunda ayarlanmadığından emin olmak için belirli temanızın desteğiyle görüşmek isteyebilirsiniz.
Yönetici
Almesh
Tek seferde halletmeyi başardım. Teşekkür ederim
WPBeginner Desteği
Glad our guide was helpful
Yönetici
Craige Wilson
Güncelleme zaman alıyor mu?
WPBeginner Desteği
Olabilir ve tarayıcı önbelleği de değişikliği geciktirebilir.
Yönetici
Ebrahim Talebi
Çok teşekkürler.
Ancak, kullanıcının telefonunda her şeyi geçersiz kılan koyu modu etkinleştirmesi durumunda bu hilenin işe yaramayacağını unutmayın. (Bazı telefonlarda koyu mod adlı bir seçenek bulunur)
WPBeginner Desteği
Thank you for sharing that in case someone ran into that issue
Yönetici
Arif
Akıl Baştan Alan ve En Basit
WPBeginner Desteği
Glad our guide was helpful
Yönetici
kafi
Sadece şunu söylemem gerekiyordu dostum,
sizler en İYİSİNİZ.
WPBeginner Desteği
Thank you, glad you like our content
Yönetici
Fred
Ekibinizden bir başka çok kolay öğretici!
Adres çubuğuna gradyan rengi eklemek istiyorum.
Mümkün mü?
WPBeginner Desteği
Bu yöntemle şu anda mümkün değil.
Yönetici
Fred
Thanks for your reply
Valli M
Çok teşekkür ederim :)
WPBeginner Desteği
You’re welcome
Yönetici
Amit Ayalon
Çok iyi çalışıyor! Kurulumu çok kolay.
Çok teşekkür ederim!
WPBeginner Desteği
You’re welcome, glad our guide could be helpful
Yönetici
Rafael
Harika çalışıyor!
teşekkürler
WPBeginner Desteği
Glad our guide was helpful
Yönetici
Sunil Ilanthila
Adres çubuğu rengi değişti ancak metin siyah, Beyaz olmasını istiyorum, nasıl?
WPBeginner Desteği
Aksi bir şey duymadığım sürece, bu sizin belirlediğiniz bir renk değil, mobil tarayıcı tarafından belirlenir.
Yönetici
Deborah
Teşekkür ederim. Yapması çok hızlı ve kolay ve web siteme oldukça şık bir görünüm kazandırıyor.
WPBeginner Desteği
Glad our tutorial could help
Yönetici
Rohit
Bana yardım edebilecek biri var mı? Sadece Chrome'da mı çalışır ve asp.net için de kullanılabilir mi?
WPBeginner Desteği
Şimdilik sadece chrome'da çalışacak.
Yönetici
Nasim
Elementor Page Builder Kullanılıyorsa Nasıl Yapılır
Syaz Amirin
Aynı. Aynı işlem demek istedim, Elementor kullanırken bile.
M.Surana
Bunun için bir kod parçacığı var mı?
Philarpy
Harika, bende de çalışıyor. Teşekkürler.
Mark
brilliant, 2 minute job and works a treat! Thanks
Phil Duffney
Çok teşekkür ederim, bu büyük bir yardımdı!
Nitish
Android Kit Kat'ta da çalışıyor… Sanırım Chrome'u güncellediler…
JEEiEE
Teşekkürler
ama iphone ve windows ne olacak
Craig Jon Smith
Weebly'de benim için harika çalıştı. Kodla uğraşmak yerine ayarlar'a gidin ve tam olarak başlık kodu yazan bölüme yapıştırın. İki siteye de yaptım, şimdi bir tane kaldı.
Diego
Çok güzel… ve çalışıyor! Ama metnin beyaza dönmesini nasıl sağlarız?
Taylor
Çok teşekkürler! Tam aradığım şeydi ve tarif ettiğiniz gibi çalıştı!
Akash gupta
Bu kodu, kapanış etiketinden hemen önce temanızın veya alt temanızın header.php dosyasına eklemeniz yeterlidir.
ama bir web sitesinde çalışmıyor. neden?
ethann
Android sürüm 5.0 ve üstü sürümlerde çalışıyor gibi görünüyor
enack
Harika ipucu, sitem için harika çalıştı (siteniz her zaman yaptığı gibi) eğer iPhone'lar için de kod bulursanız bana bildirin ama yine de şikayet edemem. Teşekkürler!
İrfan abbas
Bu yöntem gazete 7 temalarında çalışabilir mi?
Hamid Roshaan
Tam olarak bilmek istediğim şey
Thomyum
Harikasın!
zakaria
Merhaba, bu ipucu için teşekkürler ama blogger şablonlarında çalışıyor mu? Evet ise nasıl eklenir? Birçok kez denedim ama blogger hep hata veriyor.
Saikot Hc
Harika patron! Teşekkürler…!!
Xaif
Benim için işe yaramadı. Eleven40 child theme kullanıyordum ama çalışmıyor
Queven
Merhaba! Hangi tarayıcılarda destekleniyor?
WPBeginner Desteği
Android cihazlarda Google Chrome.
Yönetici
Terri
Bunu sevdim! İpucu için teşekkürler
dhiravat
Çok uygulanabilir bir numara. Teşekkürler!
Alessio
Bu gerçekten harika! Teşekkürler!
Gerard Jimenez
Harika bir bilgi, sitemi yeni değiştirdim.
Bobby
Nice tip. Let’s figure out how to do that for all browsers on mobile.
Shu
Thanks. Much appreciated
jehangir
Çok bilgilendirici.
Ahmad Fatah
Wow look simple.. i will try on my blog.
Terima Kasih