シンプル!レスポンシブ!ピンタレスト風~!!なwordpressテーマ「Surfarama」其ノ参

Surfarama其ノ壱で基本的な仕様と使い方
Surfarama其ノ弐でinfinite scrollを導入
という記事を更新してきました。

今回はちょっとした変更ですが、読み込み速度が改善されるようにしました。

icons-photo02

な~んか読み込みが遅いなと思ってたんですよね。。

いちいちアイキャッチを登録するのめんどいなと思ったら。

きちんと投稿の一番最初の画像がアーカイブに表示されるようになってました!
そして、画像が無い場合の処理もありました。
ただ、画像が無い場合の出力は空の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’及びメディアの設定は構築の仕様により変更するとよいでしょう。

surfarama_03

※入力している数値は参考値です。適宜変更してください。
ちなみに、0にするとアップロード時にその大きさの画像は生成されません。
毎回小中大画像を全部生成するとサーバーを圧迫するので個人的にlargeは0にすることが多いです。

the_post_thumbnailについてはこちら
wpdocs テンプレートタグ the post thumbnail

wp_get_attachment_imageについてはこちら
wpdocs テンプレートタグ wp_get_attachment_image

コメントをどうぞ

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)