Loading...

Hướng dẫn tạo thêm config options trong wordpress


Lâu lâu rãnh viết bài chia sẽ cho anh em đang làm wordpress mà muốn load thêm config từ table wp_options

Ngồi dạo 1 vòng trên mạng ở stackoverflow thì có nhiều bài share cũng khá hay ngồi chụp hình chia sẽ cho những anh em nào quan tâm.

Để viết thêm 1 menu có các options thì có 4 step đơn giản gồm các bước sau:

  1. Tạo 1 function myplugin_register_settings
  2. Gắn vào menu add_options_page
  3. Tạo 1 function myplugin_option_page form trình bày các options cần thêm.
  4. Cách sử dụng bên ngoài view.

Bây giờ mình sẽ đi vào từng step.

[the_ad id=”868″]

Bước 1: Tạo 1 function myplugin_register_settings

  • Đầu tiên vào file function.php của theme sau đó tạo 1 function myplugin_register_settings
  • Ở đây mình đang thêm: phone, hotline, email, etc..
  • Cấu trúc của 1 field gồm 2 phần
 add_option('config_phone', 'gia_tri_mac_dinh');
 register_setting('myplugin_options_group', 'config_phone', 'myplugin_callback');
  • Như thế bạn có thể khai báo thêm bao nhiêu tùy ý, dưới đây là ví dụ của mình.
  • Các khai nào để lưu lại giá trị trong database của mình.
Thiết kế website TWEB
if (!function_exists('myplugin_register_settings')) {
    function myplugin_register_settings()
    {
        add_option('config_hotline', '');
        register_setting('myplugin_options_group', 'config_hotline', 'myplugin_callback');

        add_option('config_email', '');
        register_setting('myplugin_options_group', 'config_email', 'myplugin_callback');

        add_option('config_linkedin', '');
        register_setting('myplugin_options_group', 'config_linkedin', 'myplugin_callback');

        add_option('config_address', '');
        register_setting('myplugin_options_group', 'config_address', 'myplugin_callback');

        add_option('config_telegram', '');
        register_setting('myplugin_options_group', 'config_telegram', 'myplugin_callback');

        add_option('config_facebook', '');
        register_setting('myplugin_options_group', 'config_facebook', 'myplugin_callback');

        add_option('config_google', '');
        register_setting('myplugin_options_group', 'config_google', 'myplugin_callback');

        add_option('config_youtube', '');
        register_setting('myplugin_options_group', 'config_youtube', 'myplugin_callback');

        add_option('config_website', '');
        register_setting('myplugin_options_group', 'config_website', 'myplugin_callback');

        add_option('config_form_contact_id', '');
        register_setting('myplugin_options_group', 'config_form_contact_id', 'myplugin_callback');
    }
}
add_action('admin_init', 'myplugin_register_settings');

Bước 2: Gắn vào menu

  • Ở đây mình gắn vào menu Setting và đặt tên nó là Config for TWEB. Copy đoạn code sau gắn vào dưới function bên trên myplugin_register_settings
if (!function_exists('myplugin_register_options_page')) {
    function myplugin_register_options_page()
    {
        add_options_page('Config for TWEB Business', 'Config for TWEB', 'manage_options', 'myplugin',
            'myplugin_option_page');
    }
}
add_action('admin_menu', 'myplugin_register_options_page');
  • Reload page (F5) lại sẽ thấy kết quả như hình dưới.
Thiết kế website TWEB

Bước 3: Trình bày load ra ngoài view

  • Ở đây mình đang trình bay basic bằng table, mọi người có thể css lại theo tùy ý mình
  • Tiếp tục copy function này đặt bên dưới add_action(‘admin_menu’, ‘myplugin_register_options_page’);

if (!function_exists('myplugin_option_page')) {
    function myplugin_option_page()
    {
        ?>
        <div>
            <?php screen_icon(); ?>
            <h2>My Plugin Config TWEB Business</h2>
            <form method="post" action="options.php">
                <?php echo settings_fields('myplugin_options_group'); ?>
                <table style="width: 100%">
                    <tr>
                        <th style="text-align: left" width="100">
                            <label for="config_phone">Phone</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_phone" name="config_phone"
                                   value="<?php echo get_option('config_phone'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_hotline">Hotline</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_hotline" name="config_hotline"
                                   value="<?php echo get_option('config_hotline'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_email">Email</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_email" name="config_email"
                                   value="<?php echo get_option('config_email'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_address">Address</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_address" name="config_address"
                                   value="<?php echo get_option('config_address'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_telegram">Telegram</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_telegram" name="config_telegram"
                                   value="<?php echo get_option('config_telegram'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_facebook">Facebook</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_facebook" name="config_facebook"
                                   value="<?php echo get_option('config_facebook'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_youtube">Youtube</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_youtube" name="config_youtube"
                                   value="<?php echo get_option('config_youtube'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_google">Google</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_google" name="config_google"
                                   value="<?php echo get_option('config_google'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_linkedin">LikeIn</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_linkedin" name="config_linkedin"
                                   value="<?php echo get_option('config_linkedin'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_website">Website</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_website" name="config_website"
                                   value="<?php echo get_option('config_website'); ?>"/>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: left">
                            <label for="config_form_contact_id">ID Contact Form</label>
                        </th>
                        <td>
                            <input style="width: 100%" type="text" id="config_form_contact_id" name="config_form_contact_id"
                                   value="<?php echo get_option('config_form_contact_id'); ?>"/>
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }
}

Cấu trúc đơn giản, bạn chỉ cần thêm vào thay đổi thông tin trong đây

<tr>
    <th style="text-align: left" width="100">
        <label for="config_phone">Phone</label>
    </th>
    <td>
        <input style="width: 100%" type="text" id="config_phone" name="config_phone"
               value="<?php echo get_option('config_phone'); ?>"/>
    </td>
</tr>

[atcoupon type=”hostinger”]

Cuối cùng ra ngoài view gọi sử dụng đơn giản bằng code

<?php echo get_option('config_address'); ?>
Thiết kế website TWEB

Như vậy là mình có thể tự thêm customer config từ table wp_options tùy ý mình.

Mọi người có thêm chia sẽ gì hay nào cùng comment chia sẽ bên dưới.

# Bài viết cùng chuyên mục