wordpress vue主题制作教程 wordpress自制主题

上一篇我们介绍了WordPress主题制作的基本知识，并且制作了一个简陋的WP博客园主题。在制作的过程中发现一个问题，就是WP后台没有设置Meta的keywords的地方。于是想自己增加一个设置界面。如果用phpmyadmin查看过WP的数据库结构，就很容易明白后台设置的原理：只不过是在WP_Options表中增加一条记录，当然我们是用WP提供的标准函数来操作数据库。

机制

我们登录后台时，WP如何将控制权交给我们呢？是去调用我们主题的哪个文件呢？约定：functions.php文件。此处有一陷阱：一旦我们的主题包含了functions.php，就在WP的请求响应处理管线中插入了一环，无论我们访问的是哪一个页面，都要经过functions.php，这显然不是我们想要的。我们需要的是：登录后台时才去执行functions.php里面的逻辑，用户访问前台网站不需要执行。这个“陷阱”可以通过Zend Studio的调试功能看到：

在functions.php中设置断点，然后访问前台index.php，却得到了上图的调用堆栈。这样的结果虽然有些意外，但让我们对WP的机制有了些了解，看来调试还是很重要的:) 下面会给出编码，来避免这个性能陷阱。

后台实现

了解了上面的陷阱以后，为了方便增加了一个theme-options.php文件来实现主题选项的逻辑，这样functions.php的代码就简化了：

<?php
if(is_admin())
    require ('theme-options.php');
?>

我们用is_admin()函数判断用户访问的是前台还是后台。

theme-options.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>
                    <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_option函数获取选项值；update_option更新选项。我们这里定义了一个“cnblogs_options”的选项，为了和WP自己的选项分开来，这里定义成数组形式。php的数组可以当成C#的字典集合使用，这里定义了字典项"meta_keywords“。

add_theme_page 函数在后台页面->外观菜单下插入一个"主题选项"的菜单。

当点击此菜单时调用display函数，显示设置界面。

add_action('admin_menu','init')相当于添加事件和事件处理程序。WP的常用actions参考这里。

init函数判断如果点击了"input_save"保存按钮，提交form表单，就保存更改。

前台调用：

header.php中添加以下代码

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