MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


シンプル!レスポンシブ!ピンタレスト風~!!な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

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA