How to get Custom Post Type (CPT) Archive Page's Posts Featured Images Preload in header.php

admin管理员组

文章数量:1122832

I am trying to Preload all Images of the Custom Post Type Archive Page's Posts Featured Images Only. Mean in header.php I want to set code in and implementation should only be on the Custom Archive Page when loading. Remember Pagination is Also Set I need Current Page Images in Preload and When I open the second from Pagination then only the 2nd page's post featured Images should come in Preload. I am using the Following Code in the header.php Please Help with the Code:

if( is_post_type_archive('cptype') ){
    $loop = new WP_Query(array(
        'post_type' => 'cptype',
        'posts_per_page'    => 9,
        'orderby' => 'post_id',
        'order' => 'ASC',
        'paged' => $paged,
        'post__not_in'      => array(4,368,358,354),

    ));
    if ( $loop->have_posts() ) :
        while ( $loop->have_posts() ) : $loop->the_post();
        
        // Meta Attributes
$img_by_code = get_the_post_thumbnail($post->ID, 'medium');
$img_url = get_the_post_thumbnail_url($post->ID, 'medium');
     
           
 //Link Tag Preload Comes Here
           
           
endwhile;
       
    endif;
    wp_reset_postdata();
    
}       

The Function Working but Not Getting the Correct Images of the CPT Archive Current Page's Post's Featured Images.

I am trying to Preload all Images of the Custom Post Type Archive Page's Posts Featured Images Only. Mean in header.php I want to set code in and implementation should only be on the Custom Archive Page when loading. Remember Pagination is Also Set I need Current Page Images in Preload and When I open the second from Pagination then only the 2nd page's post featured Images should come in Preload. I am using the Following Code in the header.php Please Help with the Code:

if( is_post_type_archive('cptype') ){
    $loop = new WP_Query(array(
        'post_type' => 'cptype',
        'posts_per_page'    => 9,
        'orderby' => 'post_id',
        'order' => 'ASC',
        'paged' => $paged,
        'post__not_in'      => array(4,368,358,354),

    ));
    if ( $loop->have_posts() ) :
        while ( $loop->have_posts() ) : $loop->the_post();
        
        // Meta Attributes
$img_by_code = get_the_post_thumbnail($post->ID, 'medium');
$img_url = get_the_post_thumbnail_url($post->ID, 'medium');
     
           
 //Link Tag Preload Comes Here
           
           
endwhile;
       
    endif;
    wp_reset_postdata();
    
}       

The Function Working but Not Getting the Correct Images of the CPT Archive Current Page's Post's Featured Images.

• custom-post-types
• post-thumbnails

Share Improve this question edited Jun 8, 2024 at 2:22 Islamic Quran Center asked Jun 8, 2024 at 2:20 Islamic Quran CenterIslamic Quran Center 133 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can access the current query on a custom post type archive page with global $wp_query;. By using the global variable which holds the current query, you don't need to do an additional query.

To keep your header.php file cleaner, you could use actions and callback functions placed in your functions.php file to put the preload links in the head tag.

First action for checking, if the preload links should be added or not.

add_action('template_redirect', 'wpse_425594_post_type_archive_preload_links');
function wpse_425594_post_type_archive_preload_links() {
    if ( is_post_type_archive('my-post-type') ) {
        add_action( 'wp_head', 'wpse_425594_current_query_post_images_preload' );
    }
}

The second callback for rendering the preload links using the posts from the current query.

function wpse_425594_current_query_post_images_preload() {
    global $wp_query;

    $preload_links = array_filter( array_map(
        function( $post ) {
            $url = get_the_post_thumbnail_url( $post );

            return $url
                ? sprintf( '<link rel="preload" as="image" href="%s" />', esc_url( $url ) ) // update as needed
                : '';
        },
        $wp_query->posts
    ) );

    echo implode( "\n", $preload_links );
}

It looks like your current implementation lacks the part where you add the <link> tags to preload the images. You can modify your code to include the link tag for preloading within the loop. Here's how you can adjust your code in header.php:

if ( is_post_type_archive('cptype') ) {
    // Ensure the $paged variable is defined for pagination
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $loop = new WP_Query(array(
        'post_type'         => 'cptype',
        'posts_per_page'    => 9,
        'orderby'           => 'post_id',
        'order'             => 'ASC',
        'paged'             => $paged,
        'post__not_in'      => array(4, 368, 358, 354),
    ));

    if ( $loop->have_posts() ) :
        while ( $loop->have_posts() ) : $loop->the_post();
            $img_url = get_the_post_thumbnail_url($post->ID, 'medium');
            if ($img_url) {
                echo '<link rel="preload" href="' . esc_url($img_url) . '" as="image">';
            }
        endwhile;
    endif;
    wp_reset_postdata();
}

This code checks if it is the archive page for the custom post type 'cptype', sets up a query with pagination, and then loops through the posts. For each post, it gets the URL of the featured image and uses a <link> tag to preload it.

本文标签： How to get Custom Post Type (CPT) Archive Page39s Posts Featured Images Preload in headerphp