Bài viết này hướng dẫn tạo trang Cấu hình (Theme Options) cho giao diện Clean Blog. Các nội dung cấu hình gồm Meta Description, Meta Keywords, hình ảnh mặc định mạng xã hội, các liên kết mạng xã hội, thêm nội dung ở header và footer.

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:

Theme Options

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.