web-dev-qa-db-ja.com

最初の投稿のサムネイルをウィジェットの背景画像として表示する方法

私はWP_Queryを使っていくつかの投稿を表示する通常のWordPressウィジェットを持っています。最初の投稿のサムネイルをウィジェットdiv全体の背景画像として表示する方法を見つけようとしています。これが私が必要とするものの視覚的表現です。

visual representation

今使用しているコードでは、投稿ごとにサムネイルが表示されています。

<div class="widget-wrap-sidebar">
<div class="my-widget">

<?php
// THE QUERY
?>

<?php
global $wp_query;
$metakey = 'post_views_count';
$recent_posts = new WP_Query( array( 'cat' => $categories, 'orderby' => $orderby, 'meta_key' => $metakey, 'posts_per_page' => $posts ) );
$temp_query = $wp_query;
$wp_query = null;
$wp_query = $recent_posts;
?>

<?php while( $recent_posts->have_posts() ): $recent_posts->the_post(); ?>

<div class="big-image">
<?php if ( '' != get_the_post_thumbnail() ) : ?>
<?php $thumbnail_url = get_the_post_thumbnail( get_the_ID(), 'big-image' ); ?>
<?php  echo wp_kses_post( $thumbnail_url ); ?>
<?php endif;?>
</div>


<div class="the-title">
<h3>
<a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>">
<?php echo get_the_title(); ?>
</a>
</h3>
</div>

<?php endwhile; ?>
<?php wp_reset_query(); ?>

</div><?php // end of my-widget ?>
</div><?php // end of widget-wrap-sidebar ?>

基本的に、最初のwidget-wrap-sidebar divでサムネイルのURLを呼び出す方法が必要です。このようなもの：

<div class="widget-wrap-sidebar" style="background-image:url('<?php echo $thumbnail_url ?>')">

しかし、私は上記のコードを機能させることができませんでした。
*私が簡単に達成できるCSS部分は考慮しないでください。

widgetspost-thumbnailsthumbnails
1
Alexandru Andrei Costache

いくつかのメモ：

  • the_title()を使うだけです。 echo get_the_title();の代わりに
  • タイトル属性には the_title_attribute() を使用してください。
  • 二次照会を使用するときは、グローバル$wp_queryをオーバーライドする必要はありません。
  • 次に、二次クエリループの後にwp_reset_postdata()を使用します。
  • エスケープされていないthe_permalink()の代わりに、パーマリンクをエスケープするecho get_permalink();を使用してください
  • 投稿のサムネイルが設定されているかどうかを確認するには has_post_thumbnail() があります。
  • get_the_post_thumbnail()は、URLではなくpost post imageタグを返します。
  • サムネイルのURLを取得するには、 the_post_thumbnail_url() をチェックしてください。
  • 最近の投稿の2番目のループの最初の項目を確認するには、そのループ内でif( 0 === $recent_posts->current_post ){を使用します。

例：

これが例です（PHP 5.4 +）：

$recent_posts = new WP_Query( $args );
if( $recent_posts )
{
    $thumbnail_url = 'https://example.tld/default.png'; // fallback post thumbnail url
    $data          = [];

    // Loop    
    while( $recent_posts->have_posts() )
    {
        $recent_posts->the_post();

        // Post thumbnail from the first post
        if( 0 === $recent_posts->current_post )
            $thumbnail_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );

        // Collect post titles
        $data[] = the_title(
            sprintf(
                '<div class="title"><h3><a href="%s">',
                esc_url( get_permalink() )
            ),                 // before
            '</a></h2></div>', // after
            false              // echo
        );
    }
    wp_reset_postdata();

    // Output
    if( $data )
        printf(
            '<div class="widget-wrap-sidebar" style="background-image: url(%s)">
                 <div class="my-widget">%s</div>
             </div>',
            esc_url( $thumbnail_url ),
            join( '', $data )
        );
}

それが役に立てば幸い。

0
birgire