web-dev-qa-db-fra.com

Comment afficher la première vignette du message en tant qu'image d'arrière-plan d'un widget?

J'ai un widget WordPress standard qui affiche peu de messages à l'aide de WP_Query. J'essaie de trouver un moyen d'afficher la vignette du premier message en tant qu'image d'arrière-plan pour l'ensemble du widget div. Voici la représentation visuelle de ce dont j'ai besoin:

 visual representation 

Le code que j'utilise actuellement affiche une vignette pour chaque message:

<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 ?>

En gros, j'ai besoin d'un moyen d'appeler l'URL de la vignette sur le premier widget-wrap-sidebar div. Quelque chose comme ça:

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

Cependant, j'ai été incapable de faire fonctionner le code ci-dessus.
* Veuillez ne pas considérer la partie CSS que je peux accomplir facilement.

widgetspost-thumbnailsthumbnails
1
Alexandru Andrei Costache

Quelques notes:

  • Il suffit d'utiliser the_title(); au lieu de echo get_the_title();
  • Utilisez the_title_attribute() pour les attributs de titre.
  • Inutile de remplacer le $wp_query global lorsque vous utilisez une requête secondaire.
  • Utilisez ensuite wp_reset_postdata() après votre boucle de requête secondaire.
  • Utilisez the_permalink() qui échappe au permalien au lieu de echo get_permalink(); sans échappement
  • Il y a le has_post_thumbnail() pour vérifier si la miniature de publication est définie.
  • Notez que get_the_post_thumbnail() renvoie la balise d’image post miniature, pas l’url.
  • Consultez the_post_thumbnail_url() pour obtenir l'URL de la vignette.
  • Pour vérifier le premier élément de votre boucle de publications récentes et secondaires, vous pouvez utiliser if( 0 === $recent_posts->current_post ){ dans cette boucle.

Exemple:

Voici un exemple (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 )
        );
}

J'espère que ça aide.

0
birgire