Custom WordPress Login Screen

login1

Pembaruan (24/8/11): Kode di bawah ini seharusnya masih berfungsi, tetapi sejumlah sampel tidak lagi aktif, maaf!

Halaman login admin WordPress sangat mudah untuk disesuaikan. Dengan kode di bawah ini, Anda dapat menambahkan CSS Anda sendiri ke halaman login dan membuatnya terlihat sesuka Anda. Lihat info masuk Pro Blog Design baru untuk melihatnya beraksi.

Yang terbaik dari semuanya, penyesuaian Anda semua dilakukan dalam file tema Anda, sehingga perubahan akan tetap ada saat Anda meningkatkan WordPress .

Ini adalah yang pertama dari serangkaian posting WordPress Hacks. Semua kode itu dilakukan oleh Milo , dan kemudian ditulis menjadi posting blog oleh saya. Akan ada retasan baru yang dirilis setiap hari Kamis!

1 – Edit Functions.php

Tema Anda mungkin sudah atau belum memiliki file functions.php di dalamnya. Jika ya, tempel kode di bawah ini ke bawah. Jika tidak, buat saja file kosong di Notepad dan simpan dengan nama itu .

Dan ingatlah untuk tidak meninggalkan spasi sebelum atau sesudah tag <? Php and?> Saat Anda melakukan ini!

1 2 3 4 5 6 <? php function custom_login ( ) { echo ‘<link rel = “stylesheet” type = “text / css” href = “‘ . get_bloginfo ( ‘template_directory’ ) . ‘/custom-login/custom-login.css” /> ‘ ; } add_action ( ‘login_head’ , ‘custom_login’ ) ; ?>

2 – Edit File Tema Anda

folder masuk

Kami akan membutuhkan tempat untuk menyimpan gaya CSS baru Anda dan gambar apa pun yang mungkin Anda gunakan. Melihat bahwa mereka bukan bagian dari situs utama, mari kita buat folder baru untuk mereka.

Buat folder di folder tema Anda dan menyebutnya ” custom-login “.

Dan di dalam folder itu buat stylesheet baru yang disebut ” custom-login.css” .

3 – Tambahkan Aturan CSS Baru

File custom-login.css akan dimuat setiap kali halaman login Anda dimuat. Itu berarti bahwa aturan apa pun yang Anda tambahkan di sini akan diterapkan ke halaman login.

Jika Anda menambahkan gambar baru, Anda dapat menyimpannya di folder login khusus Anda.

Namun, jika Anda ingin menggunakan kembali gambar dari tema Anda, cukup gunakan aturan CSS seperti berikut ini untuk menggunakan gambar dari folder gambar tema Anda (Dengan begitu, browser Anda tidak perlu mengunduh gambar lagi karena sudah akan memiliki mereka di-cache).

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

Contoh Template Sederhana

Berikut ini adalah stylesheet yang saya gunakan untuk membuat formulir login baru saya . Ini sangat, sangat sederhana, tetapi melakukan trik dengan baik. Saya sudah berkomentar, jadi silakan beradaptasi dan menggunakannya di situs Anda sendiri .

/* Custom Login Styles */

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}	/* Page background. Can't use the body tag for this! */
h1 a {	/* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
} 

body.login {border-top-color:#dff4fc;}	/* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}	/* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;}	/* Rollover link effects in top bar */

Kustomisasi Lebih Lanjut

Tentu saja, Anda dapat melakukan lebih dari itu. Jika Anda melihat tangkapan layar di bawah situs Milo yang dibuat untuk Intellivative , Anda dapat melihat bahwa dia memodifikasi desain formulir login itu sendiri, hanya menggunakan beberapa aturan CSS lagi.

login-intellivative

Anda mungkin menemukan manfaatnya juga untuk memeriksa stylesheet login WordPress default . Anda akan menemukannya di /wp-admin/css/login.css dan beberapa warna akan diatur melalui /wp-admin/css/colors-fresh.css (Kecuali Anda mengubah skema warna di panel admin Anda, di mana huruf ini adalah colors-classic.css ).

Jika Anda memperbarui formulir login Anda, beri tahu kami di komentar dan saya akan mengumpulkan tautan di sini !

Pembaruan: Andi Saleh telah membuat halaman login yang bagus dengan teknik ini.

Sumber : https://www.problogdesign.com/wordpress/custom-wordpress-login-screen/