Mudah! Cara Mengganti Warna Address Bar di Browser Mobile Sesuai Tema WordPress Anda

Apakah Anda ingin menngetahui cara mengganti warna address bar di browser mobile agar sesuai dengan tema situs WordPress Anda? Banyak situs populer menggunakan warna khas mereka untuk address bar di browser mobile. Ini menciptakan pengalaman yang lebih kohesif dan sesuai brand, yang dapat meningkatkan interaksi pengguna.

Jika Anda membuka blog Mas Trigus ini melalui browser handphone, tentu akan melihat warna address bar agak kehijauan (selama belum saya ganti). Secara default, bar alamat URL tersebut berwarna putih, namun kita bisa menggantinya dengan warna lain. Caranya mudah.

Pada artikel ini, kita akan membahas cara mudah mengubah warna address bar di browser mobile agar sesuai dengan tema situs WordPress Anda.

Mengapa Penting Mengubah Warna Address Bar di Browser Mobile?

Sebagian besar tema WordPress sudah mendukung tampilan responsif pada perangkat mobile, membuat situs Anda terlihat baik di layar yang lebih kecil. Namun, masih terasa seperti tampilan website biasa.

Dengan mencocokkan warna address bar dengan tema WordPress, Anda bisa memberikan nuansa seperti aplikasi asli yang lebih menarik. Hal ini meningkatkan pengalaman pengguna, yang pada akhirnya meningkatkan konversi.

Selain itu, warna address bar yang dipilih dengan baik dapat membuat situs web Anda terlihat lebih profesional dan menarik secara visual.

Catatan: Metode ini hanya berlaku untuk browser Google Chrome pada perangkat Android dengan sistem Lollipop atau versi yang lebih baru.

Mas Trigus

Cara Mengganti Warna Address Bar di Browser Mobile

Mengganti warna address bar di browser mobile dapat dilakukan dengan menambahkan kode khusus ke file header.php tema atau child theme Anda, tepat sebelum tag penutup </head>.

Namun, perubahan kecil yang salah pada file ini bisa merusak situs Anda dan membuatnya tidak dapat diakses. Oleh karena itu, disarankan menggunakan plugin WPCode yang lebih aman dan memudahkan penambahan kode tanpa risiko merusak situs.

Langkah-langkahnya:

1. Install WPCode Plugin
   Pertama, install dan aktifkan plugin WPCode. Ini adalah plugin terbaik untuk menambahkan potongan kode di WordPress. Anda bisa menggunakan versi gratisnya, namun versi premium menyediakan fitur tambahan seperti perpustakaan snippet dan logika kondisional.
2. Tambahkan Custom Code
   Setelah plugin aktif, buka halaman Code Snippets » + Add Snippet di dashboard WordPress Anda. Klik tombol ‘Use Snippet’ di bawah opsi Add Your Custom Code (New Snippet).
3. Masukkan Kode HTML
   Pada halaman pembuatan snippet, pilih tipe kode HTML Snippet. Salin dan tempel kode berikut ke dalam kotak pratinjau kode:

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

Anda bisa mengganti kode warna hex #ffffff dengan warna pilihan Anda sesuai branding situs.

4. Atur Mode Penyisipan Otomatis
   Pada bagian ‘Insertion’, pilih mode Auto Insert sehingga kode akan otomatis dijalankan di situs setelah diaktifkan.
5. Aktifkan Snippet
   Terakhir, aktifkan kode dengan mengubah status dari ‘Inactive’ menjadi ‘Active’ dan simpan snippet Anda.

Cara Mengganti Warna Address Bar di Browser Mobile dengan Mengedit File header.php

Selain menggunakan plugin WPCode, Anda juga bisa langsung mengedit file tema WordPress Anda secara manual untuk mengganti warna address bar di browser mobile. Cara ini sedikit lebih teknis, tetapi tetap cukup mudah jika Anda terbiasa dengan pengeditan file tema.

Berikut adalah langkah-langkah untuk mengganti warna address bar melalui file header.php:

1. Akses Dashboard WordPress
   Masuk ke dashboard admin WordPress Anda dan navigasikan ke Appearance » Theme File Editor. Pastikan Anda membuat cadangan terlebih dahulu sebelum mengedit file tema, karena kesalahan kecil dapat menyebabkan situs Anda tidak dapat diakses.
2. Pilih File header.php
   Setelah berada di editor file tema, cari dan klik pada file header.php di panel sebelah kanan. File ini berisi kode yang mengatur bagian kepala (head) dari situs web Anda, tempat Anda akan menambahkan kode untuk mengubah warna address bar.
3. Tambahkan Kode Warna Address Bar
   Pada file header.php, temukan bagian penutup </head> dan tambahkan kode berikut tepat sebelum tag tersebut:

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

Anda bisa mengganti kode warna hex #ffffff dengan warna pilihan Anda. Misalnya, jika Anda ingin menggunakan warna biru, Anda bisa menggunakan hex code seperti #000000.

4. Simpan Perubahan
   Setelah menambahkan kode, klik tombol Update File untuk menyimpan perubahan pada tema Anda. Perubahan ini akan secara otomatis berlaku, dan address bar di browser mobile akan menggunakan warna yang Anda tentukan saat situs Anda diakses dari perangkat Android dengan Chrome.

Tips Penting:

• Pastikan untuk Membuat Backup: Sebelum mengedit file header.php, selalu pastikan untuk membuat cadangan tema Anda. Ini berguna untuk memulihkan situs Anda jika ada kesalahan.
• Cek di Beberapa Perangkat: Setelah menyimpan perubahan, uji situs Anda di beberapa perangkat Android untuk memastikan warna address bar tampil sesuai dengan yang Anda inginkan.

Dengan cara ini, Anda dapat mengontrol tampilan address bar secara manual tanpa menggunakan plugin tambahan, sehingga memberikan nuansa yang lebih personal pada situs WordPress Anda.

Tips Mengganti Warna Address Bar di Tema Blocksy

Bagi Anda pengguna Tema WordPress Blocksy, cara untuk mengatur warna Address Bar cukup mudah. Karena tidak perlu mengedit file header.php atau install plugin. Ikuti panduan ini:

Pertama silakan masuk ke Dashboard Tema Blocksy, lalu pilih tab Extensions lalu cari Custom Code Snippets dan aktifkan. Akan terlihat seperti gambar di bawah ini. Setelah aktif, klik tombol sesuaikan. Maka Anda akan dibawa ke halaman penyesuaian

Setelah sampai di halaman penyesuaian, cari kolom Header scripts dan tambahkan kode berikut:

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

Ubah kode #ffffff sesuai dengan kode warna Anda. Lalu langkah terakhir simpan attau terbitkan.

Saya menggunakan tema Blocksy PRO karena sejauh ini paling enak digunakan. Selain tampilannya bagus, Blocky mudah dikonfigurasi dan memiliki score bagus ketika di test di Google Speed Insight, Lighthouse dan juga GT Metrik.

Anda bisa melihat demo template Blocksy dan Starter Sites terlebih dahulu sebelum membeli. Jika Anda belum bisa menggunakan versi Pro karena belum bisa membelinya, Anda bisa menggunakan Blocksy versi Free.

Selamat mencoba mengubah tampilan situs Anda!