PHP升级至8.X后Genesis主题自定义特色英雄图无法显示

问题现象 #

基于Genesis Framework搭建的WordPress站点，将PHP版本从7.4升级至8.X后，functions.php中的自定义特色英雄图函数触发以下警告：

WARNING: UNDEFINED VARIABLE $PAGE IN FUNCTIONS.PHP
WARNING: ATTEMPT TO READ PROPERTY "ID" ON NULL IN FUNCTIONS.PHP
WARNING: UNDEFINED VARIABLE $PAGE IN FUNCTIONS.PHP
WARNING: ATTEMPT TO READ PROPERTY "ID" ON NULL IN FUNCTIONS.PHP
WARNING: UNDEFINED VARIABLE $PAGE IN FUNCTIONS.PHP
WARNING: ATTEMPT TO READ PROPERTY "ID" ON NULL IN FUNCTIONS.PHP

原自定义函数代码如下：

//Add hero image above post/page content

// Create new image size for our hero image
add_image_size( 'hero-image', 1400, 400, TRUE ); // creates a hero image size

// Hook after header area
add_action( 'genesis_after_header', 'bw_hero_image' );

function bw_hero_image() {

// If it is a page and has a featured thumbnail, but is not the front page do the following...

    if (has_post_thumbnail() && is_page() && !is_front_page() &&!(is_page('about-peter')) ) {

        // Get hero image and save in variable called $background

        $image_desktop = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'hero-image' );
        $image_tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'large' );
        $image_mobile = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'medium' );

        $bgdesktop = $image_desktop[0];
        $bgtablet = $image_tablet[0];
        $bgmobile = $image_mobile[0];
        $mobile_width = $image_mobile[1];
        $mobile_height = $image_mobile[2];
        $featured_class = 'above-post-hero';
 ?> 

<div class='<?php echo $featured_class; ?>'></div>
<style>
    <?php echo '.'.$featured_class.' { margin: auto; background-image:url( '.$bgmobile.'); height:'.$mobile_height.'px; width: '.$mobile_width.'px; } '; ?>
        @media only screen and (min-width : 480px) {       
        <?php echo ".$featured_class "; ?> {background-image:url(<?php echo $bgtablet;?>);height:276px;width:100%}
        }

        @media only screen and (min-width : 992px) {       
        <?php echo ".$featured_class "; ?> {background-image:url(<?php echo $bgdesktop;?>);height:400px;}
        }
</style>

<?php

    } 
}

问题根源 #

1. 未定义变量$page：原代码直接使用$page->ID但从未声明或赋值该变量，PHP 7.4对未定义变量处理宽松，PHP 8.X则直接抛出警告。
2. 潜在数组越界风险：若wp_get_attachment_image_src返回null，直接取索引[0]会触发PHP 8.X致命错误。

修复方案 #

修改bw_hero_image函数，解决变量未定义问题并增加安全判断：

//Add hero image above post/page content

// Create new image size for our hero image
add_image_size( 'hero-image', 1400, 400, TRUE ); // creates a hero image size

// Hook after header area
add_action( 'genesis_after_header', 'bw_hero_image' );

function bw_hero_image() {
    // 不符合条件直接退出
    if ( !is_page() || is_front_page() || is_page('about-peter') || !has_post_thumbnail() ) {
        return;
    }

    // 获取当前页面Post对象并做非空判断
    $page = get_post();
    if ( !$page ) {
        return;
    }

    // 获取不同尺寸的特色图
    $image_desktop = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'hero-image' );
    $image_tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'large' );
    $image_mobile = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'medium' );

    // 图片资源无效则退出，避免数组越界
    if ( !$image_desktop || !$image_tablet || !$image_mobile ) {
        return;
    }

    $bgdesktop = $image_desktop[0];
    $bgtablet = $image_tablet[0];
    $bgmobile = $image_mobile[0];
    $mobile_width = $image_mobile[1];
    $mobile_height = $image_mobile[2];
    $featured_class = 'above-post-hero';
?> 

<div class='<?php echo esc_attr($featured_class); ?>'></div>
<style>
    .<?php echo esc_attr($featured_class); ?> { 
        margin: auto; 
        background-image:url( <?php echo esc_url($bgmobile); ?>); 
        height:<?php echo esc_attr($mobile_height); ?>px; 
        width: <?php echo esc_attr($mobile_width); ?>px; 
    }
    @media only screen and (min-width : 480px) {       
        .<?php echo esc_attr($featured_class); ?> {
            background-image:url(<?php echo esc_url($bgtablet); ?>);
            height:276px;
            width:100%;
        }
    }
    @media only screen and (min-width : 992px) {       
        .<?php echo esc_attr($featured_class); ?> {
            background-image:url(<?php echo esc_url($bgdesktop); ?>);
            height:400px;
        }
    }
</style>

<?php
}

关键修改点 #

1. 定义$page变量：通过get_post()获取当前页面对象并增加非空判断，解决未定义变量问题。
2. 安全判断：检查图片资源有效性，避免数组越界错误。
3. 规范输出：使用esc_attr()、esc_url()对输出内容转义，符合WordPress安全规范，同时消除潜在警告。

额外说明 #

之前尝试添加is_page()参数无效，是因为未解决核心的$page未定义问题。修复后，英雄图将正常加载，同时消除所有PHP警告，兼容PHP 8.X版本。

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