web-dev-qa-db-fra.com

Utilisation de $ post global; obtenir une image en vedette pour un article personnalisé via WP_Query

J'utilise une fonction à l'échelle du site pour ajouter des CSS au <head> de la page, en extrayant des images en vedette de divers en tant qu'arrière-plan de page sensible. Cela fonctionne très bien sur le reste de mon site, mais échoue sur une page sur laquelle j'appelle des publications à partir d'un type de publication personnalisé à l'aide de WP_Query. Je pense que c'est parce que WP_Query n'utilise pas la boucle standard et que ma fonction utilise global $post;.

Existe-t-il un moyen d’adapter la boucle WP_Query à la fonction? J'ai besoin de la fonction d'image sélectionnée pour fonctionner également sur le reste de mon site, qui utilise la boucle standard WP.

-

Voici comment j'appelle les messages personnalisés:

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

Et la fonction permettant d’appeler les images réactives, à partir de 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(); doit définir le $postglobal. Ce n'est pas le problème. Le problème est que vous essayez d'utiliser $post avant que votre boucle secondaire ne s'exécute (vous êtes sûr à 99%).

Vous avez raccordé la fonction bkg_featured_image() à wp_head. wp_head s'exécute dans l'en-tête du document qui, à moins que vous ne soyez prudent, sera exécuté avant l'autre code de modèle.

Si vous réfléchissez au fonctionnement du chargement du modèle de thème WordPress, vous constaterez que get_header() charge header.php, ce qui devrait se situer à l'endroit où l'en-tête s'active. Cela signifie que le code avant get_header() dans un fichier de thème peut utiliser ces hooks avec succès.

La solution consiste à vérifier que votre boucle secondaire s'exécute avant get_header(). $post doit être défini sur la première publication de ces résultats et votre code doit fonctionner. Cela ne signifie pas que vous devez générer les résultats avant get_header(), ce qui n’aurait aucun sens. Vous devez juste exécuter la requête.

Bien sûr, vous n’avez que le premier post dans la boucle en le faisant de cette façon.

2
s_ha_dum

WP_Query utilise $ post. Une liste complète des méthodes et propriétés peut être trouvée Dans le codex ici . Etes-vous sûr que tous vos éléments de Portfolio ont des images en vedette? vous voudrez peut-être utiliser 'meta_key' => '_thumbnail_id', dans l'argument pour vous assurer que le portfolio aléatoire contient une image. vous pouvez également vérifier dans le modèle en utilisant

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

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

endif;
0
snaper9