Question

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

每张图片都被视为较大的“案例研究”的一部分，该案例研究包含标题，链接，文字等。案例研究字段是通过主页上的自定义元框创建的。（我使用它来简化元框创建过程：https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress）。

长话短说，客户希望在主页上有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文件。如何按摩它以使用以下代码？

以下代码改编自http://s2webpress.com/responsive-featured-image-function-in-wordpress-themes/，我想用它来确保我能够响应地提供图片。

// 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' );

所以我通过获取背景图片的元ID来解决这个问题吗？或附件ID？我不知道该怎么办。

非常感谢任何帮助！

Answer 1

我明白了！

1）CMB“插件”通过在其末尾添加“_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' );

希望这会帮助其他人。

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

1 个答案: