l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress文章及自定义文章类型中添加自定义元框

如何在WordPress文章及自定义文章类型中添加自定义元框

Bug编译狮

Bug编译狮

在WordPress中，为文章或自定义文章类型添加自定义元框（即元数据字段），可以通过插件实现。以下是如何通过一个名为“Custom Post Fields”的插件来完成这一操作的步骤：

步骤 1: 安装和激活插件

  1. 登录到您的WordPress管理后台。
  2. 导航到“插件”部分。
  3. 搜索并点击“Custom Post Fields”插件。
  4. 点击“安装”按钮以下载插件文件。
  5. 在“激活”菜单下找到该插件并点击“激活”。

步骤 2: 添加自定义元框

现在我们已经安装并激活了插件，请按照以下步骤添加自定义元框。

对于普通文章：

  1. 返回到WordPress管理后台。
  2. 转到“编辑” > “页面/文章”。
  3. 在左侧菜单栏选择您要添加自定义元框的文章类型。
  4. 在右侧编辑区域中，点击“添加字段”按钮。
  5. 填写您希望用于此文章类型的字段信息。
  6. 保存更改。

对于自定义文章类型：

  1. 在“插件”选项卡中搜索“自定义文章类型”，然后找到并点击“自定义文章类型”插件。
  2. 这个插件允许您创建自定义文章类型，您可以在这里为这些新类型添加字段。
  3. 根据提示，创建新的自定义文章类型。
  4. 当您创建一个新的自定义文章类型时，系统会自动为您提供几个默认字段。您可以在这些字段的基础上继续添加更多字段。
  5. 保存您的自定义文章类型设置。

示例代码

为了展示如何使用这个插件，在我们的博客中添加一个自定义元框，例如一个标题字段，我们可以这样做：

// 创建一个自定义元框
add_post_type_support('custom-post-type', 'title');

// 插入标题字段
function add_custom_title_field() {
    $args = array(
        'type' => 'text',
        'name' => __('Title'),
        'label' => __('Title')
    );
    add_meta_box('custom-title-box', __('Title'), 'display_custom_title_field', 'custom-post-type', 'side', 'high');
}
add_action('add_meta_boxes', 'add_custom_title_field');

// 显示自定义标题字段
function display_custom_title_field($post) {
    wp_nonce_field( 'add-custom-title-field', 'add-custom-title-field-nonce' );

    // 获取当前文章的ID
    $id = get_the_ID();

    // 设置表单元素的初始值
    if ( isset($_POST['add-custom-title-field']) && !empty($_POST['add-custom-title-field']['title']) ) {
        $title = sanitize_text_field($_POST['add-custom-title-field']['title']);
    } else {
        $title = '';
    }

    echo '<input type="text" name="add-custom-title-field[title]" id="add-custom-title-field-title" value="' . esc_attr($title) . '" />';
}

// 删除自定义元框
function remove_custom_title_field() {
    remove_meta_box('custom-title-box', 'custom-post-type', 'side');
}
add_action('delete_post', 'remove_custom_title_field');

这段代码首先创建了一个自定义文章类型custom-post-type，并在其中添加了一个名为title的文本字段。然后，它定义了一个函数display_custom_title_field()来显示这个字段，并且提供了简单的HTML输入框供用户填写。最后，它还提供了一个删除自定义元框的功能。

请根据您的需求调整上述代码中的字段名称、描述和其他参数。这只是一个基本的示例，您可以根据实际需求进一步定制和扩展。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

要实现这个功能，你需要使用WordPress的自定义字段插件。以下是一些步骤和示例代码：

步骤 1: 安装并激活自定义字段插件

首先，在WordPress管理后台中访问“插件”页面（通常位于“插件”菜单下），然后搜索“自定义字段”。找到并激活名为“Custom Fields”的插件。

步骤 2: 创建自定义字段

打开“自定义字段”界面，点击“创建新字段”。

示例代码：

<div class="custom-field">
    <label for="example">标题:</label>
    <input type="text" name="title" id="example" value="<?php the_title(); ?>" />
</div>

这里创建了一个文本输入框，用于显示文章标题。

步骤 3: 设置字段类型

点击“编辑字段”，然后选择“文本”或你想要的任何其他类型的自定义字段。例如，如果你想设置一个日期字段，可以点击“日期/时间”，然后填写所需的格式（如：YYYY-MM-DD HH:MM）。

示例代码：

<div class="custom-field">
    <label for="date">发布日期:</label>
    <input type="datetime" name="date" id="date" value="<?php the_time('Y-m-d'); ?>" />
</div>

这里创建了一个日期字段，用于显示文章的发布时间。

步骤 4: 将自定义字段应用到文章和自定义文章类型中

  • 文章: 在wp-content/plugins/custom-fields-for-wordpress/includes/functions.php文件中的add_custom_field()函数中添加自定义字段。

    add_action( 'init', 'acf_add_options_page' );
function acf_add_options_page() {
  add_options_page( __( 'Custom Fields', 'acf' ), __( 'Custom Fields', 'acf' ), 'manage_options', 'acf-custom-fields', 'acf_custom_fields_page' );
  add_submenu_page( 'acf-custom-fields', 'Add Custom Field', __( 'Add Custom Field', 'acf' ), 'manage_options', 'acf-custom-fields', 'acf_custom_field_add_form' );
}

// Add custom field to posts and pages
function acf_custom_field_add_form() {
  ?>
  <form action="" method="post">
      <?php settings_fields( 'acf-custom-fields' ); ?>
      <table class="form-table">
          <tr valign="top">
              <th scope="row"><label for="field_name">Field Name:</label></th>
              <td><input type="text" id="field_name" name="acf[field_name]" /></td>
          </tr>
          <tr valign="top">
              <th scope="row"><label for="field_type">Field Type:</label></th>
              <td>
                  <select id="field_type" name="acf[field_type]">
                      <option value="text">Text</option>
                      <option value="date">Date</option>
                      <!-- 更多选项 -->
                  </select>
              </td>
          </tr>
          <tr valign="top">
              <th scope="row"><label for="field_description">Description:</label></th>
              <td><textarea id="field_description" name="acf[field_description]"></textarea></td>
          </tr>
      </table>
      <button type="submit" class="button button-primary">Save Changes</button>
  </form>
  <?php
  wp_nonce_field( 'acf-nonce', 'acf-nonce' );
}

// Display custom fields on a post or page
function acf_custom_fields_page() {
  $fields = get_fields();

  if ( isset( $_POST['acf-nonce'] ) && wp_verify_nonce( $_POST['acf-nonce'], 'acf-nonce' ) ) {
      $field_id = sanitize_text_field( $_POST['field_name'] );

      if ( in_array( $field_id, array_keys( $fields ) ) ) {
          update_post_meta( get_the_ID(), $field_id, sanitize_text_field( $_POST['acf[field_value]'] ) );
      } else {
          echo '<p>Error: Field not found.</p>';
      }
  }
}

在这个例子中，我们创建了一个自定义字段来存储文章标题。你可以根据需要添加更多自定义字段，以满足特定需求。

总结

通过上述步骤，你可以轻松地在WordPress文章和自定义文章类型中添加自定义元框。记住，这些只是基本的示例，你可以根据自己的需求进一步扩展和定制。

最新更新