LẬP TRÌNH PLUGIN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 06: Tạo trang quản lý Options trong WordPress

Vận dụng các kiến thức về Options API trong WordPress thì trong bài này mình sẽ hướng dẫn các bạn tạo một trang quản lý các options trong admin.

Ở bài trước mình có đưa ra một ví dụ về quản lý thông tin usernamemật khẩu của email, vậy thì trong bài này chúng ta sẽ tạo ra một trang quản lý hai thông tin này, tức là người dùng có thể sửa và thay đổi giá trị của chúng.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để tạo được trang quản lý Options này thì bạn sẽ phải thực hiện lần lượt theo từng bước mà mình sẽ trình bày bên dưới đây.

1. Tạo admin menu quản lý các options

Khi bạn đăng nhập vào hệ thống quản lý admin thì sẽ thấy một giao diện gồm nhiều menu như sau:

admin menu list png

Đây chính là các menu mặc định (cố định) của WordPress.

Vấn đề tìm hiểu tất cả các menu này thì mình sẽ dành cho một bài khác. Trong bài này mình sẽ hướng dẫn các bạn cách thêm một menu đơn giản thôi nhé, và vị trí mình sẽ thêm là một menu con nằm bên trong mục Appearance với tên là Theme Options, khi click vào menu này thì sẽ chuyển hướng sang trang quản lý thông tin tài khoản Gmail.

Nếu bạn đã thực hành theo bài Options API trong WordPress thì hãy vào file option-api.php và xóa đi tất cả những đoạn code trong đó.

Nếu bạn xem bài này lần đầu thì hãy tạo một plugin y như trong bài các bước tạo plugin WordPress, sau đó tạo thêm file option-api.php nằm trong thư mục plugins/wp-learn/includes, cuối cùng đừng quên dùng hàm require để thêm file mới tạo đó vào file chính của plugin.

cau truc folder plugin JPG

Mở file option-api.php lên và nhập nội dung như sau:

// Hàm bổ sung menu con vào một menu cha
function add_submenu_options()
{
    add_submenu_page(
            'themes.php', // Menu cha
            'Theme Options', // Tiêu đề của menu
            'Theme Options', // Tên của menu
            'manage_options',// Vùng truy cập, giá trị này có ý nghĩa chỉ có supper admin và admin đc dùng
            'theme-options', // Slug của menu
            'access_menu_options' // Hàm callback hiển thị nội dung của menu
    );
}

// Thêm hành động hiển thị menu con vào Action admin_menu Hooks
add_action('admin_menu', 'add_submenu_options');

Đoạn code này sẽ hiển thị một menu con nằm bên trong menu cha Appearance.

admin menu theme options png

Bạn thử click vào menu Theme Options thì sẽ nhận được một trang thông báo lỗi như sau (tùy vào phần mềm bạn đang dùng là xampp hay vertrigo sẽ có giao diện lỗi khác nhau):

missing callback function menu page png

Lỗi này có ý nghĩa là bạn đã thiếu một hàm callback tên là access_menu_options. access_menu_options chính là giá trị mà ta đã truyền vào trong đoạn code add_submenu_page. Để hết lỗi thì bạn tạo cho tôi một hàm tên là access_menu_options nằm trong file option-api.php luôn nhé.

// Hàm bổ sung menu con vào một menu cha
function add_submenu_options()
{
    add_submenu_page(
            'themes.php', // Menu cha
            'Theme Options', // Tiêu đề của menu
            'Theme Options', // Tên của menu
            'manage_options',// Vùng truy cập, giá trị này có ý nghĩa chỉ có supper admin và admin đc dùng
            'theme-options', // Slug của menu
            'access_menu_options' // Hàm callback hiển thị nội dung của menu
    );
}

// Hàm xử lý khi click vào menu
function access_menu_options()
{
    echo '<h1>Welcome to Theme Options Page</h1>';
}

// Thêm hành động hiển thị menu con vào Action admin_menu Hooks
add_action('admin_menu', 'add_submenu_options');

Chạy lại trang này bạn sẽ thấy không còn thông báo lỗi nữa.

2. Tạo giao diện form quản lý Theme Options

Hàm access_menu_options sẽ có nhiệm vụ xử lý hiển thị giao diện của form. Tuy nhiên để dễ quản lý file thì bạn tạo một folder tên là template nằm bên trong thư mục public, sau đó tạo thêm một file theme-option.php bên trong thư mục template dùng để hiển thị form, cuối cùng là require file theme-option.php ở trong hàm access_menu_options.

Cấu trúc folder:

cau truc folder plugin theme option png

Nội dung trong hàm access_menu_options:

// Hàm xử lý khi click vào menu
function access_menu_options()
{
    require('template/theme-option.php');
}

Nội dung file theme-option.php:

<h1>Quản lý theme options</h1>
<form method="post" action="">
    <table>
        <tr>
            <td>Email</td>
            <td>
                <input type="text" name="email" value=""/>
            </td>
        </tr>
        <tr>
            <td>Password</td>
            <td>
                <input type="text" name="password" value=""/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" name="save-theme-option" value="Save Theme Option"/>
            </td>
        </tr>
    </table>
</form>

Chạy lạ menu này thì bạn sẽ thấy một giao diện như sau:

theme option png

Như vậy là chúng ta đã hoàn thành bước 2, thật tuyệt vời.

3. Hiển thị thông tin trước khi cập nhật

Bây giờ chúng ta sẽ code chức năng hiển thị thông tin lên các ô input để người dùng có thể chỉnh sửa bằng cách sử dụng Options API get_option.

Bạn sửa lại hàm access_menu_options như sau:

// Hàm xử lý khi click vào menu
function access_menu_options()
{
    
    
    // Lấy thông tin trong bảng Options
    $email = get_option('mailer_gmail_username');
    $pass = get_option('mailer_gmail_password');
    
    require('template/theme-option.php');
}

Sau đó qua file theme-option.php sửa lại như sau:

<h1>Quản lý theme options</h1>
<form method="post" action="">
    <table>
        <tr>
            <td>Email</td>
            <td>
                <input type="text" name="email" value="<?php echo $email; ?>"/>
            </td>
        </tr>
        <tr>
            <td>Password</td>
            <td>
                <input type="text" name="password" value="<?php echo $pass; ?>"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" name="save-theme-option" value="Save Theme Option"/>
            </td>
        </tr>
    </table>
</form>

4. Xử lý lưu thông tin Options

Bạn hãy để ý form quản lý option mình không truyền đường dẫn vào thuộc tính action, vì vậy khi submit form nó sẻ xử lý tại trang này luôn.

Bạn sửa lại function access_menu_options như sau:

// Hàm xử lý khi click vào menu
function access_menu_options()
{
    if (!empty($_POST['save-theme-option']))
    {
        $email = $_POST['email'];
        $pass = $_POST['password'];
        
        // Cập nhật (nếu chưa có thì hệ thống tự thêm mới)
        update_option('mailer_gmail_username', $email);
        update_option('mailer_gmail_password', $pass);
    }
    
    // Lấy thông tin trong bảng Options
    $email = get_option('mailer_gmail_username');
    $pass = get_option('mailer_gmail_password');
    
    require('template/theme-option.php');
}

Và đây chính là bước cuối cùng của chức năng quản lý options này. Bạn vào trang này và thực hiện cập nhật nội dung 2 thông tin trên để xem thành quả nhé :)

theme option can ban png

5. Lời kết

Trong bài này mình chỉ hướng dẫn cách sử dụng căn bản và không có kết hợp các chức năng bảo mật trong WordPress nên các bạn hãy dùng để tham khảo thôi nhé, sau này khi nói đến vấn đề bảo mật thì chúng ta sẽ làm lại một cách chuyên nghiệp hơn.

Bài này mình có sử dụng các hàm chưa học về tạo menu con, vì vậy bài tiếp theo mình sẽ trình bày về vấn đề này.

Cùng chuyên mục:

Cập nhật nhanh 3 bí kíp thiết kế web đẹp mới nhất 2021

Cập nhật nhanh 3 bí kíp thiết kế web đẹp mới nhất 2021

Sở hữu website đẹp, hấp dẫn và chuyên nghiệp là điều mà ...

Dịch vụ cài đặt blog bằng WordPress miễn phí

Dịch vụ cài đặt blog bằng WordPress miễn phí

Website là một công cụ không thể thiếu khi bán hàng online, nó giúp ta…

Bài 05: Options API trong WordPress: add_option / get_option ...

Bài 05: Options API trong WordPress: add_option / get_option ...

Trong database của WordPress bạn sẽ thấy một table ten là [prefix]_options, table này sẽ…

Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress

Bài 04: Tìm hiểu Hooks , Action và Filter trong WordPress

Bạn đã từng nghe khái niệm lập trình hướng sự kiện trong các Framework như…

Bài 02: WordPress API là gì? Danh sách API trong WordPress

Bài 02: WordPress API là gì? Danh sách API trong WordPress

Đáng lẽ mình không viết bài này nhưng lúc đang viết bài tiếp theo thì…

Cách tùy biến theme WordPress căn bản cho người mới bắt đầu

Cách tùy biến theme WordPress căn bản cho người mới bắt đầu

Khi [cài đặt WordPress trên Hosting] xong thì bạn có thể cài đặt theme để…

Hướng dẫn làm website WordPress chạy tiếp thị liên kết với AT

Hướng dẫn làm website WordPress chạy tiếp thị liên kết với AT

Ngày nay, công nghệ ngày càng phát triển dẫn đến khái niệm [tiếp thị liên…

Tổng hợp mã CSS thường dùng để tùy biến theme WordPress

Tổng hợp mã CSS thường dùng để tùy biến theme WordPress

WordPress là một CMS dùng để làm website rất phổ biến, hay nói chính xác…

Đánh giá GeneratePress - Cách sử dụng theme GeneratePress

Đánh giá GeneratePress - Cách sử dụng theme GeneratePress

Nếu bạn đang muốn tìm kiếm một theme với các tiêu chí nhẹ, nhanh và…

Làm blog cá nhân bằng WordPress với theme GeneratePress

Làm blog cá nhân bằng WordPress với theme GeneratePress

Thời gian qua chắc hẳn bạn đã nghe đến theme GeneratePress rồi phải không nào?…

Cài đặt WordPress trên localhost

Cài đặt WordPress trên localhost

WordPress được lập trình bằng ngôn ngữ PHP và sử dụng MySQL để lưu trữ,…

Bài 01: WordPress là gì? Nên làm website bằng WordPress?

Bài 01: WordPress là gì? Nên làm website bằng WordPress?

WordPress là một CMS được phát triển trên ngôn ngữ lập trình PHP ...

Tặng license theme Generatepress khi mua Hosting Tinohost

Tặng license theme Generatepress khi mua Hosting Tinohost

Chào các bạn, hiện nay WordPress đang trở thành một phổ biến nhất thế giới,…

12 Wordpress plugin tốt nhất nên dùng cho website WordPress 2021

12 Wordpress plugin tốt nhất nên dùng cho website WordPress 2021

Bạn vừa tạo một blog WordPress mới và đang phân vân không biết nên chọn…

Bài 12: Custom Taxonomy  trong WordPress

Bài 12: Custom Taxonomy trong WordPress

Bài trước mình đã hướng dẫn bạn tạo một thể loại bài viết mới bằng…

Bài 11: Tạo Custom Post Type trong WordPress

Bài 11: Tạo Custom Post Type trong WordPress

Đây là các thể loại mặc định có sẵn sau khi bạn cài đặt WordPress.…

Bài 10: Hiển thị metadata ngoài frontend

Bài 10: Hiển thị metadata ngoài frontend

Sẵn có bạn hỏi làm thế nào để hiển thị nội dung bài viết ra…

Bài 09: Bốn bước custom Meta Boxes trong WordPress

Bài 09: Bốn bước custom Meta Boxes trong WordPress

Tới bài thứ chín này thì khái niệm Custom Meta Boxes không còn xa lạ…

Bài 08: Metadata API trong WordPress

Bài 08: Metadata API trong WordPress

WordPress sử dụng mô hình EAV nhằm giúp lập trình viên có thể tùy biến…

Bài 07: Custom Meta Boxes trong WordPress

Bài 07: Custom Meta Boxes trong WordPress

WordPress là một CMS nên hệ thống dữ liệu của nó chỉ dừng lại ở…

Top