Reka Skrin Masuk WordPress Custom Custom

Panduan ini menunjukkan kepada anda bagaimana untuk menyesuaikan skrin log masuk WordPress secara dramatik dengan beberapa langkah mudah, menggunakan CSS tersuai dan fungsi PHP kecil. Kami akan melampaui perubahan logo mudah dan membuat pengalaman log masuk berjenama sepenuhnya.

3

Muat turun imej latar belakang yang digunakan dalam tutorial ini di sini: Tutorial ini dipecahkan ke dalam bahagian, membolehkan anda menyesuaikan hanya aspek yang anda perlukan. Sama ada anda mahukan tweak halus atau baik pulih lengkap, panduan ini telah dilindungi.

Langkah 1: Ubah suai

Pertama, anda perlu menambah kod ke fail

tema anda untuk memberitahu WordPress untuk menggunakan lembaran gaya tersuai untuk skrin log masuk. Tampal kod berikut ke dalam fail

anda: functions.php

Kod ini cangkuk ke dalam tindakan functions.php dan termasuk fail functions.php anda. Pastikan kedua -dua fungsi dan

dimasukkan. Jalan ke fail CSS anda adalah relatif kepada direktori tema anda. Laraskan jika perlu.

function stylized_login() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/stylized-login.css"></link>';
}
add_action('login_head', 'stylized_login');

Langkah 2: Buat login_head stylized-login.css add_action Buat fail bernama

dalam direktori tema anda (folder yang sama seperti

anda). Di sinilah anda akan menambah semua CSS tersuai anda. stylized-login.css

Langkah 3: Sesuaikan skrin log masuk anda (CSS)

stylized-login.css Sekarang, mari tambahkan CSS ke fail style.css anda. Kod berikut menyediakan penyesuaian yang komprehensif, tetapi anda boleh menggunakan hanya bahagian yang anda perlukan.

ingat untuk menggantikan ruang letak seperti

dan stylized-login.css dengan nama fail sebenar imej anda. Logo anda sepatutnya menjadi 247x63 piksel untuk fit optimum.

Langkah 4: Tukar pautan logo (pilihan)

Untuk menukar pautan yang berkaitan dengan logo, tambahkan ini ke fail functions.php anda:

function stylized_login() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/stylized-login.css"></link>';
}
add_action('login_head', 'stylized_login');

ini mengalihkan logo klik ke halaman utama laman web anda.

Selepas membuat perubahan ini, kosongkan cache penyemak imbas anda dan uji skrin log masuk tersuai anda. Ingatlah untuk selalu menyandarkan laman web anda sebelum membuat perubahan kod.

Atas ialah kandungan terperinci Reka Skrin Masuk WordPress Custom Custom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!