Meningkatkan branding di situs WordPress Anda bisa dimulai dari hal-hal kecil seperti mengganti logo halaman login WordPress. Meski tampak sepele, ini dapat memberikan kesan profesional dan konsistensi branding kepada pengguna atau kontributor situs Anda.
Dalam tutorial ini, kita akan membahas bagaimana mengganti logo default WordPress di halaman wp-login.php dengan logo Anda sendiri, dan yang paling penting, kita akan melakukannya tanpa menggunakan plugin.
Berikut adalah dua metode yang dapat Anda pilih berdasarkan preferensi Anda: menggunakan file functions.php tema atau Media Library WordPress.
Script Mengganti Logo
Langkah- langkah
- Pertama, unggah logo Anda ke Media Library di WordPress. Anda dapat melakukannya melalui Dashboard > Media > Add New.
- Setelah gambar diunggah, klik pada gambar tersebut dan salin URL lengkapnya.
- Buka file functions.php dari tema aktif Anda.
- Tambahkan kode berikut ke file functions.php:
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url('PASTE_URL_LOGO_DISINI');
height:65px;
width:320px;
background-size: 320px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );Catatan: Gantilah ‘PASTE_URL_LOGO_DISINI’ dengan URL lengkap logo yang telah Anda unggah ke Media Library.
Selanjutnya, simpan dan tutup file functions.php.
Sekarang, logo halaman login Anda harus telah diganti dengan logo yang Anda unggah ke Media Library. Anda juga dapat menyesuaikan height, width, dan background-size sesuai dengan ukuran logo Anda.
Tetapi ingatlah bahwa perubahan pada tema langsung akan hilang jika Anda memperbarui tema tersebut. Oleh karena itu, sebaiknya gunakan child theme atau custom plugin untuk penyesuaian yang lebih aman dan berkelanjutan.
Hasil
Berikut ini adalah contoh hasilnya.
Hal yang perlu diperhatikan
URL logo yang harus dimasukan
URL logo yang perlu dimasukan bukanlah yang berformat seperti ini: /wp-content/uploads/year/month/filename.png
Namun, masukan URL semuanya seperti ini: https://yourdomain.com/wp-content/uploads/year/month/filename.png
Mengatasi logo yang di klik mengarah ke wordpress.org
Untuk menghapus tautan dari logo di halaman login WordPress, Anda dapat menambahkan beberapa baris kode lagi ke file functions.php Anda. Berikut adalah kode yang dapat Anda tambahkan:
function my_login_logo_url() {
return false;
}
add_filter( 'login_headerurl', 'my_login_logo_url' );Fungsi my_login_logo_url mengembalikan false ketika filter login_headerurl dipanggil, yang menghapus URL dari logo.
Tambahkan kode tersebut ke file functions.php dan simpan perubahannya. Dengan begitu, logo di halaman login tidak akan lagi dapat diklik.
Script Mengganti Logo & Background
Sedangkan script ini, bisa digunakan untuk mengganti logo dan juga background dari WordPress default. Script ini juga memiliki fungsi untuk menghapus tautan ke situs WordPress pada logo tersebut.
function custom_login_background() {
?>
<style type="text/css">
/* Ganti background halaman login */
body.login {
background-image: url('URL-GAMBAR-BACKGROUND');
background-size: cover;
background-position: center;
}
/* Gaya form login */
body.login #loginform {
background-color: rgba(255, 255, 255, 0.8); /* Warna putih dengan transparansi */
padding: 20px;
border-radius: 10px;
}
/* Ganti logo WordPress */
body.login #login h1 a {
background-image: url('URL-GAMBAR-LOGO'); /* Ganti URL dengan URL logo baru */
background-size: contain;
width: 100%;
height: 84px; /* Sesuaikan tinggi logo */
pointer-events: none; /* Nonaktifkan klik pada logo */
}
/* Menyembunyikan link default pada logo */
body.login #login h1 a:hover {
cursor: default; /* Mengubah kursor menjadi default saat diarahkan ke logo */
}
</style>
<script type="text/javascript">
/* Script untuk menonaktifkan link pada logo */
document.addEventListener('DOMContentLoaded', function() {
var loginLogo = document.querySelector('body.login #login h1 a');
if (loginLogo) {
loginLogo.removeAttribute('href'); /* Menghapus atribut link (href) dari logo */
}
});
</script>
<?php
}
add_action('login_enqueue_scripts', 'custom_login_background');
Hasil
Seperti ini lah hasil nya, jika script diatas di implementasikan.
Contoh Hasil Lain
Apabila Anda menginginkan model tampilan lain, Anda bisa mencoba menggunakan background seperti contoh hasil dibawah ini, sehingga hasilnya bisa lebih keren.
FAQ
Apakah logo akan hilang ketika mengganti tema?
Mungkin ada pertanyaan di benak Anda, mengenai “Meskipun mengunggah logo ke Dashboard > Media > Add New, apakah logo tersebut akan hilang apabila tema nya di ganti?
Jawaban nya tidak !.
gambar atau logo yang diunggah ke Media Library WordPress tidak akan hilang saat Anda mengganti tema. Media Library berfungsi secara independen dari tema yang Anda gunakan.
Akan tetapi, perubahan kode yang Anda lakukan di file functions.php akan hilang saat Anda mengganti tema atau memperbarui tema tersebut. Kode yang ditambahkan ke file functions.php hanya berlaku untuk tema tertentu. Jadi, jika Anda beralih ke tema lain atau memperbarui tema yang Anda gunakan, perubahan yang Anda buat di file functions.php akan hilang.
Sebagai solusi, Anda bisa menggunakan child theme atau membuat custom plugin. Dengan menggunakan child theme atau custom plugin, perubahan yang Anda lakukan akan tetap ada meski tema utama diperbarui.
Jika Anda membuat plugin khusus untuk ini, Anda dapat menggunakan kode yang sama yang Anda tambahkan ke file functions.php. Buat file baru dengan ekstensi .php, tambahkan kode ke file tersebut, dan unggah file tersebut ke direktori /wp-content/plugins/ di server Anda. Anda kemudian dapat mengaktifkan plugin tersebut melalui Dashboard WordPress Anda, dan perubahan Anda akan tetap ada meski tema diperbarui.
Berapa rasio gambar logo yang paling tepat untuk dipakai?
Pada script yang telah Tim DEVanoda sertakan diatas, kami menggunakan ukuran logo 320px dan 65px. Dimensi tersebut memberikan rasio atau proporsi sebesar 320:65.
Jika Anda ingin menyederhanakannya ke bentuk yang paling sederhana, Anda dapat membagi kedua angka tersebut dengan faktor bersama terbesar mereka, yaitu 5.
Setelah membagi, Anda akan mendapatkan rasio 64:13. Jadi, dalam bentuk yang paling sederhana, dimensi 320px dan 65px memiliki rasio 64:13.
Jadi, jika Anda ingin mengubah ukuran logo tetapi ingin mempertahankan proporsi yang sama, Anda perlu memastikan bahwa rasio antara lebar dan tinggi selalu sama dengan 64:13.
Berapa ukuran gambar paling tepat untuk dipakai?
Kami menggunakan ukuran logo 320px dan 65px pada script yang kami berikan diatas. Untuk hasil terbaik, gunakanlah gambar dengan dimensi yang sama dengan ukuran yang telah kami sediakan.
Kami merekomendasikan untuk menggunakan gambar dengan ukuran 960 px X 195 px.
