Tôi Thích Kiếm Tiền Online
No Result
View All Result
  • Login
  • Đầu tư & Giao dịch
  • Kỹ năng kiếm tiền
  • Kiếm tiền Online
    • Google Adsense
    • Youtube
    • Clickbank
    • Affiliate Marketing
    • Blogging
    • Tiền điện tử
PRICING
SUBSCRIBE
  • Đầu tư & Giao dịch
  • Kỹ năng kiếm tiền
  • Kiếm tiền Online
    • Google Adsense
    • Youtube
    • Clickbank
    • Affiliate Marketing
    • Blogging
    • Tiền điện tử
No Result
View All Result
Tôi Thích Kiếm Tiền Online
No Result
View All Result
Home Kiến thức cơ bản Kiến thức WordPress

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

hoanglaota by hoanglaota
6 Tháng Tám, 2018
6 min read
0
Cách tùy biến trang đăng nhập của WordPress
Buy JNews
ADVERTISEMENT

Mục lục nội dung

  1. Tạo Plugin
  2. Tạo hàm tương tác đến trang đăng nhập
  3. Thêm CSS tùy biến vào trang đăng nhập
  4. Tự đánh dấu “Remember Me”
    1. Xem tiếp bài trong serie
Bài này thuộc phần 2 của 4 phần trong serie Tùy biến trang quản trị WordPress

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.

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

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:

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

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.

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

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ó:

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

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ả:

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

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é.

Xem tiếp bài trong serie

Phần trước: Tùy biến trang quản trị WordPress – Chuẩn bịPhần kế tiếp: Thêm logo và sửa footer trong trang quản trị WordPress

RELATED POSTS

Cook’d Pro Review 2019

Hướng dẫn cài lại WordPress khi bị dính mã độc

Làm trang shop đơn giản với WordPress – 02

Cách tùy biến trang đăng nhập của WordPress was last modified: Tháng Chín 26th, 2016 by Thạch Phạm
wordpress dashboard
ShareTweetPin
hoanglaota

hoanglaota

Related Posts

Cook'd Pro Review 2019
Kiến thức WordPress

Cook’d Pro Review 2019

17 Tháng Tư, 2019
Hướng dẫn cài lại WordPress khi bị dính mã độc
Kiến thức WordPress

Hướng dẫn cài lại WordPress khi bị dính mã độc

7 Tháng Tám, 2018
Làm trang shop đơn giản với WordPress – 02
Kiến thức WordPress

Làm trang shop đơn giản với WordPress – 02

7 Tháng Tám, 2018
Làm sao để kiểm tra tốc độ website chính xác?
Kiến thức WordPress

Làm sao để kiểm tra tốc độ website chính xác?

7 Tháng Tám, 2018
Cách tạo shortcode và widget chuyên nghiệp với MyShortcodes
Kiến thức WordPress

Cách tạo shortcode và widget chuyên nghiệp với MyShortcodes

7 Tháng Tám, 2018
Tự thêm bài liên quan trong giữa bài viết
Kiến thức WordPress

Tự thêm bài liên quan trong giữa bài viết

7 Tháng Tám, 2018

Recommended Stories

Tổng quan backup và restore dữ liệu trên WordPress

7 Tháng Tám, 2018
Chạm ngưỡng 5.825 USD – Bitcoin ơi mình đi đâu thế ?

Chạm ngưỡng 5.825 USD – Bitcoin ơi mình đi đâu thế ?

6 Tháng Tám, 2018
Phân tích giá 17/5: Bitcoin, Ethereum, Bitcoin Cash, Ripple, Stellar, Litecoin, IOTA, EOS.

Phân tích giá 17/5: Bitcoin, Ethereum, Bitcoin Cash, Ripple, Stellar, Litecoin, IOTA, EOS.

6 Tháng Tám, 2018

Popular Stories

  • Tổng quan nhanh (8/7): Bitcoin công phá 6.800 USD, Ethereum chạm gần 500 USD, Ripple tiến gần 0.5 USD

    Tổng quan nhanh (8/7): Bitcoin công phá 6.800 USD, Ethereum chạm gần 500 USD, Ripple tiến gần 0.5 USD

    0 shares
    Share 0 Tweet 0
  • Gửi email thông báo khi có comment mới trong WordPress tự động với plugin ReplyMe

    0 shares
    Share 0 Tweet 0
  • Xây dựng Fanpage, website kiếm tiền với áo thun và Google Adsense

    0 shares
    Share 0 Tweet 0
  • Kiếm tiền với Clickbank có thật không ?

    0 shares
    Share 0 Tweet 0
  • Kiếm tiền online từ môi giới bất động sản

    0 shares
    Share 0 Tweet 0
Tôi Thích Kiếm Tiền Online

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Visit our landing page to see all features & demos.

LEARN MORE »

Bài viết mới

  • Cook’d Pro Review 2019
  • Tuần giao dịch cuối tháng 4: Chờ đợi tín hiệu tích cực từ thanh khoản và sự trở lại của khối ngoại
  • CẬP NHẬT TIN TỨC NGÀY 22.3.2018

Chuyên mục

  • Affiliate Marketing
  • Bitcoin
  • Blogger
  • Blogging
  • Chỉ số và phân tích
  • Chiến lược quyền chọn
  • Companies
  • Content Marketing
  • Ethereum
  • Google Adsense
  • Kiếm tiền Online
  • Kiến thức cơ bản
  • Kiến thức tên miền
  • Kiến thức WordPress
  • Kỹ năng kiếm tiền
  • Litecoin
  • Mining
  • Products Launch
  • Ripple
  • SEO – MMO
  • Stellar
  • Tiền Ảo
  • Veritaseum
  • Youtube

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Subscription
  • Category
    • Business
    • Culture
    • Economy
    • Lifestyle
    • Health
    • Travel
    • Opinion
    • Politics
    • Tech
    • World
  • Landing Page
  • Buy JNews
  • Support Forum
  • Pre-sale Question
  • Contact Us

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?