wordpress图文教程

纯代码添加和WordPress一样的日历自定义字段

2024年8月22日
酒醒 
// 纯代码添加和WordPress一样的日历自定义字段
// 添加自定义日期元框
function add_optional_date_meta_box() {
    add_meta_box(
        'optional_date_meta_box',
        '可选日期',
        'render_optional_date_meta_box',
        'post',
        'side',
        'high'
    );
}
add_action('add_meta_boxes', 'add_optional_date_meta_box');

// 渲染自定义日期元框的回调函数
function render_optional_date_meta_box($post) {
    // 获取已存储的自定义日期值
    $optional_date = get_post_meta($post->ID, 'optional_date', true);
    // 生成 nonce 字段以验证表单提交
    wp_nonce_field(basename(__FILE__), 'optional_date_nonce');
    ?>
    <div class="inside">
        <label for="optional_date">选择一个可选日期:</label>
        <input type="text" name="optional_date" id="optional_date" value="<?php echo esc_attr($optional_date); ?>" class="widefat">
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('#optional_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        });
    </script>
    <?php
}

// 保存自定义日期元框的数据
function save_optional_date_meta_box_data($post_id) {
    // 确保非管理员用户的保存不被执行
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    // 检查 nonce 字段以验证表单提交
    if (isset($_POST['optional_date_nonce']) && !wp_verify_nonce($_POST['optional_date_nonce'], basename(__FILE__))) {
        return;
    }
    // 检查是否提交了可选日期
    if (isset($_POST['optional_date'])) {
        $optional_date = sanitize_text_field($_POST['optional_date']);
        // 更新或添加自定义日期字段
        update_post_meta($post_id, 'optional_date', $optional_date);
    } else {
        // 如果用户清空了日期选择器，‌则删除该元数据
        delete_post_meta($post_id, 'optional_date');
    }
}
add_action('save_post', 'save_optional_date_meta_box_data');

// 添加一个新的日历自定义字段
function add_custom_date_field() {
    // 确保在后端的日历选项卡中显示
    wp_enqueue_script('jquery-ui-datepicker');
    ?>
    <label for="custom_date_field">选择日期:</label>
    <input type="text" name="custom_date_field" id="custom_date_field" class="wp-date-input" />
    <?php
}
 
// 保存日历自定义字段
function save_custom_date_field($post_id) {
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
 
    // 检查日期字段是否存在
    if (isset($_POST['custom_date_field'])) {
        $custom_date_field = sanitize_text_field($_POST['custom_date_field']);
        // 存储日期字段
        update_post_meta($post_id, 'custom_date_field', $custom_date_field);
    }
}
 
// 添加到管理界面
add_action('admin_init', 'add_custom_date_field');
// 保存日历自定义字段
add_action('save_post', 'save_custom_date_field');

在以上代码基础做了修改完整

当然，‌以下是一个完整的示例，‌展示了如何在WordPress中添加一个自定义的日期元框（‌meta box）‌，‌并在文章编辑页面中显示它。‌同时，‌我也会包括保存这个自定义日期作为文章元数据的代码。‌

首先，‌你需要在你的主题的functions.php文件中添加以下代码：‌

// 添加自定义日期元框
function add_custom_date_meta_box() {
    add_meta_box(
        'custom_date_meta_box', // 元框的ID
        '自定义日期', // 元框的标题
        'render_custom_date_meta_box', // 渲染元框内容的回调函数
        'post', // 要添加元框的文章类型
        'normal', // 元框的位置
        'high' // 元框的优先级
    );
}
add_action('add_meta_boxes', 'add_custom_date_meta_box');

// 渲染自定义日期元框的内容
function render_custom_date_meta_box($post) {
    // 使用 nonce 字段保护表单
    wp_nonce_field(basename(__FILE__), 'custom_date_nonce');
    
    // 获取已保存的自定义日期值
    $custom_date = get_post_meta($post->ID, 'custom_date', true);
    
    // 渲染输入框
    echo '<label for="custom_date">自定义日期:</label>';
    echo '<input type="date" id="custom_date" name="custom_date" value="' . esc_attr($custom_date) . '" />';
}

// 保存自定义日期元框的数据
function save_custom_date_meta_box_data($post_id) {
    // 检查权限
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    // 检查 nonce 字段
    if (!isset($_POST['custom_date_nonce']) || !wp_verify_nonce($_POST['custom_date_nonce'], basename(__FILE__))) {
        return;
    }
    
    // 检查是否为自动保存
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    
    // 检查并保存自定义日期
    if (isset($_POST['custom_date'])) {
        $custom_date = sanitize_text_field($_POST['custom_date']);
        update_post_meta($post_id, 'custom_date', $custom_date);
    }
}
add_action('save_post', 'save_custom_date_meta_box_data');

这段代码会在WordPress的文章编辑页面添加一个名为“自定义日期”的元框，‌其中包含一个日期选择器。‌当你选择一个日期并保存文章时，‌这个日期会被保存为文章的元数据，‌元数据的键是custom_date。‌

请确保将这段代码添加到你的主题的functions.php文件中，‌这样它才会生效。‌如果你想要在其他类型的文章（‌如页面）‌中添加这个元框，‌只需将add_meta_box函数中的'post'参数替换为相应的文章类型即可。‌

代码修改成支持日期和时间输入的版本：‌

方法一：

// 添加自定义日期和时间元框
function add_custom_datetime_meta_box() {
    add_meta_box(
        'custom_datetime_meta_box', // 元框的ID
        '自定义日期和时间', // 元框的标题
        'render_custom_datetime_meta_box', // 渲染元框内容的回调函数
        'post', // 要添加元框的文章类型
        'normal', // 元框的位置
        'high' // 元框的优先级
    );
}
add_action('add_meta_boxes', 'add_custom_datetime_meta_box');

// 渲染自定义日期和时间元框的内容
function render_custom_datetime_meta_box($post) {
    // 使用 nonce 字段保护表单
    wp_nonce_field(basename(__FILE__), 'custom_datetime_nonce');
    
    // 获取已保存的自定义日期和时间值
    $custom_datetime = get_post_meta($post->ID, 'custom_datetime', true);
    
    // 渲染输入框
    echo '<label for="custom_datetime">自定义日期和时间:</label>';
    echo '<input type="datetime-local" id="custom_datetime" name="custom_datetime" value="' . esc_attr($custom_datetime) . '" />';
}

// 保存自定义日期和时间元框的数据
function save_custom_datetime_meta_box_data($post_id) {
    // 检查权限
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    // 检查 nonce 字段
    if (!isset($_POST['custom_datetime_nonce']) || !wp_verify_nonce($_POST['custom_datetime_nonce'], basename(__FILE__))) {
        return;
    }
    
    // 检查是否为自动保存
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    
    // 检查并保存自定义日期和时间
    if (isset($_POST['custom_datetime'])) {
        $custom_datetime = sanitize_text_field($_POST['custom_datetime']);
        update_post_meta($post_id, 'custom_datetime', $custom_datetime);
    }
}
add_action('save_post', 'save_custom_datetime_meta_box_data');

这段代码将添加一个自定义的“日期和时间”元框到WordPress的文章编辑页面。‌用户可以在元框中输入一个日期和时间，‌该值将被保存在文章的元数据中，‌并可以在主题模板或插件中使用。‌记得将这段代码放置在你的WordPress主题的functions.php文件中，‌或者如果你正在开发一个插件，‌那么应该放在插件的主文件中。‌

方法二：
// 添加自定义日期和时间
// 添加自定义日期和时间元框
function add_custom_datetime_meta_box() {
    add_meta_box(
        'custom_datetime_meta_box',
        '自定义日期和时间',
        'render_custom_datetime_meta_box',
        'post',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_datetime_meta_box');

// 渲染自定义日期和时间元框的内容
function render_custom_datetime_meta_box($post) {
    wp_nonce_field(basename(__FILE__), 'custom_datetime_nonce');
    $custom_datetime = get_post_meta($post->ID, 'custom_datetime', true);
    echo '<label for="custom_datetime">自定义日期和时间:</label>';
    echo '<input type="datetime-local" id="custom_datetime" name="custom_datetime" value="' . esc_attr($custom_datetime) . '" />';
}

// 保存自定义日期和时间元框的数据
function save_custom_datetime_meta_box_data($post_id) {
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    if (!isset($_POST['custom_datetime_nonce']) || !wp_verify_nonce($_POST['custom_datetime_nonce'], basename(__FILE__))) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['custom_datetime'])) {
        $custom_datetime = sanitize_text_field($_POST['custom_datetime']);
        update_post_meta($post_id, 'custom_datetime', $custom_datetime);
    }
}
add_action('save_post', 'save_custom_datetime_meta_box_data');