Thêm form đăng nhập sidebar WordPress

Thêm Form Đăng Nhập Sidebar WordPress: Hướng Dẫn Chi Tiết

Việc thêm một form đăng nhập vào sidebar (thanh bên) của website WordPress mang lại sự tiện lợi cho người dùng, giúp họ có thể đăng nhập nhanh chóng mà không cần phải điều hướng đến trang đăng nhập riêng. Bài viết này sẽ hướng dẫn bạn chi tiết các phương pháp để thực hiện điều này, từ sử dụng widget có sẵn, plugin, cho đến tùy chỉnh code.

Sử Dụng Widget Đăng Nhập Mặc Định của WordPress

WordPress cung cấp một widget đăng nhập mặc định, tuy đơn giản nhưng lại là cách nhanh nhất để thêm form đăng nhập vào sidebar. Phương pháp này phù hợp cho những ai không muốn cài đặt thêm plugin hoặc chỉnh sửa code.

Các bước thực hiện:

Đăng nhập vào trang quản trị WordPress của bạn.
Điều hướng đến Appearance > Widgets (Giao diện > Widgets).
Tìm widget có tên “Meta” hoặc “Login”. Tên có thể khác nhau tùy theo phiên bản WordPress và theme bạn đang sử dụng.
Kéo và thả widget đó vào sidebar mà bạn muốn hiển thị form đăng nhập.
Lưu lại thay đổi.

Widget này thường cung cấp một liên kết đăng nhập/đăng ký, liên kết đến RSS feed và liên kết đến WordPress.org. Bạn có thể tùy chỉnh các liên kết này bằng cách chỉnh sửa trực tiếp widget.

Sử Dụng Plugin Đăng Nhập WordPress

Có rất nhiều plugin WordPress được thiết kế riêng cho việc thêm form đăng nhập vào sidebar. Các plugin này thường cung cấp nhiều tính năng hơn widget mặc định, chẳng hạn như tùy chỉnh giao diện, hỗ trợ đăng nhập bằng mạng xã hội, và bảo mật nâng cao.

Một số plugin phổ biến:

Login Sidebar Widget
Custom Login Page Customizer
Theme My Login

Ví dụ: Cài đặt và sử dụng plugin “Login Sidebar Widget”

Đăng nhập vào trang quản trị WordPress của bạn.
Điều hướng đến Plugins > Add New (Plugins > Thêm mới).
Tìm kiếm plugin “Login Sidebar Widget”.
Nhấn “Install Now” (Cài đặt ngay) và sau đó “Activate” (Kích hoạt).
Điều hướng đến Appearance > Widgets (Giao diện > Widgets).
Bạn sẽ thấy một widget mới có tên “Login Sidebar Widget”. Kéo và thả widget này vào sidebar mong muốn.
Tùy chỉnh các cài đặt của widget (nếu có) và lưu lại thay đổi.

Mỗi plugin có những cài đặt và tùy chỉnh khác nhau, hãy đọc kỹ hướng dẫn của plugin để tận dụng tối đa các tính năng của nó.

Tùy Chỉnh Code để Thêm Form Đăng Nhập

Nếu bạn muốn có một form đăng nhập hoàn toàn tùy chỉnh, bạn có thể sử dụng code để thêm form vào sidebar. Phương pháp này đòi hỏi kiến thức về HTML, CSS và PHP.

Các bước thực hiện:

Tạo một file mới trong thư mục theme của bạn, ví dụ: `login-form.php`.
Chèn code HTML và PHP để tạo form đăng nhập. Dưới đây là một ví dụ đơn giản:


    <?php if ( ! is_user_logged_in() ) : ?>
      <form action="<?php echo wp_login_url(); ?>" method="post">
        <p>
          <label for="user_login">Username<br />
          <input type="text" name="log" id="user_login" class="input" value="<?php echo esc_attr(wp_get_cookie_value('wp-postpass_')); ?>" size="20" />
          </label>
        </p>
        <p>
          <label for="user_pass">Password<br />
          <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
          </label>
        </p>
        <p class="forgetmenot"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> <label for="rememberme">Remember Me</label></p>
        <p class="submit">
          <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" />
          <input type="hidden" name="redirect_to" value="<?php echo esc_url( home_url( add_query_arg( array(), $wp->request ) ) ); ?>" />
        </p>
      </form>
    <?php else : ?>
      <p>Welcome, <?php echo $current_user->display_name; ?></p>
      <p><a href="<?php echo wp_logout_url( home_url() ); ?>">Log Out</a></p>
    <?php endif; ?>

Trong file `functions.php` của theme, thêm code để tạo một widget tùy chỉnh:


    <?php
    // Creating the widget
    class Login_Widget extends WP_Widget {

      function __construct() {
        parent::__construct(

        // Base ID of your widget
        'login_widget',

        // Widget name will appear in UI
        __('Login Form Widget', 'login_widget_domain'),

        // Widget description
        array( 'description' => __('Simple Login Form Widget', 'login_widget_domain'), )
        );
      }

      // Creating widget front-end
      public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );

        // before and after widget arguments are defined by themes
        echo $args['before_widget'];
        if ( ! empty( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];

        // This is where you run the code and display the output
        include( get_template_directory() . '/login-form.php');

        echo $args['after_widget'];
      }

      // Widget Backend
      public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) ) {
          $title = $instance[ 'title' ];
        }
        else {
          $title = __('New title', 'login_widget_domain');
        }
        // Widget admin form
        ?>
        <p>
          <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <?php
      }

      // Updating widget replacing old instances with new
      public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
      }
    } // Class Login_Widget ends here

    // Register and load the widget
    function load_widget() {
      register_widget( 'Login_Widget' );
    }
    add_action( 'widgets_init', 'load_widget' );
    ?>

Điều hướng đến Appearance > Widgets (Giao diện > Widgets).
Bạn sẽ thấy một widget mới có tên “Login Form Widget”. Kéo và thả widget này vào sidebar mong muốn.
Tùy chỉnh title của widget (nếu cần) và lưu lại thay đổi.

Code trên chỉ là một ví dụ cơ bản. Bạn có thể tùy chỉnh HTML, CSS và PHP để tạo ra một form đăng nhập phù hợp với giao diện và chức năng mà bạn mong muốn.

Tùy Biến Giao Diện Form Đăng Nhập

Dù bạn sử dụng widget mặc định, plugin, hay code tùy chỉnh, việc tùy biến giao diện form đăng nhập là rất quan trọng để đảm bảo nó hòa nhập với tổng thể website của bạn.

Sử dụng CSS: Bạn có thể sử dụng CSS để thay đổi màu sắc, font chữ, kích thước, và các thuộc tính khác của form đăng nhập.
Tùy chỉnh plugin: Nhiều plugin cung cấp các tùy chọn tùy chỉnh giao diện trực tiếp trong trang cài đặt của plugin.
Chỉnh sửa code: Nếu bạn sử dụng code tùy chỉnh, bạn có thể chỉnh sửa trực tiếp HTML và CSS để tạo ra giao diện mong muốn.

Ví dụ: Sử dụng CSS để tùy chỉnh form đăng nhập

Bạn có thể thêm CSS vào file `style.css` của theme hoặc sử dụng Customizer (Giao diện > Tùy biến > CSS bổ sung) để thêm CSS tùy chỉnh.


    /* Customize Login Form */
    .widget form input[type="text"],
    .widget form input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
    }

    .widget form input[type="submit"] {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }

    .widget form input[type="submit"]:hover {
      background-color: #0056b3;
    }

Lưu Ý Về Bảo Mật

Khi thêm form đăng nhập, đặc biệt là khi sử dụng code tùy chỉnh, bạn cần chú ý đến bảo mật để tránh các lỗ hổng có thể bị khai thác.

Sử dụng hàm WordPress: Sử dụng các hàm WordPress như `wp_login_url()` và `wp_logout_url()` để đảm bảo tính bảo mật.
Kiểm tra đầu vào: Luôn kiểm tra và làm sạch dữ liệu đầu vào từ form để tránh tấn công SQL injection và XSS.
Sử dụng HTTPS: Đảm bảo website của bạn sử dụng HTTPS để mã hóa dữ liệu truyền giữa người dùng và máy chủ.

Kết Luận

Thêm form đăng nhập vào sidebar WordPress là một cách hiệu quả để cải thiện trải nghiệm người dùng. Tùy thuộc vào nhu cầu và trình độ kỹ thuật của bạn, bạn có thể chọn một trong các phương pháp đã trình bày trong bài viết. Đừng quên tùy biến giao diện và đảm bảo tính bảo mật để có một form đăng nhập hoàn hảo.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Thêm form đăng nhập sidebar WordPress