WordPressで最初の記事だけ全文表示で残りを抜粋表示にする方法

9月 27, 2017

個人的にブログのトップページなどで記事を抜粋表示させているのってあまり好みではないのですが、記事内に画像やら動画やらを貼ったりしていると表示が遅くなってしまうので、なんとか上手い手はないものかと考えて色々と調べたりした結果、辿り着いた答えは最初の記事だけ全文表示させて、残りは抜粋表示にするというやり方でしたね〜

なんで抜粋が嫌いかっていうと、自分で抜粋記事の「続きを読む」とかってボタンから入って記事を読むってことが滅多にないというか・・・ｗ　なので少しでも記事を読んで貰えるようにと最初の記事だけを全文表示する形にしました。

最初の記事だけ全文表示させる方法

下記のコードで、最初の行のループ箇所に$counter++を加えて、２行目で１より前（最初）という判別をさせることで分岐条件を作り、<?php else:?>からそれ以降の処理をさせています。

<?php if(have_posts()): while(have_posts()): the_post(); $counter++; ?>
<?php if ($counter <= 1): ?>
// 最初の記事は全文表示
<?php the_content(); ?>
<?php else:?>
// 残りは抜粋表示
<?php the_excerpt(); ?>
<?php endif;?>
<?php endwhile; endif; ?>

<?php the_content(); ?>が全文表示で<?php the_excerpt(); ?>が抜粋表示のコード

ちなみに($counter <= 2)で２つ記事までは全文表示、($counter == 3)で３番目の記事だけ全文表示等が出来るみたいです。

参考記事：WordPressで最新記事を判別して大きく見せるなど、表示を変更する条件分岐のカスタマイズ方法

抜粋表示にサムネイル画像を追加する方法

抜粋表示にアイキャッチ画像を設定していなくても、一番最初の画像を自動的にサムネイルとして表示してくれるプラグインThumbnail For Excerptsなんて便利なものもあるようなんですが、アイキャッチ画像を設定していなければサムネイル画像の表示なしで抜粋した文章のみ表示でも良いかなと思い、プラグインなしでシンプルにアイキャッチ画像を表示するようにしてみました。

記事のタイトルや日付等は別で抜粋部分だけとなります。

<div class="excerpt_main">
<div class="excerpt_thumb">
<?php the_post_thumbnail(array( 300, 169 )); ?>
</div><!--　excerpt_thumb end -->
<div class="excerpt_post">
<?php the_excerpt(); ?>
</div><!--　excerpt_post end -->
</div><!--　excerpt_main end -->
<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>

(array( 300, 169 )の部分は画像サイズなのでお好みで数値を変更するなり、the_post_thumbnail( ‘thumbnail’ )でサムネイル( ‘medium’ )で中サイズ等、「設定」のメディア設定で設定されている画像でサイズで表示することも可能です。

後はCSSで体裁を整えてあげれば良いのですが、画像サイズを上記のようにarrayを使わずにCSSのほうでサイズ指定をしたりすると、アイキャッチ画像がない場合でもその指定したサイズ分のスペースが出来てしまうので、画像サイズはarrayを使って指定したほうが良いみたいですね〜

WordPress

Posted by s_island