WordPress theme add background management custom field panel option keywords

In the process of making the Wordpress theme, we want to add some background management items, such as uploading the logo, Meta keywords and description, and the bottom copyright information of the footer, etc., so as to make our theme more flexible and expandable.

We need to think about three issues:
1. Implementation of the back-end interface
2. Writing to the database
3. Calling the front-end of the website. Of course, the project we added today needs to view the source code of the web page

1. Background interface implementation and data submission

1. Interface effect preview

2. Create an inc folder in the root directory of the theme , and create a bootstrapwp-functions.php file in the inc file.
3. Open functions.php and import the file bootstrapwp-functions.php we created.

require get_template_directory() . '/inc/bootstrapwp-functions.php';

4. Enter the following code in bootstrapwp-functions.php

<?php
     function getOptions() {
        $options = get_option('cnblogs_options');
 
        if (!is_array($options)) {
            $options['meta_keywords'] = '';
            update_option('cnblogs_options', $options);
        }
        return $options;
    }
     /* 初始化 */
    function init() {        
        if(isset($_POST['input_save'])) {
            $options = getOptions();
            $options['meta_keywords'] = stripslashes($_POST['meta_keywords']);
            update_option('cnblogs_options', $options);
        } else {
            getOptions();
        }
         add_theme_page("主题选项", "主题选项", 'edit_themes', basename(__FILE__),  'display');
    }
     /* 界面 */
    function display() {
        $options = getOptions();
?>
 <form action="#" method="post" enctype="multipart/form-data" name="op_form" id="op_form">
    <div class="wrap">
        <h2>当前主题选项</h2>
         <table>
            <tbody>
                <tr>
                    <td>Meta KeyWords</td>                   
                </tr>
				<tr> <td>
                        <label>
                            <textarea name="meta_keywords" cols="50" rows="10" id="meta_keywords" style="width:98%;font-size:12px;" ><?php echo($options['meta_keywords']); ?></textarea>
                        </label>
                    </td></tr>
            </tbody>
        </table>
         <p class="submit">
            <input type="submit" name="input_save" value="保存" />
        </p>
    </div>
 
</form>
 <?php
    }
     add_action('admin_menu', 'init');
 ?>

get_optionThe function gets the option value; update_optionupdates the option. We define an “cnblogs_options”option here . In order to separate it from WP's own options, it is defined here as an array. The php array can be used as a C# dictionary collection, where the dictionary item " meta_keywords" is defined .

add_theme_page The function inserts a "theme options" menu under the background page -> appearance menu.
add_action('admin_menu','init')It is equivalent to adding events and event handlers.
initThe function judges that if the "input_save"save button is clicked and the form is submitted, the changes are saved.

Second, the front desk page view

We enter the following code in the header.php file

<meta name="keywords" content="<?php $cnblogsopt=get_option('cnblogs_options');echo $cnblogsopt['meta_keywords'];?>"/>

After you edit the meta_keywords in the background and submit and save, you can see the content you just entered on the front page-view the source code of the page, which is very convenient for modifying the theme.
In this way, users of each topic can flexibly modify the keywords of the webpage.

Articles you may be interested in:

---

▪  There is no plugin in the WordPress background to display the article and category ID

▪  Comprehensive solution to improve the opening speed of WordPress foreign themes

▪  WordPress allows your web pages to display different titles

▪  Detailed explanation of WordPress database key file wp-config.php

▪  WordPress uses the register_post_type function to create custom post types:

▪  Detailed explanation of WordPress database and table structure function

▪  WordPress upgrade encountered Briefly unavailable for scheduled maintenance solution

▪  Use Bootstrap to build your responsive WordPress theme (6)

▪  WordPress4.4 optimizes wp-json link and embeds function

▪  WordPress article page adds font size to increase and decrease link size