在帖子滑块的缩略图中提供缩放图像

Question

我的 WordPress 主题有一个名为“帖子滑块”的部分，我想在我的主页中使用它，并且我想在其中显示 8 个帖子。我还没有完全运行我的网站，希望提高其速度。当使用 GTMetrix 分析我的网站时：http://www.tamtaragh.com 它有一些问题，但其中之一是关于这个帖子滑块，它使用 600x450 图像而不是 200x150 作为缩略图，因此对于每个缩略图，它平均会额外加载 50KB！在媒体设置中，中等尺寸为 300x400！这是帖子滑块的代码：

<?php
$output = $title = $type = $count = $interval = $slides_content = $link = '';
$custom_links = $thumb_size = $posttypes = $posts_in = $categories = '';
$orderby = $order = $el_class = $link_image_start = '';
extract(shortcode_atts(array(
    'title' => '',
    'type' => 'flexslider_fade',
    'count' => 3,
    'interval' => 3,
    'slides_content' => '',
    'slides_title' => '',
    'link' => 'link_post',
    'custom_links' => site_url().'/',
    'thumb_size' => 'medium',
    'posttypes' => '',
    'posts_in' => '',
    'categories' => '',
    'orderby' => NULL,
    'order' => 'DESC',
    'el_class' => ''
), $atts));

$gal_images = '';
$link_start = '';
$link_end = '';
$el_start = '';
$el_end = '';
$slides_wrap_start = '';
$slides_wrap_end = '';

$el_class = $this->getExtraClass($el_class);

if ( $type == 'nivo' ) {
    $type = ' wpb_slider_nivo theme-default';
    wp_enqueue_script( 'nivo-slider' );
    wp_enqueue_style( 'nivo-slider-css' );
    wp_enqueue_style( 'nivo-slider-theme' );

    $slides_wrap_start = '<div class="nivoSlider">';
    $slides_wrap_end = '</div>';
} else if ( $type == 'flexslider' || $type == 'flexslider_fade' || $type == 'flexslider_slide' || $type == 'fading' ) {
    $el_start = '<li>';
    $el_end = '</li>';
    $slides_wrap_start = '<ul class="slides">';
    $slides_wrap_end = '</ul>';
    wp_enqueue_style('flexslider');
    wp_enqueue_script('flexslider');
}
$flex_fx = '';
if ( $type == 'flexslider' || $type == 'flexslider_fade' || $type == 'fading' ) {
    $type = ' wpb_flexslider flexslider_fade flexslider';
    $flex_fx = ' data-flex_fx="fade"';
} else if ( $type == 'flexslider_slide' ) {
    $type = ' wpb_flexslider flexslider_slide flexslider';
    $flex_fx = ' data-flex_fx="slide"';
}

if ( $link == 'link_image' ) {
    wp_enqueue_script( 'prettyphoto' );
    wp_enqueue_style( 'prettyphoto' );
}

$query_args = array();

//exclude current post/page from query
if ( $posts_in == '' ) {
    global $post;
    $query_args['post__not_in'] = array($post->ID);
}
else if ( $posts_in != '' ) {
    $query_args['post__in'] = explode(",", $posts_in);
}

// Post teasers count
if ( $count != '' && !is_numeric($count) ) $count = -1;
if ( $count != '' && is_numeric($count) ) $query_args['posts_per_page'] = $count;

// Post types
$pt = array();
if ( $posttypes != '' ) {
    $posttypes = explode(",", $posttypes);
    foreach ( $posttypes as $post_type ) {
        array_push($pt, $post_type);
    }
    $query_args['post_type'] = $pt;
}

// Narrow by categories
if ( $categories != '' ) {
    $categories = explode(",", $categories);
    $gc = array();
    foreach ( $categories as $grid_cat ) {
        array_push($gc, $grid_cat);
    }
    $gc = implode(",", $gc);
    $query_args['category_name'] = $gc;

    $taxonomies = get_taxonomies('', 'object');
    $query_args['tax_query'] = array('relation' => 'OR');
    foreach ( $taxonomies as $t ) {
        if ( in_array($t->object_type[0], $pt) ) {
            $query_args['tax_query'][] = array(
                'taxonomy' => $t->name,//$t->name,//'portfolio_category',
                'terms' => $categories,
                'field' => 'slug',
            );
        }
    }
}

// Order posts
if ( $orderby != NULL ) {
    $query_args['orderby'] = $orderby;
}
$query_args['order'] = $order;

// Run query
$my_query = new WP_Query($query_args);

$pretty_rel_random = 'rel-'.rand();
if ( $link == 'custom_link' ) { $custom_links = explode( ',', $custom_links); }
$teasers = '';
$i = -1;

while ( $my_query->have_posts() ) {
    $i++;
    $my_query->the_post();
    $post_title = the_title("", "", false);
    $post_id = $my_query->post->ID;
    if ( $slides_content == 'teaser' ) {
        $content = do_shortcode(apply_filters('the_excerpt', get_the_excerpt()));//get_the_excerpt();
    } else {
        $content = '';
    }
    $thumbnail = '';

    // Thumbnail logic
    $post_thumbnail = $p_img_large = '';

    $post_thumbnail = wpb_getImageBySize(array( 'post_id' => $post_id, 'thumb_size' => $thumb_size ));
    $thumbnail = $post_thumbnail['thumbnail'];
    $p_img_large = $post_thumbnail['p_img_large'];

    // Link logic
    if ( $link != 'link_no' ) {
        if ( $link == 'link_post' ) {
            $link_image_start = '<a class="link_image" href="'.get_permalink($post_id).'" title="'.sprintf( esc_attr__( 'Permalink to %s', 'js_composer' ), the_title_attribute( 'echo=0' ) ).'">';
        }
        else if ( $link == 'link_image' ) {
            $p_video = get_post_meta($post_id, "_p_video", true);
            //
            if ( $p_video != "" ) {
                $p_link = $p_video;
            } else {
                $p_link = $p_img_large[0]; // TODO!!!
            }
            $link_image_start = '<a class="link_image prettyphoto" href="'.$p_link.'" title="'.the_title_attribute('echo=0').'" >';
        }
        else if ( $link == 'custom_link' ) {
            if (isset($custom_links[$i])) {
                $slide_custom_link = $custom_links[$i];
            } else {
                $slide_custom_link = $custom_links[0];
            }
            $link_image_start = '<a class="link_image" href="'.$slide_custom_link.'">';
        }

        $link_image_end = '</a>';
    } else {
        $link_image_start = '';
        $link_image_end = '';
    }

    $description = '';
    if ( $slides_content != '' && $content != '' && ( $type == ' wpb_flexslider flexslider_fade flexslider' || $type == ' wpb_flexslider flexslider_slide flexslider' ) ) {
        $description = '<div class="flex-caption">';
        if ($slides_title==true) $description .= '<h5 class="post-title">' . $link_image_start . $post_title . $link_image_end .'</h5>';
        $description .= $content;
        $description .= '</div>';
    }

    $teasers .= $el_start . $link_image_start . $thumbnail . $link_image_end . $description . $el_end;
} // endwhile loop
wp_reset_query();

if ( $teasers ) { $teasers = $slides_wrap_start. $teasers . $slides_wrap_end; }
else { $teasers = __("Nothing found." , "js_composer"); }

$css_class =  apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'wpb_gallery wpb_posts_slider wpb_content_element'.$el_class, $this->settings['base']);

$output .= "\n\t".'<div class="'.$css_class.'">';
$output .= "\n\t\t".'<div class="wpb_wrapper">';
$output .= wpb_widget_title(array('title' => $title, 'extraclass' => 'wpb_posts_slider_heading'));
$output .= '<div class="wpb_gallery_slides'.$type.'" data-interval="'.$interval.'"'.$flex_fx.'>'.$teasers.'</div>';
$output .= "\n\t\t".'</div> '.$this->endBlockComment('.wpb_wrapper');
$output .= "\n\t".'</div> '.$this->endBlockComment('.wpb_gallery');

echo $output;

我对编码不太熟悉，但认为它让人想起缩略图的中等尺寸，对吗？我将“中”更改为“缩略图”或“缩略图”，但 gtmetrix 中没有任何变化。我的functions.php 中还定义了其他图像大小，但替换它们中的每一个都会导致任何更改。 调用 200x150 图像还需要更改什么吗？ 任何帮助将不胜感激。

Answer 1

我想你应该本地化你的主题

add_image_size

功能并检查哪个名称与你感兴趣的尺寸相关联。

它应该看起来有点像：

add_image_size( 'thumbnail-name', 200, 150, true );

如果尚未定义，您可以通过以下方式添加：

add_action( 'after_setup_theme', 'custom_theme_setup' );
function custom_theme_setup() {
    add_image_size( 'thumbnail-name', 200, 150, true );
}

您可以在此处阅读有关此主题的更多信息。