Php 在WordPress中设置自定义元的背景图像

我正在尝试获取我正在构建的WordPress主题的主页，以根据3个可能的背景图像在刷新时更改背景图像

每个图像都被认为是一个更大的“案例研究”的一部分，该案例研究有一个标题、链接、文本等。 案例研究字段是通过主页上的自定义元框创建的。（我使用它来简化元框的创建过程：）

长话短说，客户希望主页上的3个案例研究具有相应的背景图像。这就是为什么我没有使用特色图像功能，因为每个背景都有特定的元数据

问题是，我不知道如何获取所选背景图像的元ID并使用它来设置背景CSS

以下是我到目前为止的情况：

/**
 * Home Page Case Randomizer
 */

$GLOBALS['_home_case_number'] = rand(1, 3);


function home_case_number() {

   if ( is_front_page() ) :  // checks whether this is the home page

    // get the meta image
$attachment_image = get_post_meta( get_the_ID(), '_home_case_background_' . $_home_case_number, true );

这就是我感到困惑的地方。上面返回相应的

image.jpg

文件。如何使用下面的代码来处理这个问题

下面的代码是改编自，我想用它来确保我提供的图像响应

// store the image sizes in an array
$img_sizes = array( 'thumbnail', 'medium', 'large', 'full' );

// grab the URL for each image size and store in a variable
foreach ( $img_sizes as $img_size ) {
    ${ 'img_src_' . $img_size } = wp_get_attachment_image_src( $attachment_image, $img_size );
}




echo '<style type="text/css"> 

    .featured-image {

        width: 100%;        
        min-height:350px; 
        background-image: url(' . esc_url( $img_src_medium[0] ) . ');
    }


    @media screen and ( min-width: 400px ) {
        .featured-image {
            background-image: url(' . esc_url( $img_src_large[0] ) . ');
        }
    }

    @media screen and ( min-width: 1000px ) {
        .featured-image {
            background-image: url(' . esc_url( $img_src_full[0] ) . ');
        }               
    }


</style>';

endif;
 };


add_action( 'wp_head', 'home_case_number' );

//将图像大小存储在数组中
$img_size=数组（'thumbnail'、'medium'、'large'、'full'）；
//获取每个图像大小的URL并存储在变量中
foreach（$img\u尺寸为$img\u尺寸）{
${'img_src.'$img_size}=wp_get_attachment_image_src（$attachment_image，$img_size）；
}
回声'
.特色形象{
宽度：100%；
最小高度：350px；
背景图片：url（'.esc_url（$img_src_medium[0]））；
}
@媒体屏幕和屏幕（最小宽度：400px）{
.特色形象{
背景图片：url（'.esc_url（$img_src_large[0]））；
}
}
@媒体屏幕和屏幕（最小宽度：1000px）{
.特色形象{
背景图片：url（'.esc_url（$img_src_full[0]））；
}               
}
';
endif；
};
添加行动（“工作包头”、“家庭案例号”）；

那么我要通过获取背景图像的元ID来实现这一点吗？还是附件ID？现在我也不知道该怎么做

非常感谢您的帮助

我想出来了

1） CMB“plugin”通过在附件ID的末尾添加“\u ID”将附件ID保存为另一个元键，因此我使用它来获取附件ID，并且 2） 我有可变范围的问题。我一调用函数中的全局变量，事情就开始起作用了。以下是最终代码：

/**
 * Home Page Case Randomizer
 */

$GLOBALS['_home_case_number'] = rand(1, 3);




function home_case_number() {
    global $_home_case_number;

   if ( is_front_page() ) :  // checks whether this is the home page


    // get the attachment thumbnail ID
            $attachment_image = get_post_meta( get_the_ID(), '_home_case_background_' . $_home_case_number . '_id', true );


    // store the image sizes in an array
    $img_sizes = array( 'thumbnail', 'medium', 'large', 'full' );

    // grab the URL for each image size and store in a variable
    foreach ( $img_sizes as $img_size ) {
        ${ 'img_src_' . $img_size } = wp_get_attachment_image_src( $attachment_image, $img_size );
    }



    echo '<style type="text/css"> 

        .featured-image {

            width: 100%;        
            min-height:350px; 
            background-image: url(' . esc_url( $img_src_medium[0] ) . '); 
        }


        @media screen and ( min-width: 400px ) {
            .featured-image {
                background-image: url(' . esc_url( $img_src_large[0] ) . ');
            }
        }

        @media screen and ( min-width: 1000px ) {
            .featured-image {
                background-image: url(' . esc_url( $img_src_full[0] ) . ');
            }               
        }


    </style>';

    endif;
 };


add_action( 'wp_head', 'home_case_number' );

/**
*主页案例随机化器
*/
$GLOBALS[“家庭”案例编号]=兰特（1,3）；
功能主页\案例\编号（）{
全球$家庭\案例\编号；
if（is_front_page（））：//检查这是否是主页
//获取附件缩略图ID
$attachment\u image=get\u post\u meta（获取\u ID（），“\u home\u case\u background.”$\u home\u case\u number.\u ID'，true）；
//将图像大小存储在数组中
$img_size=数组（'thumbnail'、'medium'、'large'、'full'）；
//获取每个图像大小的URL并存储在变量中
foreach（$img\u尺寸为$img\u尺寸）{
${'img_src.'$img_size}=wp_get_attachment_image_src（$attachment_image，$img_size）；
}
回声'
.特色形象{
宽度：100%；
最小高度：350px；
背景图片：url（'.esc_url（$img_src_medium[0]））；
}
@媒体屏幕和屏幕（最小宽度：400px）{
.特色形象{
背景图片：url（'.esc_url（$img_src_large[0]））；
}
}
@媒体屏幕和屏幕（最小宽度：1000px）{
.特色形象{
背景图片：url（'.esc_url（$img_src_full[0]））；
}               
}
';
endif；
};
添加行动（“工作包头”、“家庭案例号”）；

希望这能帮助其他人