您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程

WordPress添加自定义字段面板的步骤教程

雁玉2023-06-20WordPress教程已有人查阅

导读我们在WordPress中编写文章的时候,经常会用到一些自定义字段,如网页描述description和关键词keywords这两个meta标签,

我们在WordPress中编写文章的时候,经常会用到一些自定义字段,如网页描述description和关键词keywords这两个meta标签,关于这两个标签,可以看我之前写过的一篇文章:WordPress设置独立的Description和Keywords

通常在添加自定义字段和其值的时候,我们都是手动去"自定义字段"模块下拉框中去选择相应的字段,然后再输入其值,最后还要提交等待一小段时间,似乎有点麻烦。那么可不可以给这些常用的自定义字段创建一个单独的面板,直接在里面填内容就可以了呢?就像文章标签,直接添加标签即可,不需要单独提交。答案是可以的。下面我将教你如何操作,以下所有代码放到当前主题的functions.php中即可

一、创建需要的字段信息

这里将以添加两个自定义字段,名称分别为 _description_value 和 _keywords_value,你可以给下面数组添加多个元素,实现添加多个自定义字段的目的。

数组 头一个元素name为自定义字段的名称,在本代码中自定义字段的名称为name值加_value,以防止与其他代码发生冲突,如 _description_value;std为自定义字段的默认值,当你发表文章时该自定义字段没填任何值,那么将取默认值;title为自定义字段模块的标题,如文章编辑页的"摘要"、"分类"和"标签",这些都是模块名称。

$new_meta_boxes =array(
  "description" => array(
    "name" => "_description",
    "std" => "这里填默认的网页描述",
    "title" => "网页描述:"),

  "keywords" => array(
    "name" => "_keywords",
    "std" => "这里填默认的网页关键字",
    "title" => "关键字:"));
二、创建自定义字段输入框

以下代码将用于创建自定义域以及输入框,照写就是了

function new_meta_boxes() {
  global $post, $new_meta_boxes;

  foreach($new_meta_boxes as $meta_box) {
    $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

    if($meta_box_value == "")
      $meta_box_value = $meta_box['std'];

    // 自定义字段标题
    echo'<h3>'.$meta_box['title'].'</h3>';

    // 自定义字段输入框
    echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><br />';
  }
   
  echo '<input type="hidden" name="ludou_metaboxes_nonce" id="ludou_metaboxes_nonce" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';}
三、创建自定义字段模块

下面代码将在文章编辑页添加自定义字段模块,这其中这用了WordPress的添加模块函数add_meta_box。这与之前的文章WordPress文章编辑页删除相关模块所做的工作恰好相反。

function create_meta_box() {
  if ( function_exists('add_meta_box') ) {
    add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
  }}
四、保存文章数据

之前所有准备都做好了,最重要的还是保存我们的自定义字段中的信息。

function save_postdata( $post_id ) {
  global $new_meta_boxes;
   
  if ( !wp_verify_nonce( $_POST['ludou_metaboxes_nonce'], plugin_basename(__FILE__) ))
    return;
   
  if ( !current_user_can( 'edit_posts', $post_id ))
    return;
               
  foreach($new_meta_boxes as $meta_box) {
    $data = $_POST[$meta_box['name'].'_value'];

    if($data == "")
      delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
    else
      update_post_meta($post_id, $meta_box['name'].'_value', $data);
   }}
五、将函数连接到指定action(动作)

这是最后一步,也是最重要的一步,我们要做的是将函数连接到指定action(动作),以让WordPress程序执行我们之前编写的函数:

add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

好了,我们要做的就是这些了,现在你可以在你的主题中调用这两个自定义字段了,用文本编辑器打开主题目录下的header.php,将以下代码复制到</head>之前,就可以给你的网页自定义description和keywords标签了,更具体的操作请使用搜索引擎:

<?phpif (is_single()) {
  // 自定义字段名称为 description_value
  $description = get_post_meta($post->ID, "_description_value", true);

  // 自定义字段名称为 keywords_value
  $keywords = get_post_meta($post->ID, "_keywords_value", true);

  // 去除不必要的空格和HTML标签
  $description = trim(strip_tags($description));
  $keywords = trim(strip_tags($keywords));

  echo '<meta name="description" content="'.$description.'" />
<meta name="keywords" content="'.$keywords.'" />';
}
?>

本文标签:

很赞哦! ()

相关源码

  • (自适应)帝国cms7.5文章新闻博客整站源码( 带会员中心)本模板基于帝国CMS内核开发,为新闻资讯、个人博客及作品展示类网站设计。采用响应式布局技术,确保在手机、平板和电脑等不同设备上都能获得良好的浏览体验。查看源码
  • 宽屏自适应搬家家政快递物流公司网站模板该宽屏大气的响应式网站模板专为搬家公司、家政服务及物流快递企业设计,基于PbootCMS内核开发,通过自适应布局确保手机、PC等多终端体验一致,助力企业高效构建专业在线服务平台。查看源码
  • 自适应手机版五金机械阀门设备通用行业网站模板该PbootCMS内核开发的网站模板适用于阀门设备、五金机械类企业,通过更换文字图片也可快速适配其他工业领域。采用响应式设计,确保PC端与手机端数据同步,操作便捷,并附带测试数据。查看源码
  • (自适应)英文外贸电子设备网站模板三级子目录基于PbootCMS内核开发的响应式英文网站模板,为外贸企业打造,支持多行业快速适配。通过简洁高效的代码架构,帮助企业低成本构建专业海外形象,实现更好客户触达与订单转化。查看源码
  • (PC+WAP)红色厨具厨房用品设备pbootcms模板源码下载为厨具设备企业设计的响应式网站模板,采用PbootCMS内核开发,适用于商用厨房设备、家用厨具、厨房用品等企业展示。模板包含产品展示、新闻动态、案例中心等标准模块,助您快速搭建专业级行业网站。查看源码
  • (自适应响应式)门窗定制门业带视频功能pbootcms模板下载本模板采用PbootCMS内核开发,为门窗制造、定制安装企业打造,通过可视化后台管理系统快速构建品牌官网。自适应设计确保在手机、平板、电脑等设备上均能获得优质浏览体验查看源码
分享笔记 (共有 篇笔记)
验证码: