WordPress Meta Description 自定义字段集成指南

大菜果果
100 阅读2分钟

以下是一个描述如何添加 meta_description 自定义字段的 文档。文档包括代码的说明和结构，帮助你将代码集成到 WordPress 中，实现自定义页面描述的功能。

代码的添加路径在主题文件夹下的functions.php，例如：

/opt/homebrew/var/wordpress/wp-content/themes/twentytwentyfour/functions.php

WordPress Meta Description 自定义字段集成指南

本文档将指导你如何在 WordPress 中为页面和文章添加一个 meta_description 字段，用于设置页面的自定义 meta description。该字段不仅可以在编辑界面中进行设置，还能显示在 REST API 中，以便进一步集成。

功能概述

  1. 注册 Meta Description 自定义字段：在 WordPress 中创建并注册一个 meta_description 字段，允许在 REST API 中显示。
  2. 动态生成 Meta Description 标签：自动生成 <meta name="description"> 标签，并输出到 <head> 中。
  3. 为页面和文章添加 Meta Description 编辑框：在页面和文章的编辑界面中增加一个输入框，便于手动设置 meta_description。
  4. 保存自定义字段：确保字段值在保存文章或页面时被保存到数据库中。

1. 注册 Meta Description 自定义字段

首先，在 WordPress 中注册 meta_description 自定义字段。此字段被指定为一个单值字段（single），类型为字符串（string），并且在 REST API 中显示。

function register_meta_description_field() {
    register_post_meta('page', 'meta_description', [
        'show_in_rest' => true,  // 允许在REST API中显示
        'type' => 'string',
        'single' => true,  // 设置为单值字段
        'description' => 'Meta Description for the page',
    ]);
}
add_action('init', 'register_meta_description_field');

2. 动态生成 Meta Description 标签

此功能会根据页面或文章标题生成 meta_description。如果标题以 "Demo App for" 开头，则动态生成 meta description；否则，优先读取自定义字段的内容。

function add_meta_description() {
    if (is_singular()) {
        $title = get_the_title();
        if (strpos($title, 'Demo App for') === 0) {
            $processed_title = preg_replace('/^Demo App for\s*/', '', $title);
            $meta_description = "Begin {$processed_title} something end.";
        } else {
            $meta_description = get_post_meta(get_the_ID(), 'meta_description', true);
            if (empty($meta_description)) {
                return;
            }
        }
        echo '<meta name="description" content="' . esc_attr($meta_description) . '">';
    }
}
add_action('wp_head', 'add_meta_description');

3. 为页面和文章添加 Meta Description 编辑框

在文章和页面编辑界面添加一个输入框，允许用户手动输入 meta description。

function add_meta_description_meta_box() {
    add_meta_box(
        'meta_description_meta_box',  // HTML ID
        'Meta Description',  // 标题
        'display_meta_description_meta_box',  // 回调函数
        ['post', 'page'],  // 适用文章和页面
        'normal',  // 放置位置
        'high'  // 优先级
    );
}
add_action('add_meta_boxes', 'add_meta_description_meta_box');

function display_meta_description_meta_box($post) {
    $meta_description = get_post_meta($post->ID, 'meta_description', true);
    ?>
    <label for="meta_description">Meta Description:</label>
    <textarea name="meta_description" id="meta_description" rows="4" style="width:100%;"><?php echo esc_textarea($meta_description); ?></textarea>
    <?php
}

4. 保存 Meta Description 字段

确保在保存文章或页面时，meta_description 字段的值被安全保存到数据库中。

function save_meta_description_meta_box($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['meta_description'])) {
        update_post_meta($post_id, 'meta_description', sanitize_text_field($_POST['meta_description']));
    }
}
add_action('save_post', 'save_meta_description_meta_box');

总结

此文档介绍了如何在 WordPress 中注册、动态生成并手动编辑 meta_description 字段，为你的 WordPress 页面和文章添加自定义的 meta description。通过这种方式，你可以在前端 SEO 优化和编辑灵活性上取得平衡。

提示：在注册字段时设置 show_in_rest 为 true，确保该字段可在 REST API 中显示，从而支持其他应用的进一步集成。

avatar
文章
阅读
粉丝