Wordpress 17 May, 2021 15:05

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

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

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'); ?>

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.

Leave a reply

Your email address will not be published. Required fields are marked *

0 comments