插件后台的设计与开发

对于简单的插件来说，可能无需设置，安装插件后启用功能即可。但是对于一些功能更复杂的插件，我们就需要为插件添加一个后台页面了，这节课我们来学习如何为插件设计、创建一个后台。

学习目标

通过这节课的学习将会为 gitchat_copyright 插件创建一个后台管理页面。

添加菜单

添加菜单项目

添加一级菜单

既然要设置菜单，我们肯定要有一个入口能够进入到插件的页面去。在上节课尝试使用 WordPress 自己的设置页面作为入口，但是这节课我们要自己创建一个页面，所以要添加自己的菜单项目。

这里要用到 add_menu_page 函数，这个函数的定义如下：

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null )

我们需要设置这7个参数，各个参数的含义如下：

page_title：页面的标题，会和title标签内显示的一样。
menu_title：在控制面板中显示的菜单名称。
capability：显示该操作项所需要的最低权限。具体权限可以参考官方文档。
menu_slug：菜单别名，需要是唯一的。
Function：显示该页面内容时调用的函数。
icon_url：菜单中图标的 url。这个参数除了粘贴 url，还可以粘贴 WordPress 官方的 helper css，比如 dashicons-chart-pie，具体可以在这里找到。或者是 base64 后的图标data:image/svg+xml;base64。
position：出现在菜单中的位置。具体的 Position 可以参考官方说明，需要注意，我们自己定义的 position 应该和官方的 position 不同，避免冲突。

接下来自定义一个一级菜单。

在我们的插件尾部添加如下代码：

/**
* 注册菜单项
*/
function gitchat_copyright_custom_menu(){
  add_menu_page( 
      'Gitchat 版权插件首页',
      'GitChat 版权插件',
      'manage_options',
      'gitchat_optionpage',
      'gitchat_custom_page',
      'dashicons-admin-generic',
      100
  ); 
}
add_action( 'admin_menu', 'gitchat_copyright_custom_menu' );

function gitchat_custom_page(){
  ?>
  <h1>GitChat 版权插件测试</h1>
  <?php
}

这里我们定义了一个页面 title 是 Gitchat 版权插件首页，菜单名为 GitChat 版权插件，权限为管理员权限，别名为 gitchat_optionpage ，图标为 dashicons-admin-generic ，放在所有菜单底部的插件。

需要注意的是，菜单的添加必须挂载在 admin_menu 这个 hook 上才行。

点击这个菜单项，就会进入到我们的页面了，可以看到定义的页面内容。

添加二级菜单

有些时候，一级菜单并不够我们用，可能需要两级菜单。添加二级菜单，我们需要用到 add_submenu_page 方法。

add_submenu_page( string $parent_slug, string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '' )

这个函数的定义和 add_menu_page 基本相同，唯一不同的是需要传入第一个参数，指定上级菜单，如果不指定，系统就不知道子菜单的上一级菜单是什么。

接下来，我们来添加一个子菜单。

在刚刚定义的 gitchat_copyright_custom_menu 函数中添加我们的子菜单函数。

新的代码如下：


/**
* 注册菜单项
*/
function gitchat_copyright_custom_menu(){
  add_menu_page( 
      'Gitchat 版权插件首页',
      'GitChat 版权插件',
      'manage_options',
      'gitchat_optionpage',
      'gitchat_custom_page',
      'dashicons-admin-generic',
      100
  ); 
  add_submenu_page(
    'gitchat_optionpage',
    "关于",
    "关于",
    'manage_options',
    'gitchat_aboutpage',
    'gitchat_about_page'
  );
}
add_action( 'admin_menu', 'gitchat_copyright_custom_menu' );

function gitchat_custom_page(){
  ?>
  <h1>GitChat 版权插件测试</h1>
  <?php
}
function gitchat_about_page(){
  ?>
  <h1>关于 GitChat</h1>
  <?php
}

这时刷新一下页面，就可以看到菜单加入了二级菜单。

点击其中的关于，就可以看到新加的页面了。

添加页面

使用 WordPress 自定义的样式

现在已经添加了自定义的菜单页面，接下来为这个页面添加内容。

相比于我们自己去设计样式，最简单的方式，是使用 WordPress 内置的样式，来展现我们的样式。这样体验也和 WordPress 官方的内容具有一致性，能够更好的表现出我们想要的内容。

使用 wrap 包裹我们的内容

在这个截图中，上面的内容使用的都是 h1，dan s 下方的内容明显要更适合 WordPress 的界面设计风格，这就是因为下面的内容被 wrap 类所包裹，展示的内容会按照 WordPress 官方的样式来书写。

<div class="wrap">
    <!--- Content -->
</div>

使用 WordPress 自带的信息提示的样式

我们在制作 WordPress 插件时，可能会用到一些提示，比如信息保存成功后的提示、信息出错的提示等等。这些 WordPress 官方提供了固定的样式，可以直接使用 WordPress 自己的样式来进行展示。

这方面我们可以直接复制这里的代码来显示：

<div id="message" class="updated">
    <p><strong>
        <!--- 保存信息 -->
    </strong></p>
</div>

<div id="message" class="error">
    <p><strong>
        <!--- 保存信息 -->
    </strong></p>
</div>

实现的效果如下：

这样的展示会更符合 WordPress 整体的体验。

使用 WordPress 的按钮样式

使用浏览器的普通按钮虽然也可以，但体验却差很多，设计也不一致，可以使用 WordPress 的按钮样式，来自定义页面的按钮。具体按钮的代码如下，可以根据自己的需要选择。

<input type="submit" name="test" value="普通按钮" />
<input type="submit" name="test" value="标准按钮" class="button" />
<input type="submit" name="test" value="主要按钮" class="button button-primary" />
<input type="submit" name="test" value="副按钮" class="button button-secondary" />
<input type="submit" name="test" value="大按钮" class="button button-large" />
<input type="submit" name="test" value="小按钮" class="button button-small" />
<input type="submit" name="test" value="超大按钮" class="button button-hero" />

a 链接也可以通过加入这些样式来美化。

使用 WordPress 自带的表单样式

WordPress 也提供了默认的表单样式，可以直接调用对应的样式来输出对应的样式。

<form method="POST" action="">
            <table class="form-table">
                <tr valign="top">
                    <th><label for="input-example">输入框</label></th>
                    <td><input id="input-example" name="input-example" /></td>
                </tr>
                <tr valign="top">
                    <th><label for="select-example">下拉框：</label></th>
                    <td>
                        <select name="select-example">
                        <option value="1">是</option>
                        <option value="0">否</option>
                        </select>
                    </td>
                </tr>
                <tr valign="top">
                    <th><label for="check-example">选择框</label></th>
                    <td><input type="checkbox" name="check-example" /></td>
                </tr>
                <tr valign="top">
                    <th><label for="radio-example">Radio </label></th>
                    <td>
                        <input type="radio" name="radio-example" value="是" /> 是
                        <input type="radio" name="radio-example" value="否" /> 否
                    </td>
                </tr>
                <tr valign="top">
                    <th><label for="textarea">文本框</label></th>
                    <td><textarea name="textarea"></textarea></td>
                </tr>
                <tr valign="top">
                    <td>
                        <input type="submit" name="save" value="保存" class="button-primary" />
                        <input type="submit" name="reset" value="重置" class="button-secondary" />
                    </td>
                </tr>
            </table>
        </form>

使用 WordPress 自带的表格样式

通过在表格上加入widefat striped两个类，就可以将我们的表格设置为 WordPress 的样式。

        <table class="widefat striped">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>达人课名称</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Angular 初学者快速上手教程</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>快速学习 Spring Boot 技术栈</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Webpack 达人的成长之路</td>
                </tr>
            </tbody>
        </table>

其他的一些样式，如果我在这里没有提到，你需要用，可以自己通过 Chrome 的开发者工具审查获得，或者到读者圈内提问。

选项页面设置

接下来完善我们的插件管理页面的内容。

修改 gitchat_custom_page 函数内容如下：

function gitchat_custom_page(){
  ?>
  <div class="wrap">
  <?php 
    if ($_POST['code'] != null && check_admin_referer( 'gitchat_copyright' )){
      update_option( 'gitchat_copyright_code', $_POST['code'] );
      $code = $_POST['code'];
      ?>
      <div id="message" class="updated"><p><strong>信息更新成功！</strong></p>
      </div>
      <?php
    }else{
      $code  = get_option('gitchat_copyright_code');
    }
    ?>
    <h1>GitChat 版权插件设置</h1>
    <form method="POST" action="">
            <table class="form-table">

                <tr valign="top">
                    <th><label for="textarea">版权代码</label></th>
                    <td><textarea name="code" col="30" row="10"><?php echo $code;?></textarea></td>
                </tr>
                <tr valign="top">
                    <td> 
                        <input type="submit" name="save" value="保存" class="button-primary" />
                        <input type="reset" name="reset" value="重置" class="button-secondary" />
                    </td>
                </tr>
            </table>
            <?php
                wp_nonce_field('gitchat_copyright');
            ?>
        </form>
  </div>

  <?php
}

这段代码中大部分都是我们在上面提到的表单内容。不再多讲，我来说一说里面的 PHP 代码。

<?php 
    if ($_POST && $_POST['code'] != null && check_admin_referer( 'gitchat_copyright' )){
      update_option( 'gitchat_copyright_code', $_POST['code'] );
      $code = $_POST['code'];
      ?>
      <div id="message" class="updated"><p><strong>信息更新成功！</strong></p>
      </div>
      <?php
    }else{
      $code  = get_option('gitchat_copyright_code');
    }
    ?>

这段代码主要是两个功能，首先判断是否是 Post 请求，判断 Post 请求中的 code 是否为空，以及这个插件的请求是否合法。如果 code 不为空，则使用 Post 的数据更新设置项，并提示更新成功；如果发来的请求不是 Post，则执行下方的获取代码，并赋值给 code 。

在 table 底部我加了一段代码：

<?php wp_nonce_field('gitchat_copyright'); ?>

这段代码可以帮助我们验证请求。

关于 `check_admin_referer` 和 `wp_nonce_field`

这两个函数是我们的第一次看见，这两个函数是为表单加入验证数据避免被恶意利用。wp_nonce_field 函数会在我们的表单中加入两段代码，用于后续的验证。

而 check_admin_referer会验证这两段代码是否匹配，如果不匹配，则会拒绝请求。

总结

这节课我们学习了如何构建插件的设置页面，后续会根据插件的复杂程度，你可以更加细化插件。

4 WP 插件后台设计与开发

插件后台的设计与开发

学习目标

添加菜单

添加菜单项目

添加一级菜单

添加二级菜单

添加页面

使用 WordPress 自定义的样式

使用 wrap 包裹我们的内容

使用 WordPress 自带的信息提示的样式

使用 WordPress 的按钮样式

使用 WordPress 自带的表单样式

使用 WordPress 自带的表格样式

选项页面设置

关于 `check_admin_referer` 和 `wp_nonce_field`

总结

results matching ""

No results matching ""

插件后台的设计与开发

学习目标

添加菜单

添加菜单项目

添加一级菜单

添加二级菜单

添加页面

使用 WordPress 自定义的样式

使用 wrap 包裹我们的内容

使用 WordPress 自带的信息提示的样式

使用 WordPress 的按钮样式

使用 WordPress 自带的表单样式

使用 WordPress 自带的表格样式

选项页面设置

关于 check_admin_referer 和 wp_nonce_field

总结

results matching ""

No results matching ""

关于 `check_admin_referer` 和 `wp_nonce_field`