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