Hướng dẫn tùy biến giao diện trang đăng nhập mặc định của WordPress

14129 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Theo mặc định, trang đăng nhập vào tài khoản quản trị của website WordPress sẽ có địa chỉ kiểu như sau: //tenmien/wp-login.php (wp-admin). Theo đó, việc đăng ký tài khoản mới hoặc lấy lại mật khẩu tài khoản cũng được thực hiện luôn trong trang wp-login.php, ví dụ: muốn lấy lại mật khẩu chúng ta có url //tenmien/wp-login.php?action=lostpassword, trang đăng ký sẽ được thay giá trị hậu tố url (action=register). Đó là những cài đặt mặc định của WordPress đi kèm với logo WordPress, url trỏ về trang chủ của WordPress cũng như dòng chữ báo “powered by wordpress“.

Tuy nhiên, trong thực tế không ít lần các bạn cần thay đổi những thông tin mặc định ấy, cụ thể như thay logo WordPress bằng logo của chính bạn, link trỏ đến wordpress.org được thay bằng trang chủ của bạn. Với những việc ấy, ít nhất thì trang đăng nhập của bạn sẽ trở nên chuyên nghiệp hơn hoặc mang đậm dấu ấn cá nhân hơn phải không? Bài viết này hãy cùng mình thực hiện điều này nhé!

Giuseart.com---Tùy-biến-giao-diện-trang-đăng-nhập-wordpress
Giuseart.com – Đây là trang đăng nhập WordPress của mình sau khi tùy biến

Tùy biến giao diện trang đăng nhập mặc định WordPress

Việc này khá đơn giản với những bạn rành code wordpress, tuy nhiên nó không hề dễ đối với những người mới tập làm website WordPress. Do đó, dưới góc độ của một người tự học wordpress và đã làm thành công, mình sẽ hướng dẫn các bạn cách làm đơn giản nhất ngay cả đối với bạn không biết code.

Thực chất việc này sẽ chèn một số đoạn code tùy biến vào file function.php của giao diện. Điều đó không gây ảnh hưởng tới tốc độ web hoặc các lo lắng về bảo mật như các bạn từng lo lắng khi sử dụng plugin, không làm ảnh hưởng tới các tập tin khác trong giao diện…

Lần lượt cùng thực hiện nhé!

Thay đổi logo WordPress trong trang login

Bước 1: Các bạn vào Quản trịGiao diệnSửa giao diện và tìm mở file Function.php.

Bước 2: Thêm vào file function.php đoạn code sau:

Ở đoạn code trên, các bạn thay url logo vào vị trí mình bôi đỏ nhé~! Sau đó, các bạn tải lại trang để xem sự thay đổi nhé~! Việc căn chỉnh logo cho đẹp thì lát mình chỉ chỗ để thay đổi thông số CSS sau nha!

Giuseart.com-Thay-đổi-logo-wordpress-trong-trang-đăng-nhập
Các bạn thay url của logo vào vị trí mình bôi đỏ như hình trên.

Thay đổi đường dẫn ảnh trỏ về WordPress.org trong trang đăng nhập

Bước 1: Các bạn vào Quản trịGiao diệnSửa giao diện và tìm mở file Function.php.

Bước 2: Thêm vào file function.php đoạn code sau:

Các bạn thay url vào giữa vị trí hai dấu nháy của home_url nhé! Mặc định như mình để là nó dẫn về trang chủ nhé!

Thay đổi đường dẫn trang login website WordPress

Mặc định nếu muốn đăng nhập trang login, chúng ta truy cập tên-miền/wp-admin hoặc tên-miền/wp-login. Tuy nhiên, chúng ta có thể thay đổi đường dẫn truy cập trang login đó bằng một url tùy chỉnh khác.

Bước 1: Các bạn vào Quản trịGiao diệnSửa giao diện và tìm mở file Function.php.

Bước 2: Thêm vào file function.php đoạn code sau:

Các bạn thay url tùy chỉnh vào giữa hay dấu nháy ” của $login_url = ‘đường_dẫn_trang_login’ nhé!

Chuyển hướng trang web sau khi đăng nhập thành công

Dùng để chuyển hướng vào trang bất kỳ sau khi bạn đăng nhập tài khoản thành công. Ví dụ bạn có thể chuyển hướng tới trang chủ hoặc trang thông tin thành viên,…

Bước 1: Các bạn vào Quản trịGiao diệnSửa giao diện và tìm mở file Function.php.

Bước 2: Thêm vào file function.php đoạn code sau:

Các bạn có thể thay url tùy chỉnh để trang web chuyển hướng vào bên trong cặp dấu nháy của return ‘đường_dẫn_muốn_chuyển_đến’ nhé!

Css làm đẹp cho trang đăng nhập

Dưới đây là một số tùy chỉnh CSS mình đã làm thực tế trên trang web của mình, mình cứ copy cả bỏ vô đó nha. Các bạn có thể tùy chỉnh lại tùy theo nhu cầu của các bạn. Phần này mới là phần quan trọng quyết định xem trang login của bạn có đẹp hay không nè!

Các bạn ra xem trang login, sau đó dò CSS tìm class cần thay đổi, sau đó thay thế các giá trị của các thuộc tính CSS trong đoạn code trên nha.

Lời kết

Vậy là các bạn đã có thể tự tùy biến trang đăng nhập WordPress rồi phải không, ngay cả không biết code thì bạn cũng có thể cá nhân hóa tối đa trang đăng nhập WordPress rồi. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website. Bạn nào làm không được vui lòng để lại comment mình giải đáp nhé!

4.5/5 - (11 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

14 những suy nghĩ trên “Hướng dẫn tùy biến giao diện trang đăng nhập mặc định của WordPress

  1. Duy Khang nói:

    Code này hiện có còn phù hợp với wp 5.5.1 và flatsome bản mới không anh 🙁 em add vào mà không thấy thay đổi gì hết ạ

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

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *