web-dev-qa-db-ja.com

レスポンシブ背景画像をインラインで追加

注目の画像をページ上部の背景として設定しています。画像は非常に大きく、小さい画面サイズには小さい画像サイズを設定できるようにしたいです。画像はインラインで追加されているので、外部のstyles.cssファイルを使って別の画像を設定することはできないと思います。

これは私が持っているものの例です：

<?php 
$bannerImg = '';
if(has_post_thumbnail()) {
    $bannerImg = get_the_post_thumbnail_url();
}
?>

<section class="page-banner" style="background-image: url(<?php echo $bannerImg; ?>);">
    <h1 class="banner-title"><?php the_title(); ?></h1>
</section>

srcsetのようなことをしたいのですが、背景画像に相当するものが見つかりませんでした。

imagescssresponsive
3
erin_k

WordPress用のAdaptive Imagesプラグインを使用する場合は、最大の画像を使用してすべてのビューポート幅に対して1つのインラインCSSを作成するだけで、サーバー上ですべての作業が行われます。マークアップには何もしませんが、アダプティブイメージプラグインの設定でブレークポイントを入力するので、小さなデバイスなどに小さなイメージを提供します。

アダプティブイメージを使用すると、次のようになります。

/**  
 *
 * Background Image from Post Image using Adaptive Images Plugin for WordPress
 * @since  1.0.0
 * Credits: TwentyFifteen WordPress theme adjacent pagination
 *
 */
function the_other_idea_good_heavens_change_this_function_name() {

    global $post;

    if ( ! has_post_thumbnail( $post->ID ) ) return; //exit if there is no featured image

    $theme_handle = 'Visionary'; //the theme handle used for the main style.css file

    //image
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'super-huge-image' );

    //css
    $css = '.banner-image { background-image: url(' . esc_url( $image[0] ) . '); } ';

    //minify            
    $css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add it
    wp_add_inline_style( $theme_handle, $css );

}
add_action( 'wp_enqueue_scripts', 'the_other_idea_good_heavens_change_this_function_name', 99 );

これは私がすることです（私がAdapative Imagesを使い始める前に）。

add_image_size();

この例では、小、中、大の3つのサイズを使用してから、サムネイルを再生成しています。

/**  
 *
 * Background Image from Post Image
 * @since  1.0.0
 * Credits: TwentyFifteen WordPress theme adjacent pagination
 *
 */
function yourprefix_responsive_mobile_first_background_images() {

    global $post;

    if ( ! has_post_thumbnail( $post->ID ) ) return; //exit if there is no featured image


    $theme_handle = 'Visionary';     //the theme handle used for the main style.css file
    $property     = '.banner-image'; //the property
    $css          = '';

    //small image
    $small_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-small-image-size' );
    $small_style = '
            ' . $property . ' { background-image: url(' . esc_url( $small_img[0] ) . '); }
            ';
    $css .= $small_style;


    //medium image
    $medium_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-medium-image-size' );
    $medium_style = '
            ' . $property . ' {  background-image: url(' . esc_url( $medium_img[0] ) . '); }
            ';
    $css .= '@media (min-width: 1000px) { '. $medium_style . ' }';


    //large image
    $large_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-large-image-size' );
    $large_style = '
            ' . $property . ' {  background-image: url(' . esc_url( $large_img[0] ) . '); }
            ';
    $css .= '@media (min-width: 1700px) { '. $large_style . ' }';

    //minify            
    $css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add it
    wp_add_inline_style( $theme_handle, $css );

}
add_action( 'wp_enqueue_scripts', 'yourprefix_responsive_mobile_first_background_images', 99 );
0
Christina