Theme WordPress: Trang Cấu hình (Theme Options)

Nội dung tập tin theme-options.php

<?php
add_action('admin_init', 'init_theme_options_init');
add_action('admin_menu', 'init_theme_options_add_page');

/**
 * Init plugin options to white list our options
 */
function init_theme_options_init() {
    register_setting('init_options', 'init_theme_options', 'theme_options_validate');
}

/**
 * Load up the menu page
 */
function init_theme_options_add_page() {
    add_menu_page(__('Cấu hình', 'inittheme'), __('Cấu hình', 'inittheme'), 'edit_theme_options', 'theme-options', 'init_theme_options_do_page');
}

/**
 * Create the options page
 */
function init_theme_options_do_page() {
    global $select_options, $radio_options;
    if (!isset($_REQUEST['settings-updated']))
        $_REQUEST['settings-updated'] = false;
    ?>

<div class="wrap">
    <?php screen_icon(); ?>
    <h2>Cấu hình</h2>
    <?php if (false !== $_REQUEST['settings-updated']) : ?>
    <div class="updated fade">
        <p><strong><?php _e('Đã lưu cấu hình!', 'inittheme'); ?></strong></p>
    </div>
    <?php endif; ?>
    <form method="post" action="options.php">
        <?php settings_fields('init_options'); ?>
        <?php $options = get_option('init_theme_options'); ?>
        <div id="content-explorer" style="margin-top:8px">
            <table class="wp-list-table widefat" cellspacing="0">
                <thead>
                    <tr>
                        <th>Tên</th>
                        <th>Giá trị</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Mô tả</td>
                        <td><textarea type="text" name="init_theme_options[metadescription]" style="width: 100%;" placeholder="Mô tả..." rows="4"><?php esc_attr_e($options['metadescription']); ?></textarea></td>
                    </tr>
                    <tr>
                        <td>Từ khóa</td>
                        <td><input type="text" name="init_theme_options[metakeywords]" style="width: 100%;" placeholder="Từ khóa..." value="<?php esc_attr_e($options['metakeywords']); ?>"></td>
                    </tr>
                    <tr>
                        <td>Hình ảnh cho MXH</td>
                        <td><input type="url" name="init_theme_options[socialsimg]" style="width: 100%;" placeholder="URL..." value="<?php esc_attr_e($options['socialsimg']); ?>"></td>
                    </tr>
                    <tr>
                        <td>Facebook</td>
                        <td><input type="url" name="init_theme_options[facebook]" style="width: 100%;" placeholder="URL..." value="<?php esc_attr_e($options['facebook']); ?>"></td>
                    </tr>
                    <tr>
                        <td>Twitter</td>
                        <td><input type="url" name="init_theme_options[twitter]" style="width: 100%;" placeholder="URL..." value="<?php esc_attr_e($options['twitter']); ?>"></td>
                    </tr>
                    <tr>
                        <td>Google+</td>
                        <td><input type="url" name="init_theme_options[googleplus]" style="width: 100%;" placeholder="URL..." value="<?php esc_attr_e($options['googleplus']); ?>"></td>
                    </tr>
                    <tr>
                        <td>Header Script</td>
                        <td><?php wp_editor($options['headerscript'], 'init_theme_options[headerscript]', array('media_buttons' => false, 'textarea_rows' => 10)); ?></td>
                    </tr>
                    <tr>
                        <td>Footer Script</td>
                        <td><?php wp_editor($options['footerscript'], 'init_theme_options[footerscript]', array('media_buttons' => false, 'textarea_rows' => 10)); ?></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- #content-explorer -->
        
        <p>
            <input type="submit" class="button-primary" value="<?php _e('Lưu Cấu hình', 'inittheme'); ?>">
        </p>
    </form>
</div>
<?php
}

/**
 * Sanitize and validate input. Accepts an array, return a sanitized array.
 */
function theme_options_validate($input) {
    // Say our text option must be safe text with no HTML tags
    $input['metadescription'] = wp_filter_nohtml_kses($input['metadescription']);
    return $input;
}

Kết quả

Sau khi thêm nội dung trên, ta được trang sau:

Bấm vào hình để xem kích thước lớn hơn.

Bạn chỉ cần nhập giá trị và bấm Lưu cấu hình.

Sử dụng

Ở header.php, thêm đoạn mã sau trước </head>:

<?php
    $options = get_option('init_theme_options');
    echo $options['headerscript'];
?>

Ở footer.php sẽ có nội dung như sau:

<?php $options = get_option('init_theme_options'); ?>
    <hr>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <ul class="list-inline text-center">
                        <li> <a href="<?php echo $options['twitter']; ?>" target="_blank"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> </a> </li>
                        <li> <a href="<?php echo $options['facebook']; ?>" target="_blank"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> </span> </a> </li>
                        <li> <a href="<?php echo $options['googleplus']; ?>" target="_blank"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i> </span> </a> </li>
                    </ul>
                    <p class="copyright text-center text-muted">© <?php bloginfo('name'); echo ' ' . date('Y'); ?></p>
                </div>
            </div>
        </div>
    </footer>

<?php wp_footer(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<?php echo $options['footerscript']; ?>
</body>
</html>

Các phần Meta Description, Meta Keywords, Hình ảnh cho mạng xã hội sẽ dùng ở bài viết sau.