トップページを抜粋表示のサムネイル付きへとカスタム

こんにちは
たなか床屋店長のYOSUKEです

昨日からやってたプチ改装がなんとか完了

今まではトップページに5つの記事が表示されていました
すべて全文が表示されています

けっこう長文を書いていたりすると
つぎの記事まで飛ばしたい時とか
超メンドクサイ状態でした
ゴメンナサイネ

トップページならまだしもカテゴリー表示の時とかも同じなので
やっぱり超絶メンドクサイ

なので一つ一つの記事を抜粋表示
続きを読む的なところをクリックで全文表示
という風になるようにしたい
さらに記事内で使用した画像でサムネイル表示がイイ

[Blog]トップページ抜粋サムネイル_完成

こうすることで読みたい記事を探したりするのが
少しは簡単になってくれればと想います

そしてなんとなくサムネイル表示とかオサレな感じがしてイイ

早速其の作業工程に

まずプラグインを用意
Thumbnail for Excerptsっていうや〜つ
なんか知らないけどすでに使用していた

設定をしていないためプラグインの恩恵を受けることはありませんでしたけど

でもってコードを変更

まず手始めにindex.php内にある

<div class=”textBody”>

<?php the_content(__(‘Continue reading’, ‘vicuna’)); ?>

</div>

ここの

<?php the_content(__(‘Continue reading’, ‘vicuna’)); ?>

この部分を

<?php the_excerpt(); ?>

へと変更

あとは同じように抜粋表示させたいページのコードを変更
渡しの場合はインデックス、カテゴリー、タグ、検索ページを変更して抜粋表示に

でThumbnail for Excerptsの設定をする

基本的にデフォルトだけど
画像サイズを150×150に
あとは画像を使用していない記事の時のためにWordPressのアイコン画像を指定

コレでひとまずサムネイル付き抜粋表示はOK

これだけだと文末に[…]と表示されるだけなので
「続きを読む」的な全文表示リンクをはりたいので
先程の

<?php the_excerpt(); ?>

のあとに

<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>続きを読む »</a>

を追加

これで「続きを読む」とか表示される

でトップページがすっきりしたので表示記事数を「5」から「15」へ変更
一覧性が更に増しました

ココで

画像を左寄りにしているが文字がその右側に回りこまない
画像の下に文字がくるという問題が発生し
CSSをいじったりコードを足してみたりしたら抜粋記事の回りこみ成功

ビフォーアフターのスクリーンキャプチャでもとろうかと思って
コードのいじりをもとに戻した

そしたらそれでも文字の回り込みが理想通りになている

うーん
昨日散々悩んだのは何だったのか
まあ結果として思いどおりだからいいいか

なんとかマイナーチェンジを果たすことができました

参考サイト

[WP覚書]the_excerpt();を使って記事を抜粋表示する方法 | ponnao-clip


WordPressで抜粋(the_excerpt)の文字数・文末の[…]を変更する | FOOTMARK
文字数変更



抜粋に自動的にサムネイルを表示してくれるプラグイン 「Thumbnail For Excerpts」 の紹介とその導入方法 | うつしよ


この辺かな?

シェアする

  • このエントリーをはてなブックマークに追加

フォローする