WordPress自定义短码对接Add to Calendar按钮字段填充问题

问题背景 #

需要将自定义文章类型event中的数据（标题、日期、时间、描述）填充到Add to Calendar插件的按钮属性中，之前尝试的写法name=<?php echo the_title(); ?>仅能显示标题的第一个单词，其余内容被截断。

核心问题原因 #

HTML属性值必须用引号包裹，未加引号时，浏览器会将空格识别为属性的分隔符，因此仅读取到标题的第一个单词。同时，the_title()函数是直接输出内容，在属性中使用时应该用get_the_title()返回字符串，再配合esc_attr()转义特殊字符，避免HTML解析错误。

解决方案步骤 #

以下是针对需要填充的字段的正确写法，以及完整的修改后短码代码：

1. 填充name字段

使用get_the_title()获取标题，并用esc_attr()转义，包裹在双引号中：

name="<?php echo esc_attr(get_the_title()); ?>"

2. 填充startDate字段

从自定义字段event_date获取日期，格式化为插件要求的YYYY-MM-DD格式：

startDate="<?php echo esc_attr(date('Y-m-d', strtotime(get_field('event_date')))); ?>"

3. 填充startTime和endTime字段

假设你有对应的自定义字段event_start_time和event_end_time，同样用get_field()获取并转义：

startTime="<?php echo esc_attr(get_field('event_start_time')); ?>"
endTime="<?php echo esc_attr(get_field('event_end_time')); ?>"

4. 填充description字段

可以使用文章内容或自定义字段，这里用get_the_content()并处理为纯文本，再转义：

description="<?php echo esc_attr(wp_strip_all_tags(get_the_content())); ?>"

修改后的完整短码代码 #

<?php

add_shortcode( 'Calendar', 'calendar' );

function calendar( $atts, $shrt_content = null ) {
    
    $atts = shortcode_atts(array(
        'category' => ''
    ), $atts, 'calendar');

    $categories  = ! empty( $atts['category'] ) ? explode( ',' , $atts['category'] ) : '';

    extract( $atts );   

    $query_args = array(
        'post_type'         => 'event',
        'post_status'       => 'publish',
        'meta_key'          => 'event_date',
        'orderby'           => 'meta_value_num',
        'order'             => 'ASC',
        'posts_per_page'    => -1,
        'category_name'     => 'private',
        'tax_query'         => array( array(
                    'taxonomy'  => 'category',
                    'field'     => 'slug',
                    'operator'  => 'AND',
                    'terms'     => $categories
                ) )
    );

    $post_query = new WP_Query( $query_args );
    // 修正变量名错误：原$events_query改为$post_query
    $number_of_events = $post_query->found_posts;

    ob_start();

    // 如果有文章
    if ( $post_query->have_posts() ) { ?>

        <?php while ( $post_query->have_posts() ) : $post_query->the_post(); ?>
                
                <?php
                $event_date = get_field('event_date');
                $formatMonthStart = date("M", strtotime($event_date));
                $formatDateStart = date("j", strtotime($event_date));    
                $formatYearStart = date("y", strtotime($event_date));    
                ?>

        <div id="eventDetails" >
            <h1><?php the_title(); ?></h1>

            <p>     
                <?php echo $event_date; ?>          
                <?php if( $event_date ) { echo ' - ' . $event_date .' '; } ?>
            </p>
            
            <p><?php the_content(); ?></p>
            
            <add-to-calendar-button
                name="<?php echo esc_attr(get_the_title()); ?>"
                startDate="<?php echo esc_attr(date('Y-m-d', strtotime($event_date))); ?>"
                startTime="<?php echo esc_attr(get_field('event_start_time')); ?>"
                endTime="<?php echo esc_attr(get_field('event_end_time')); ?>"
                timeZone="America/Los_Angeles"
                description="<?php echo esc_attr(wp_strip_all_tags(get_the_content())); ?>"
                options="'Apple','Google','iCal','Outlook.com'"
                buttonsList
                hideTextLabelButton
                buttonStyle="round"
                lightMode="bodyScheme"
            ></add-to-calendar-button>
                        
        </div>
        <?php endwhile; ?>

        <?php wp_reset_postdata(); // 推荐用wp_reset_postdata()替代wp_reset_query()，因为用的是WP_Query ?>
    <?php 
    }

    $retVal = ob_get_contents();
    ob_end_clean();

    return $retVal; 
}

额外优化说明 #

• 修正了原代码中的变量名错误：$events_query->found_posts改为$post_query->found_posts
• 用wp_reset_postdata()替代wp_reset_query()，因为这里使用的是自定义WP_Query，前者更合适
• 优化了event_date的重复获取，只获取一次后复用

内容的提问来源于stack exchange，提问作者mwgideon