Trang chủ WordpressHướng dẫn Wordpress Cách tùy biến trang đăng nhập của WordPress

Cách tùy biến trang đăng nhập của WordPress

bởi Thạch Phạm
35 bình luận 6039 views
Khuyến mãi hosting

https://www.youtube.com/watch?v=V_SpiKeBWd0&feature=youtu.be

Trong bài đầu tiên của serie này, mình sẽ hướng dẫn các bạn sử dụng API của WordPress để tùy biến lại trang đăng nhập của WordPress, cụ thể mình sẽ lấy ví dụ đơn giản là sửa lại logo của WordPress thành logo của mình và thay đổi màu nền.

custom-login-admin-01

Trang đăng nhập mặc định của WordPress

Tạo Plugin

Trước hết để dễ dàng quản lý code của mình, mình khuyên các bạn nên tự tạo plugin cho riêng mình. Trong cả serie này chúng ta sẽ tạo một plugin riêng để quản lý, trước tiên hãy vào thư mục /wp-content/plugins/ và tạo một thư mục tên là tp-custom-admin.

Trong thư mục này chúng ta sẽ có tập tin custom-admin.php và thư mục images (để chứa hình ảnh mà bạn sử dụng trong plugin). Cấu trúc như thế này:

custom-login-admin-setup2

Kế tiếp chúng ta mở tập tin custom-admin.php ra để thêm thông tin plugin vào nhé, để nó có thể hiển thị trong trang quản lý plugin.

<?php
/**
 * Plugin Name: TP Customize Admin Screen
 * Plugin URI: https://thachpham.com
 * Description: Tùy biến lại trang quản trị của admin.
 * Version: 1.0
 * Author: Thach Pham
 * Author URI: https://thachpham.com
 */

Và trong bài này, các code bạn sẽ viết ngay bên dưới đoạn khai báo thông tin này. Bây giờ hãy vào trang quản trị plugin mà kích hoạt plugin lên.

Tạo hàm tương tác đến trang đăng nhập

Bây giờ chúng ta sẽ khai báo một hàm sẽ chứa các đoạn code mà bạn muốn tùy biến vào trang đăng nhập, ví dụ mình có một hàm tên tp_custom_login().

/**
 * Thay đổi logo trang đăng nhập và đổi màu nền
 */
function tp_custom_logo() {

}
add_action('login_enqueue_scripts', 'tp_custom_logo');

Như đoạn code trên, bạn sẽ thấy chúng ta móc hàm tp_custom_logo() vào hook tên login_enqueue_scripts. Đây là cái hook mà nó sẽ hiển thị những gì chúng ta móc vào trong trang đăng nhập, nên chúng ta muốn thay đổi lại hình ảnh, màu sắc tức là sẽ viết thêm CSS cho trang đăng nhập nên móc vào hook này.

Thêm CSS tùy biến vào trang đăng nhập

Chúng ta đã có hàm đã khai báo ở trên rồi, bây giờ chúng ta có thể thêm bất cứ code tùy biến nào nhưng để dễ thực hành nhất chúng ta sẽ thêm CSS để đổi hình logo và màu nền cho trang đăng nhập.

Trước tiên chúng ta cần đóng code PHP lại để có thể viết CSS dễ hơn như thế này:


function tp_custom_logo() { ?>

<?php }
add_action('login_enqueue_scripts', 'tp_custom_logo');

Bây giờ chúng ta sẽ viết CSS hoặc HTML vào đoạn trống ở giữa đó nhé. Trước hết là ta sẽ thay đổi logo, bây giờ bạn ra trang đăng nhập xem cấu trúc HTML của nó thì sẽ thấy phần logo hiển thị nó nằm trong id #login.

Xem cấu trúc HTML của đối tượng cần sửa

Xem cấu trúc HTML của đối tượng cần sửa

Okay vậy bây giờ ta sẽ có đoạn CSS sau (nhớ thay lại ảnh logo của bạn nhé):

<style type="text/css">
    #login h1 a {
        background-image: url(<?php echo plugins_url('images/logo.png', __FILE__); ?>);
        background-size: 280px 80px;
        width: 280px;
        height: 80px;
    }
</style>

Ngay dòng số 3, mình có sử dụng hàm plugins_url() như sau:

<?php echo plugins_url('images/logo.png', __FILE__); ?>

Chỗ này nghĩa là nó sẽ in ra đường dẫn tới tập tin logo.png trong thư mục images của plugin hiện tại vì hàm plugins_url có tác dụng lấy đường dẫn của plugin, tham số __FILE__ nghĩa là lấy đường dẫn thư mục hiện tại của tập tin hiện tại.

Bây giờ kết quả ta có:

custom-login-admin-04

Giờ thì thêm tiếp CSS cho nó khác biệt hơn nha.

function tp_custom_logo() { ?>
    <style type="text/css">

        body {
            background: #34566f !important;

        }
        .login #nav a, .login #backtoblog a, .login label {
            color: #f3f3f3 !important;
        }
        .wp-core-ui .button-primary {
            background: #31b36b !important;
            border: none !important;
            text-shadow: none !important;
            box-shadow: none !important;

        }
        .login form {
            box-shadow: none !important;
            background: transparent !important;
        }
        #login h1 a {
            background-image: url(<?php echo plugins_url('images/logo.png', __FILE__); ?>);
            background-size: 280px 80px;
            width: 280px;
            height: 80px;
        }
    </style>
<?php }
add_action('login_enqueue_scripts', 'tp_custom_logo');
Tips

Để viết CSS chính xác, bạn nên dùng công cụ Inspect của trình duyệt để xem CSS của thành phần cần chỉnh sửa rồi viết CSS đè lên vùng chọn đó (xem video).

Kết quả:

custom-login-admin-05

Nếu như bạn muốn tự xây dựng trang đăng nhập riêng cho WordPress mà không dùng trang /wp-admin mặc định thì có thể tham khảo hướng dẫn này.

Tự đánh dấu “Remember Me”

Nếu bạn muốn nút Remember Me được đánh dấu vào mặc định để ghi nhớ lần đăng nhập sau thì có thể thêm hàm dưới đây để tùy biến nó nhé.

</pre>
<pre>/**
 * Tự đánh dấu vào nút Remember Me để ghi nhớ lần đăng nhập sau
 */
function tp_rememberme_check() {
    add_filter( 'login_footer', 'tp_rememberme_checked' );
}
add_action( 'init', 'tp_rememberme_check' );

function tp_rememberme_checked() {
    echo "<script>document.getElementById('rememberme').checked = true</scrip>";
}</pre>
<pre>

Okay đơn giản vậy thôi, tiếp tục ở các bài sau chúng ta sẽ tùy biến lại bên trong trang quản trị của WordPress nhé.

35 bình luận

Có thể bạn quan tâm

35 bình luận

Nam 18/07/2020 - 10:32 Chiều

cảm ơn anh nhé

Reply
Thắng 25/05/2020 - 9:35 Chiều

Hello anh! Anh vui lòng cho em hỏi. Em đang tuỳ biến background đăng nhập admin bằng hình ảnh. Nhưng mà phát hiện nó không phù hợp với mọi loại màn hình PC. Mình có đoạn mã nào cho background nó phù hợp với mọi loại màn hình không ạ?

Reply
Thạch Phạm 25/05/2020 - 10:54 Chiều

Bạn có thể sử dụng nhiều hình ảnh khác nhau và thiết lập background hiển thị từng ảnh với đúng kích thước màn hình yêu cầu. Bạn xem bài này nha: https://www.webfx.com/blog/web-design/responsive-background-image/

Hoặc xem bài responsive trên blog mình nhé.

Reply
thắng 26/05/2020 - 5:38 Chiều

Dạ! em cảm ơn. Em đã theo bài responsive set thành công rồi ạ. Cảm ơn anh nhiều

Reply
Kami 09/04/2020 - 4:29 Chiều

cho mình hỏi trang của mình cài Google reCaptcha v2 bị lỗi giờ ko đăng nhập -_-
giờ làm cách này nhưng ko vào kích hoạt plugin đc thì có cách nào khác vào trang admin ko?
trang đăng nhập https://onggiotanthanh.com/dangnhap
nếu ad rảnh qua xem giúp mình đc ko? m cám ơn nhé

Reply
Thạch Phạm 11/04/2020 - 12:03 Chiều

MÌnh có trả lòi bạn ở comment kia rồi nha.

Reply
Chiến 12/05/2017 - 11:11 Chiều

Chào anh thạch phạm!
Em gặp lỗi HTTP ERROR 500
nếu bỏ thẻ đóng ?> của đoạn này function tp_custom_logo() { ?> đi thì lại bình thường
anh chỉ giúp em với ạ!
Thanks anh.

Reply
đang nghiên cứu web. nhưng rối quá 07/05/2017 - 9:13 Chiều

a cho e hỏi code viết bằng phần mềm gì vậy ạ. e cảm ơn

Reply
Kiến Minh 02/04/2017 - 11:54 Chiều

Cho em hỏi với, sao em có 2 cái thẻ H1, 1 là tiêu đề site và 1 trống
E nghĩ là do thằng logo của WP làm ra cái thẻ h1 trống. mà e ko biết xóa nó thế nào anh ơi

Reply
Duy 11/12/2016 - 11:56 Chiều

Vậy có thể thay đổi đường dẫn wp login luôn không anh Thạch, và khóa cái /wp-admin lại bằng plugin tuyệt vời này luôn hok! Thanks anh bài viết rất hữu ích.

Reply
Won 06/10/2016 - 7:10 Chiều

Đang giải nén tập tin…

Đang cài đặt gói mở rộng…

Không thể cài đặt gói được chỉ định. Không tìm thấy gói mở rộng hợp lệ nào.

Cài đặt plugin không thành công.

Sao mình làm hoài mà nó không chịu nhỉ ? mình làm trên host ấy

Reply
Thạch Phạm 08/10/2016 - 11:55 Sáng

Bạn cài thông qua việc upload hay cài từ thư viện vậy bạn? Nếu bạn upload thì hãy thử giải nén ra ở máy tính trước rồi dùng FTP upload thư mục plugin vào wp-content/plugins nhé.

Reply
Won 08/10/2016 - 6:35 Chiều

hello Thạch
mình làm được rồi . Không hiểu tại sao chắc do sai tên trong plugins hay sao ah ^^

Reply
Hoàng Tuấn Anh 24/09/2016 - 11:19 Chiều

Xin chào Thạch Phạm, mình đang xem bài viết này của bạn và cũng muốn làm theo để thay đổi tùy biến trang đăng nhập nhưng quá trình làm thì mất quá nhiều time do trong quá trình viết code mình phải vào phần quản lý file trong host để lập nhưng mình lại thấy bạn làm tất cả trên PC thì phải. Câu hỏi của mình là bạn có thể giải thích giúp mình được không? hay là có phần mềm đồng bộ hóa phần đó?

Reply
Thạch Phạm 25/09/2016 - 11:25 Chiều

Chào bạn,
Mình làm trên PC là để tiện hơn cho việc hướng dẫn thôi, nghĩa là mình làm trên localhost. Còn bạn muốn sử code trên PC mà đồng bộ với code trên host thì bạn có thể sử dụng phần mềm IDE Netbeans và kết nối với tài khoản FTP của website và tải mã nguồn về máy nhé. Khi bạn sửa ở máy nó sẽ tự gửi lên host.

Reply
Nguyễn Thanh Phương 27/07/2016 - 3:32 Chiều

Chào Thạch Phạm, bạn có thể hướng dẫn mình cách thêm chức năng thay đổi logo ngoài của trang theme trong quản trị được không?

Reply
Thạch Phạm 27/07/2016 - 5:34 Chiều

Cái đó bạn tham khảo bài viết về ReduxFramework của mình nha, search trên thachpham.com sẽ có. Hoặc nếu bạn muốn nhanh và tiện thì xem hướng dẫn Customizer nhé.

Reply
Nguyễn Thanh Phương 02/08/2016 - 10:11 Sáng

ok cám ơn bạn nhé. Trân trọng.

Reply
Trần Đình Đức 21/07/2016 - 6:05 Chiều

Thạch có thể làm một bài viets hướng dẫn plugin là đẹp code trong bài viết mà Thạch đang dùng được không vậy? Mình làm hoài mà không được

Reply
Thạch Phạm 23/07/2016 - 6:13 Sáng

Bạn có thể cài plugin Syntax Highlighter nhé, sau đó bỏ code vô shortcode tương ứng thôi là được. Ví dụ:

[php]
code
[/php]
Reply
Trần Đình Đức 23/07/2016 - 7:48 Sáng

Thạch ơi, mình làm hoài mà không được. Nó không hiển thị được như của Thạch trông rất kì. Thạch giúp mình kiểm tra với

Reply
Nam Ngô 01/08/2016 - 5:41 Chiều

Bạn phải nói rõ lỗi lên chứ. Mình cũng đang xài nhưng mà cài vào là sử dụng được chứ không hề lỗi

Reply
ed Bui 18/07/2016 - 5:47 Chiều

Em làm giống hệt mà sao k được anh ơi

Reply
Quân Lý 01/07/2016 - 9:10 Chiều

Em làm theo các bước như trên và đến bước ” chuyển hướng dùng tập tin logo.png trong thư mục images”
Vào lại trang đăng nhập thì không xuất hiện logo do lỗi 404 not found
Trong khi rõ ràng có file logo.png trong thư mục images.
Cho em hỏi lỗi này thì sửa thế nào ạ?
Em đang dùng sublime text 3.

Reply
Thạch Phạm 02/07/2016 - 8:08 Sáng

Cho mình xem code và file images bạn chắc là đặt trong thư mục plugin của bạn chứ?

Reply
Thiều Phạm 27/06/2016 - 10:21 Sáng

Mở lại mục comment rồi hả bác Thạch. Sao không đóng lại cho diễn đàn đông vui 🙂

Reply
Thạch Phạm 27/06/2016 - 10:52 Sáng

Diễn đàn vẫn support bình thường, còn comment thì tiện hơn cho mọi người thôi bạn. 😛

Reply
Vương Công Minh 23/06/2016 - 9:20 Sáng

Giới thiệu với anh ThachPham 1 plugin dành cho các bạn không chuyên Html CSS là Custom Login Page Customizer (https://wordpress.org/plugins/login-customizer/). Em đang xài plugin này và với bản miễn phí, Plugin này đã làm rất tốt công việc của nó.

Reply
huykon225 20/06/2016 - 4:27 Chiều

A ThachPham cho e hỏi là làm sao để thay đổi link ở logo không phải là url về wordpress . org nữa mà trỏ về website của mình vậy. cảm ơn anh ! bài viết rất ý nghĩa

Reply
Thạch Phạm 21/06/2016 - 6:45 Sáng

Thật thiếu sót khi mình quên đề cập vấn đề này.
Để đổi link và title bạn chèn code này vào plugin của bạn nhé.

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Reply
conglinh 19/06/2016 - 2:44 Chiều

Tuyệt vời, cảm ơn anh thạch nhé

Reply
tran anh 19/06/2016 - 3:13 Sáng

qua dep

Reply
Thinkahead 18/06/2016 - 6:28 Chiều

Không thể chi tiết hơn.Cảm ơn anh Thạch rất nhiều 🙂

Reply
Cuong Vo Van 18/06/2016 - 3:14 Chiều

Đẹp bá cháy bò chét! E phải xài plugin không ak! Chắc phải làm như anh Thạch để đỡ tốn thêm nặng nề cho cái site

Reply
thien 19/06/2016 - 11:18 Sáng

Thì vẫn viết plugin mà bạn =))

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.