Cara Mengganti Logo Halaman Login WordPress

Hallo sahabat WebEsia, pada pembahasan artikel kali ini disini saya ingin share kepada Anda mengenai tutorial mengganti logo halaman login WordPress dengan menggunakan plugin yang bernama WPCode (Insert Headers and Footers + Custom Code Snippets). Untuk itu silahkan lihat langkah-langkahnya berikut ini.

Pendahuluan

WordPress memiliki halaman login default yang menampilkan logo WordPress bawaan. Mengganti logo tersebut dapat memperkuat identitas merek dan memberikan pengalaman yang lebih profesional bagi pengguna. Plugin WPCode memudahkan Anda menambahkan kode custom PHP, JS, dan CSS tanpa harus mengedit file tema langsung.

Apa itu Plugin WPCode

WPCode (Insert Headers and Footers + Custom Code Snippets) adalah plugin yang dikembangkan untuk mempermudah manajemen potongan kode (snippets) di WordPress. Dengan WPCode, Anda dapat menambahkan kode PHP, JavaScript, CSS, HTML, atau teks langsung dari dashboard tanpa mengubah tema atau child theme. Plugin ini juga menyediakan library dengan lebih dari 100 snippet siap pakai, termasuk snippet untuk mengganti logo halaman login. Baca juga “20 Template WordPress Gratis dan SEO-Friendly“.

Langkah-langkah Mengganti Logo Halaman Login WP

Silahkan ikuti langkah-langkahnya berikut ini untuk merubah logo pada halaman saat login di WordPress dengan menggunakan plugin dari WPcode, diantaranya adalah sebagai berikut:

1. Instal dan Aktifkan Plugin WPCode

Masuk ke menu Plugins > Add New di dashboard WordPress. Cari plugin “Insert Headers and Footers + Custom Code Snippets” atau “WPCode” lalu klik Install Now dan Activate.

2. Buat Snippet Baru

Jika sudah mengaktipkan plugin WPCode selanjutnya kita akan menambahkan snipet baru, namun disini kita akan memanfaatkan librari yang sudah disediakan oleh plugin WPCode untuk merubah logo yang terdapat pada halaman login di website WordPress Anda.

Silahkan pergi ke menu WPCode di dasbor WordPress kamu lalu pergi ke halaman Library dan pada pencarian ketikan kata kunci “Login” dan pilih librari yang bernama Replace WordPress Logo on Login Page lalu pilih Use Snippet

3. Mengganti Logo Halaman Login

Selanjutnya Anda akan diarahkan ke halaman snippet loginnya, disini kamu akan melihat kode template yang disediakan oleh plugin WPCode-nya.

Anda akan melihat kode snippet sperti kode dibawah ini:

add_filter( 'login_head', function () {
	// Update the line below with the URL to your own logo.
	// Adjust the Width & Height accordingly.
	$custom_logo = 'https://wpcode.com/wp-admin/images/wordpress-logo.svg';
	$logo_width  = 84;
	$logo_height = 84;

	printf(
		'<style>.login h1 a {background-image:url(%1$s) !important; margin:0 auto; width: %2$spx; height: %3$spx; background-size: 100%%;}</style>',
		$custom_logo,
		$logo_width,
		$logo_height
	);
}, 990 );

Pada kode yang saya kasih BOLD yaitu https://wpcode.com/wp-admin/images/wordpress-logo.svg, silahkan ganti dengan URL gambar atau URL logo yang ingin kamu gunakan misalnya disini kodenya akan seperti dibawah ini setalah saya ganti dengan logo saya.

add_filter( 'login_head', function () {
	// Update the line below with the URL to your own logo.
	// Adjust the Width & Height accordingly.
	$custom_logo = 'https://webesia.com/wp-content/uploads/2024/06/favicon-WEBESIA.png';	$logo_width  = 84;
	$logo_height = 84;

	printf(
		'<style>.login h1 a {background-image:url(%1$s) !important; margin:0 auto; width: %2$spx; height: %3$spx; background-size: 100%%;}</style>',
		$custom_logo,
		$logo_width,
		$logo_height
	);
}, 990 );

Dimana URL https://webesia.com/wp-content/uploads/2024/06/favicon-WEBESIA.png adalah url logo saya yang akan digunakan pada logo halaman login di WordPress saya.

Setelah kamu merubah logonya silahkan kamu aktifkan kode snippernya dan pilih Save/Update.

4. Selesai dan lihat hasilnya

Samapai tahap ini kamu sudah berhasil menerapkan logo baru pada halaman login WordPress anda. silahkan kamu lihat hasilnya di domainkamu.com/wp-admin.

Tips Tambahan

• Jika logo tidak muncul, bersihkan cache browser maupun cache plugin (misalnya WP Super Cache atau W3 Total Cache).
• Untuk mengubah link logo agar menuju halaman tertentu, Anda dapat menambahkan filter login_headerurl dan login_headertitle.
• Jika ingin menambahkan efek hover atau styling lain, sesuaikan bagian <style> di kode snippet.

Kesimpulan

Mengganti logo halaman login WordPress menggunakan plugin WPCode memungkinkan Anda melakukan kustomisasi dengan mudah tanpa mengedit file tema langsung. Dengan sedikit kode PHP dan langkah yang sederhana, Anda dapat memperkuat branding situs WordPress Anda.

Sumber: WPCode, wpgan.com, wordpress.org