web-dev-qa-db-ja.com

グローバル$ postを使うWP_Queryを介してカスタム投稿のおすすめ画像を取得する

私はレスポンシブページの背景としてさまざまな機能の画像を取り込むページの<head>にcssを追加するためにサイト全体の関数を使っています。これは私のサイトの他の部分でもうまく機能しますが、WP_Queryを使用してカスタム投稿タイプから投稿を呼び出しているページでは失敗します。これはWP_Queryが標準ループを使用しておらず、私の関数がglobal $post;を使用しているためだと思います。

WP_Queryループを関数で動作するように調整する方法はありますか？私のサイトの残りの部分でも動作するようにするには、標準のWPループを使用する注目の画像機能が必要です。

-

これがカスタム投稿の呼び出し方法です。

<?php $port_query = new WP_Query( array(
    'post_type' => 'portfolio',
    'posts_per_page' => 1,
    'orderby' => 'Rand'
) ); 
if ( $port_query->have_posts() ): while ( $port_query->have_posts() ) : $port_query->the_post(); ?>
    <div class="page-bkg responsive-bkg">
        // page content here
    </div>
<?php endwhile; wp_reset_postdata(); endif;

さらに、functions.phpからレスポンシブ機能の画像を呼び出すための関数もあります。

function bkg_featured_image() {

// call the global post variable
global $post;

if ( has_post_thumbnail( $post->ID ) ) : // checks whether the post has the featured image set

// get the post thumbnail ID for the page or post
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

// store the image sizes in an array. You can also add your own image sizes with the add_image_size function
$img_sizes = array( 'thumbnail', 'medium', 'large', 'full', 'thumb480', 'thumb768', 'thumb1280', 'thumb1680', 'thumb2048' );

// 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( $post_thumbnail_id, $img_size );
}

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

    .responsive-bkg {
        background-image: url(' . esc_url( $img_src_thumb768[0] ) . ');
    }

    @media screen and ( min-width: 768px ) {
        .responsive-bkg {
            background-image: url(' . esc_url( $img_src_thumb1280[0] ) . ');
        }
    }

    @media screen and ( min-width: 1281px ) {
        .responsive-bkg {
            background-image: url(' . esc_url( $img_src_thumb2048[0] ) . ');
        }
    }

</style>';

   endif; // end if the featured image is set

} // end function my_featured_image

add_action( 'wp_head', 'bkg_featured_image' );

// (this function borrowed from http://s2webpress.com/responsive-featured-image-function-in-wordpress-themes/)
custom-post-typeswp-querypost-thumbnailsglobals
1
jasonbradberry

$port_query->the_post();は$postglobalを設定するべきです。それは問題ではありません。問題は、二次ループが実行される前にあなたが$postを使おうとしているということです（99％確実）。

bkg_featured_image()関数をwp_headにフックしました。 wp_headはドキュメントのヘッダーで実行されます。注意しない限り、他のテンプレートコードの前に実行されます。

WordPressテーマテンプレートの読み込みがどのように機能するのかを考えると、get_header()はheader.phpを読み込みます。これはヘッダーフックが起動する場所であるべきです。つまり、テーマファイル内のget_header()より前のコードは、それらのフックを正常に使用できます。

この問題を解決するには、二次ループがget_header()の前に実行されるようにします。これらの結果の$postは最初の投稿に設定され、あなたのコードは動作するはずです。それはあなたがget_header()の前に結果を出力しなければならないという意味ではありません、それは意味がありません。クエリを実行するだけです。

もちろん、このようにすることで、ループ内に最初の投稿しかありません。

2
s_ha_dum

WP_Queryは$ postを使います。メソッドとプロパティの完全なリストは ここでコーデックスで見つけることができます 。すべてのPortfolio商品に画像が掲載されていますか？ランダムなポートフォリオに画像があることを確認するために、引数に'meta_key' => '_thumbnail_id',を使用することをお勧めします。あなたが使用してテンプレートをチェックインすることもできます

if( has_post_thumbnail( $post->ID ) ) :

    <div class="page-bkg responsive-bkg">
    // page content here
</div>

endif;
0
snaper9