A brief analysis of how to add a custom field panel in WordPress

How to add a custom field panel in WordPress? The following article will introduce to you how to add a custom field panel in WordPress. I hope it will be helpful to you!

## When we write articles in WordPress, we often use some custom fields, such as the two meta tags of web page description and keywords. Regarding these two For a tag, you can read an article I wrote before:

WordPress sets independent Description and Keywords

Usually when adding custom fields and their values, we do it manually It seems a bit troublesome to select the corresponding field in the drop-down box of the "Custom Field" module, then enter its value, and finally submit and wait for a short period of time. So is it possible to create a separate panel for these commonly used custom fields and just fill in the content directly? Just like article tags, you can add tags directly without submitting them separately. The answer is yes, here is the rendering:

I will teach you how to operate it below. Place all the following codes into functions.php of the current theme.

1. Create the required field information

Here we will add two custom fields, named _description_value and _keywords_value respectively. You can give The following array adds multiple elements to achieve the purpose of adding multiple custom fields.

The first element of the array, name, is the name of the custom field. In this code, the name of the custom field is the name value plus _value to prevent conflicts with other codes, such as _description_value; std is self Define the default value of the field. When you publish an article and no value is filled in the custom field, the default value will be used; title is the title of the custom field module, such as "Abstract", "Category" and "Tag" on the article editing page ", these are module names.

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

  "keywords" => array(
    "name" => "_keywords",
    "std" => "这里填默认的网页关键字",
    "title" => "关键字:"));

2. Create a custom field input box

The following code will be used to create a custom field and input box, just copy it

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&#39;<h3>&#39;.$meta_box[&#39;title&#39;].&#39;</h3>&#39;;

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

3. Create a custom field module

The following code will add a custom field module to the article editing page, which uses WordPress’s add module function

add_meta_box. This is exactly the opposite of what was done in the previous article WordPress article editing page to delete related modules.

function create_meta_box() {
  if ( function_exists('add_meta_box') ) {
    add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
  }}

4. Save article data

All preparations have been made before, the most important thing is to save the data in our custom fields information.

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);
   }}

5. Connect the function to the specified action

This is the last step and the most important step, we have to do The purpose is to connect the function to the specified action (action) to let the WordPress program execute the function we wrote before:

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

Okay, that’s all we have to do, now you can To call these two custom fields in your theme, use a text editor to open header.php in the theme directory, and copy the following code to to customize the description and keywords for your web page. Tags, please use the search engine for more specific operations:

<?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 &#39;<meta name="description" content="&#39;.$description.&#39;" />
<meta name="keywords" content="&#39;.$keywords.&#39;" />&#39;;
}
?>

Recommended learning: "

WordPress Tutorial"

The above is the detailed content of A brief analysis of how to add a custom field panel in WordPress. For more information, please follow other related articles on the PHP Chinese website!