给wordpress后台添加一个文本式设置页面

有的wordpress主题、插件会给在后台给自己添加一个设置页面,以便使用者无需修改代码就能很方便的使用主题、插件。我之前还在文曦博客发表文章时,就曾两三次写过设置页面,你可以在搜索框进行搜索。今天,我们来重新讲讲如何给wordpress添加一个设置页面。

比如我之前就单独写过一个插件,用来设置一个子目录页面的参数,没有任何媒体文件,所以我在标题就写了文本式设置页面:

图片[1]-给wordpress后台添加一个文本式设置页面 - KEKC博客-KEKC博客
图片[2]-给wordpress后台添加一个文本式设置页面 - KEKC博客-KEKC博客

创建管理页面

主要用到两个钩子:

  • add_menu_page()– 创建新的顶级菜单页面,
  • add_submenu_page()– 创建子菜单页面。

上面的dsp是创建了个新的顶级菜单页面。如果你要将页面放到设置下,那就要使用第二个钩子了。

对于添加新的顶级菜单,我们可以这样:

add_action( 'admin_menu', 'kekc_cn_menu_page' );

function kekc_cn_menu_page() {

	add_menu_page(//主菜单
		'页面标题', // 相当于 <title>Title</title>
		'链接名称', // 菜单名称
		'manage_options', // 能力,就是谁可以管理新建的这个配置页
		'kekc_cn-slug', // 链接别名,类似于文章别名、分类别名,你可以添加后查看url,就知道他的意思了
		'kekc_cn_page_content', // 回调函数,用来展示页面内容的
		'dashicons-star-half', // 菜单的图标,你可以在这查看所有的图标https://developer.wordpress.org/resource/dashicons/#admin-site-alt3
		5 // 排序,意思是排在第几位
	);
       add_submenu_page(//子菜单
              'users.php',//主菜单,比如在用户下新建子菜单,也可以填上面的kekc_cn-slug
              '子菜单标题',
              '子菜单',
              'manage_options',
              'kekc_cn_sub-slug',//子菜单链接别名
              'kekc_cn_sub_page_content',//回调函数
              100
       );

}

function kekc_cn_page_content(){

	echo '这是一级菜单内容';

}
function kekc_cn_sub_page_content(){

	echo '这是二级菜单内容';

}

为了简化创建子菜单页面,你也可以使用add_dashboard_page()、add_posts_page()、add_pages_page()、add_comments_page()、add_theme_page()、add_plugins_page()、add_users_page()、add_management_page()或add_options_page()来创建页面。

做完上面的操作,你就会得到一个顶级菜单和二级菜单及其简单页面,可能说得不太清楚,对于创建菜单,我之后会专门出一篇文章。

添加form表单和保存设置

继续完善下我们的回调函数,我们完成一级菜单的设置页,采用wp_options表存储字段数据:

新建form表单:

function kekc_cn_page_content(){

	echo '<div class="wrap">
	<h1>一级菜单的设置项</h1>
	<form method="post" action="options.php">';
			
		settings_fields( 'kekc_cn_settings' ); // 设置字段组名
		do_settings_sections( 'kekc_cn-slug' ); // 设置完成跳转到哪个页面,这里设置你的页面别名(slug)就行
		submit_button();

	echo '</form></div>';

}

注册、设置字段:

add_action( 'admin_init',  'kekc_cn_register_setting' );

function kekc_cn_register_setting(){

	register_setting(//注册设置
		'kekc_cn_settings', // 设置组名
		'homepage_text', // 设置的字段key
		'sanitize_text_field' // 转义,防止漏洞,这里的是一个wordpress函数
	);

	add_settings_section(
		'some_settings_section_id', // section ID
		'', // title (如果需要)
		'', // 回调函数 (如果需要)
		'kekc_cn-slug' // 页面别名
	);

	add_settings_field(
		'homepage_text',
		'Homepage text',
		'kekc_cn_text_field_html', // function which prints the field
		'kekc_cn-slug', // page slug
		'some_settings_section_id', // section ID
		array( 
			'label_for' => 'homepage_text',
			'class' => 'kekc_cn-class', // for <tr> element
		)
	);

}

function kekc_cn_text_field_html(){

	$text = get_option( 'homepage_text' );

	printf(
		'<input type="text" id="homepage_text" name="homepage_text" value="%s" />',
		esc_attr( $text )
	);

}

防攻击:

让我们回到上一段代码中的函数。register_setting()

register_setting(
	'kekc_cn_settings',
	'homepage_text',
	'sanitize_text_field'
);

sanitize_text_field是一个处理字符串的作用,除了sanitize_text_field()外,还有intval()、absint()等,比如正整数示例:

register_setting( 'misha_settings', 'number_of_slides', 'absint' );

可能还有人要我的dsp插件

读完上面的代码,可能你在理解我的插件时,你会感觉很轻松,因为我写的时候也是小白一个,写多了,就理解其中的意思了:

<?php
/*
	Plugin Name:dateview设置插件
	Description:本插件是UESDTO后台可视化设置的插件,全称“dateview settings plugins”,简称“dsp”。
	Author: 殷江碧
	Author URI: https://www.kekc.cn
	Version: 1.0
*/


/* 注册激活插件时调用的函数 */ 
register_activation_hook( __FILE__, 'usp_install');
function usp_install() {
    /* 在数据库的 wp_options 表中添加一条记录,第二个参数为默认值 */ 
    if(!get_option('dateview_id')){//在安装插件时,如果不存在,则新增
    add_option("dateview_id", "4-16-18-5-6-8-9-3-14-12-1-13", '', 'yes');
    }

    if(!get_option('dateview_permission')){//在安装插件时,如果不存在,则新增
    add_option("dateview_permission", "1", '', 'yes');
    }

    if(!get_option('dateview_on')){//在安装插件时,如果不存在,则新增
    add_option("dateview_on", "yinjiangbi", '', 'yes');
    }

    if(!get_option('dateview_zhounumon')){//在安装插件时,如果不存在,则新增
    add_option("dateview_on", "0", '', 'yes');
    }

    if(!get_option('dateview_shangzhounum')){//在安装插件时,如果不存在,则新增
    add_option("dateview_on", "", '', 'yes');
    }

    if(!get_option('dateview_benzhounum')){//在安装插件时,如果不存在,则新增
    add_option("dateview_on", "", '', 'yes');
    }

    if(!get_option('dateview_pagetitle')){//在安装插件时,如果不存在,则新增
    add_option("dateview_pagetitle", "学习看板 - 联创博客", '', 'yes');
    }
}
/* 注册停用插件时调用的函数 */ 
register_deactivation_hook( __FILE__, 'usp_remove');
function usp_remove() {
    /* 删除 wp_options 表中的对应记录 */ 
    //delete_option('uesdto-xiaozu'); //禁用插件时删除配置项 
    delete_option('dateview_on'); //禁用插件时删除配置项 
}


function dateview_post() {
    update_option( 'dateview_permission', $_REQUEST['dateview_permission']);
    update_option( 'dateview_id', $_REQUEST['dateview_id']);
}
 
add_action('switch_theme', 'dateview_post');


//添加菜单
function register_dateviewsettings() { // whitelist options
  register_setting( 'dateviewoption-group', 'dateview_permission' );//页面权限设置
  register_setting( 'dateviewoption-group', 'dateview_id' );//不统计用户ID
  register_setting( 'dateviewoption-group', 'dateview_zhounumon' );//开启手动自定义周天数
  register_setting( 'dateviewoption-group', 'dateview_shangzhounum' );//上周天数
  register_setting( 'dateviewoption-group', 'dateview_benzhounum' );//本周天数
  register_setting( 'dateviewoption-group', 'dateview_zhoupostnum' );//每天需要更新的文章数
  register_setting( 'dateviewoption-group', 'dateview_pagetitle' );//页面title
}
if ( is_admin() ){ // admin actions
  add_action( 'admin_menu', 'dateview_menu' );
  add_action( 'admin_init', 'register_dateviewsettings' );
} else {
  // non-admin enqueues, actions, and filters
}
function dateview_menu() {
    add_menu_page("dateview设置", "dateview设置", 'administrator', 'dateview_menu', 'adminpage_html');//管理员显示该菜单,编辑,作者,投稿人等其他人则不显示
}
//添加菜单




function adminpage_html() {
    ?>
<div class="wrap">
  <h1>dateview设置</h1>
  <form method="post" action="options.php">  
    <?php /* 下面这行代码用来保存表单中内容到数据库 */ ?>  
    <?php wp_nonce_field('update-options');
    settings_fields( 'dateviewoption-group' );
    do_settings_sections( 'dateviewoption-group' );
    ?>
    
    <table class="form-table" role="presentation">
      <tbody>

        <tr>
          <th scope="row">dateview权限设置</th>
          <td>
            <fieldset>
              <legend class="screen-reader-text">
                <span>dateview</span>
              </legend>
              <label>
                <input type="radio" name="dateview_permission" value="0" <?php if(get_option('dateview_permission') == 0){echo "checked=\"checked\"";}?>>
                <span class="date-time-text format-i18n">关闭页面</span>
                <code>任何人不可看</code>
              </label>
              <br>
              <label>
                <input type="radio" name="dateview_permission" id="dateview_permission" value="1" <?php if(get_option('dateview_permission') == 1){echo "checked=\"checked\"";}?>>
                <span class="date-time-text date-time-custom-text">登录后可查看</span>
                <code>防止外人访问</code>
              </label>
              <br>
              <label>
                <input type="radio" name="dateview_permission" id="dateview_permission" value="2" <?php if(get_option('dateview_permission') == 2){echo "checked=\"checked\"";}?>>
                <span class="date-time-text date-time-custom-text">不限制</span>
                <code>任何人都可看</code>
              </label>
              <br>
            </fieldset>
          </td>
        </tr>

        <tr>
          <th scope="row">
            <label for="dateview_id">dateview不统计的ID</label>
          </th>
          <td>
            <input name="dateview_id" type="text" id="dateview_id" value="<?php echo get_option('dateview_id'); ?>" class="regular-text">
            <span class="date-time-text date-time-custom-text">如:1-2-5-7。排除ID为1和2和5和7的用户统计</span>
          </td>
        </tr>

        <tr>
          <th scope="row">
            <label for="dateview_zhoupostnum">每天需更新文章数</label>
          </th>
          <td>
            <input name="dateview_zhoupostnum" type="text" id="dateview_zhoupostnum" value="<?php echo get_option('dateview_zhoupostnum'); ?>" class="regular-text">
            <span class="date-time-text date-time-custom-text">设置每天数需要更新的篇数</span>
          </td>
        </tr>

        <tr>
          <th scope="row">开启自定义周天数</th>
          <td>
            <fieldset>
              <legend class="screen-reader-text">
                <span>开启自定义周天数</span>
              </legend>
              <label>
                <input type="radio" name="dateview_zhounumon" value="0" <?php if(get_option('dateview_zhounumon') == 0){echo "checked=\"checked\"";}?>>
                <span class="date-time-text format-i18n">关闭</span>
                <code>关闭自定义上周、本周的工作天数,自动从接口~~~获取上周、本周法定工作天数</code>
              </label>
              <br>
              <label>
                <input type="radio" name="dateview_zhounumon" id="dateview_zhounumon" value="1" <?php if(get_option('dateview_zhounumon') == 1){echo "checked=\"checked\"";}?>>
                <span class="date-time-text date-time-custom-text">开启</span>
                <code>开启自定义上周、本周的工作天数,记得修改下方设置</code>
              </label>
              <br>
            </fieldset>
          </td>
        </tr>

        <tr>
          <th scope="row">
            <label for="dateview_shangzhounum">上周工作天数</label>
          </th>
          <td>
            <input name="dateview_shangzhounum" type="text" id="dateview_shangzhounum" value="<?php echo get_option('dateview_shangzhounum'); ?>" class="regular-text">
            <span class="date-time-text date-time-custom-text">设置上周上班天数</span>
          </td>
        </tr>

        <tr>
          <th scope="row">
            <label for="dateview_benzhounum">本周工作天数</label>
          </th>
          <td>
            <input name="dateview_benzhounum" type="text" id="dateview_benzhounum" value="<?php echo get_option('dateview_benzhounum'); ?>" class="regular-text">
            <span class="date-time-text date-time-custom-text">设置本周上班天数</span>
          </td>
        </tr>

        <tr>
          <th scope="row">
            <label for="dateview_pagetitle">页面title</label>
          </th>
          <td>
            <input name="dateview_pagetitle" type="text" id="dateview_pagetitle" value="<?php echo get_option('dateview_pagetitle'); ?>" class="regular-text">
            <span class="date-time-text date-time-custom-text">设置数据页面的页面title</span>
          </td>
        </tr>

      </tbody>
    </table>
    <p class="submit">
      <input type="hidden" name="action" value="update" />  
      <input type="hidden" name="page_options" value="dateview_menu" />
      <input type="submit" name="submit" id="submit" class="button button-primary" value="保存更改">
    </p>
  </form>
</div>


<?php  
}
?>
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享