如何在包含 html 的變量中執行 php 代碼

Question

我組裝了一個 Wordpress 短代碼，但它在塊編輯器中引發錯誤：“更新失敗。響應不是有效的 JSON 響應。” 盡管如此，編輯會被保存。 我被告知我收到錯誤的原因是我的“簡碼處理程序 function 正在生成 output。這些函數必須將所有 output 收集到一個返回的變量中。”

以下是（1）有效但導致錯誤消息的代碼和（2）我的偽代碼通過將'a href'分配給變量$ html來解決問題，但沒有。

(1)

function make_header() {
$args = array(
    'posts_per_page' => 1,
    'category_name' => 'headlines',
);
$q = new WP_Query( $args);

if ( $q->have_posts() ) {
    while ( $q->have_posts() ) {
    $q->the_post();        
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
    ?>
    <a href="<?php the_permalink() ?>">
    <div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
    <h2>
    <?php the_title(); ?>
    </h2></a>
<?php
    }
    wp_reset_postdata();
}
}
add_shortcode('make_header', 'make_header');

(2)

$html = '
<a href="<?php the_permalink() ?>">
    <div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
    <h2>
    <?php
        the_title(); ?> </h2></a>';
    }
    wp_reset_postdata();
    return $html;

謝謝你的幫助。

Answer 1

試試下面的代碼

$html = ' <a href="'.the_permalink() .'"> <div><img src="'. echo $featured_img_url .'" width="100%" /></div> <h2>'. the_title().' </h2></a>';

連接運算符 ('.')，它返回其左右 arguments 的連接。

Answer 2

您可以像這樣使用連接：

$html = '<a href="' . esc_url(get_the_permalink()) . '">';
$html .= '<div>';
$html .= '<img src="' . $featured_img_url . '" width="100%" />';
$html .= '</div>';
$html .= '<h2>' . get_the_title() . '</h2></a>';

此外，請使用get_the_permalink()和get_the_title()因為這些函數正在返回它們的結果而不是輸出它。

完整的代碼將如下所示：

function make_header() {
    $html = '';
    $args = array(
        'posts_per_page' => 1,
        'category_name' => 'headlines',
    );
    $q = new WP_Query( $args);
    
    if ( $q->have_posts() ) {
        while ( $q->have_posts() ) {
            $q->the_post();
            $featured_img_url = esc_url(get_the_post_thumbnail_url(get_the_ID(),'full'));

            $html = '<a href="' . esc_url(get_the_permalink()) . '">';
            $html .= '<div>';
            $html .= '<img src="' . $featured_img_url . '" width="100%" />';
            $html .= '</div>';
            $html .= '<h2>' . get_the_title() . '</h2></a>';
        }
        wp_reset_postdata();
    }

    return $html;
}
add_shortcode('make_header', 'make_header');