Surfarama其ノ壱で基本的な仕様と使い方
Surfarama其ノ弐でinfinite scrollを導入
という記事を更新してきました。
今回はちょっとした変更ですが、読み込み速度が改善されるようにしました。
な~んか読み込みが遅いなと思ってたんですよね。。
目次
いちいちアイキャッチを登録するのめんどいなと思ったら。
きちんと投稿の一番最初の画像がアーカイブに表示されるようになってました!
そして、画像が無い場合の処理もありました。
ただ、画像が無い場合の出力は空のdivタグのみになってるので、デフォルトの画像をサーバーにUPして表示させる形にすれば問題無さそうです。
<?php if ( has_post_thumbnail()) : ?> <div class="grid-box-img"> /* アイキャッチ画像が指定されてる場合 */ </div> <?php else : ?> <div class="grid-box-img"> /* アイキャッチ画像が無い場合、投稿内の一番最初の画像を表示 */ </div> <?php } else { ?> <div class="grid-box-noimg"> /* アイキャッチも、投稿内にも画像が無い場合 */ </div> <?php endif; ?>
例
<div class="grid-box-noimg"> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" /> </a> </div>
みたいな形ですかね。
アイキャッチのサムネイルがフルサイズ指定にされている問題
<?php if ( has_post_thumbnail()) : ?> <div class="grid-box-img"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'full' ); ?></a></div> <?php else : ?> <?php $postimgs =& get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC' ) ); if ( !empty($postimgs) ) { $firstimg = array_shift( $postimgs ); $th_image = wp_get_attachment_image( $firstimg->ID, 'full', false ); ?> <div class="grid-box-img"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo $th_image; ?></a></div> <?php } else { ?> <div class="grid-box-noimg"></div> <?php } ?> <?php endif; ?>
画像サイズが「full」指定になっているので、このままだとページ読み込み時にフルサイズの画像をたくさん読み込むため、デカイ画像が多いとどうしても読み込みに負荷がかかります。
サイズ指定を
<?php the_post_thumbnail( 'medium' ); // ※中略 $th_image = wp_get_attachment_image( $firstimg->ID, 'medium', false );
にしてあげることで、読み込み速度が格段に改善されました。
1カラムになったときのサイズを基準に、
設定 > メディア の中サイズを変更するといいでしょう。
‘thumbnail’,’medium’,’full’,’large’及びメディアの設定は構築の仕様により変更するとよいでしょう。
※入力している数値は参考値です。適宜変更してください。
ちなみに、0にするとアップロード時にその大きさの画像は生成されません。
毎回小中大画像を全部生成するとサーバーを圧迫するので個人的にlargeは0にすることが多いです。
the_post_thumbnailについてはこちら
wpdocs テンプレートタグ the post thumbnail
wp_get_attachment_imageについてはこちら
wpdocs テンプレートタグ wp_get_attachment_image