web-dev-qa-db-de.com

Verwendung von globalem $ post; um ein ausgewähltes Bild für einen benutzerdefinierten Beitrag über WP_Query zu erhalten

Ich benutze eine Site-weite Funktion, um CSS zum <head> des Seitenaufrufs in vorgestellten Bildern von verschiedenen als reaktionsfähiger Seitenhintergrund hinzuzufügen. Es funktioniert gut auf dem Rest meiner Website, schlägt jedoch auf einer Seite fehl, auf der ich Posts von einem benutzerdefinierten Post-Typ mit WP_Query anrufe. Ich denke, das liegt daran, dass WP_Query nicht die Standardschleife verwendet und meine Funktion global $post; verwendet.

Gibt es eine Möglichkeit, die WP_Query-Schleife an die Funktion anzupassen? Ich benötige die vorgestellte Bildfunktion, um auch auf dem Rest meiner Site zu arbeiten, die die Standardschleife WP verwendet.

-

So rufe ich die benutzerdefinierten Posts an:

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

Und die Funktion zum Aufrufen von reaktionsschnellen Bildern aus 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/)
1
jasonbradberry

$port_query->the_post(); sollte den $postglobal setzen. Das ist nicht das Problem. Das Problem ist, dass Sie versuchen, $post zu verwenden, bevor Ihre sekundäre Schleife ausgeführt wird (zu 99% sicher).

Sie haben die Funktion bkg_featured_image() mit wp_head verknüpft. wp_head wird in der Kopfzeile des Dokuments ausgeführt, das, sofern Sie nicht vorsichtig sind, vor dem anderen Vorlagencode ausgeführt wird.

Wenn Sie darüber nachdenken, wie das Laden von WordPress-Designvorlagen funktioniert, werden Sie feststellen, dass get_header()header.php lädt, der dort sein sollte, wo die Header-Hooks ausgelöst werden. Das bedeutet, dass Code vor get_header() in einer Designdatei diese Hooks erfolgreich verwenden kann.

Die Lösung besteht darin, sicherzustellen, dass Ihre sekundäre Schleife vor get_header() ausgeführt wird. $post sollte auf den ersten Beitrag in diesen Ergebnissen gesetzt sein und Ihr Code sollte funktionieren. Das bedeutet nicht, dass Sie die Ergebnisse vor get_header() ausgeben müssen, was keinen Sinn ergibt. Sie müssen nur die Abfrage ausführen.

Natürlich haben Sie nur den first post in der Schleife, wenn Sie dies auf diese Weise tun.

2
s_ha_dum

WP_Query verwendet $ post. Eine vollständige Liste der Methoden und Eigenschaften finden Sie im Codex hier . Sind Sie sicher, dass alle Ihre Portfolio-Artikel mit Bildern versehen sind? Möglicherweise möchten Sie 'meta_key' => '_thumbnail_id', im Argument verwenden, um sicherzustellen, dass das zufällige Portfolio ein Bild enthält. Sie können die Vorlage auch mit einchecken

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

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

endif;
0
snaper9