スポンサーリンク

トップページ・カテゴリーページ・アーカイブページなどのサムネイル画像付き抜粋表示方法まとめ

公開日: : 最終更新日:2015/04/15 WordPressに挑戦!

illust184_thumb

デフォルトの設定では、トップページ・カテゴリーページ・アーカイブページなどを表示すると、【全文表示】で最新記事から順番に並ぶ形になっています。
当ブログでは、各ページをプラグインを使って【サムネイル画像付きの抜粋表示】に変更しています。

当ページでは、プラグイン導入後に行った設定やカスタマイズ方法を記録したいと思います。
※wordpress3.5.1 テーマは【Twenty Twelve】での記事投稿となります。

※ファイル編集は必ずバックアップを取ってから行ってください。
「子テーマ」を作成しておくと、テーマのアップグレードの際に変更内容が消えることがありません。(function.php以外)

~2015年3月追記~
こちらの記事内容は、アイキャッチ画像の使い方を詳しく知らない段階で作成したものです。
トップページをアイキャッチ画像表示ではなく、記事内の画像をサムネイルで表示させる方法を記録しています。
自身の思い出として投稿ページはこのままにしてあります。
~追記ここまで~

サムネイル画像付き記事一覧を表示してくれるプラグイン【Thumbnail for Excerpts】

【Thumbnail for Excerpts】は、記事内の最初に表示されている画像をサムネイル化して表示してくれるプラグインです。
こちらは、wordpressの「公式プラグインディレクトリ」からインストールする事が出来ます。

当ブログでの表示は下記の様になっています。
関連記事を記事下に入れているので、ちょっと長めです。。^^

25

ちなみに、【アイキャッチ画像】を使ったページは、下記の様に表示されています。
デカっ!!(笑)
ページ内で使用したサイズのまま表示されます。(当たり前??)
各ページでアイキャッチ画像を設定されている方は、記事の抜粋表示だけで良いかもしれません。

26

【Thumbnail for Excerpts】の特徴、設定方法などは、下記ページを参考にさせて頂きました。
>[wordpress]画像付きがイイヨね!!TOPページなど記事一覧に自動で画像を付加する「Thumbnail For Excerpts」/NORI510.com
ありがとうございます。

記事抜粋表示のタグ修正

【Thumbnail for Excerpts】をインストール、有効化後は条件に合わせてタグの修正が必要になります。
条件とは、ブログ内のどのページを抜粋表示にするか。どのページを全文表示にするか。という点です。
当ブログの場合は、個別記事と固定記事以外のページは、抜粋表示(記事一覧)で表示させるようにしています。

テーマ編集「content.php」の下記赤枠の位置のコードを書き換えます。
<?php if ( is_search() ) : // Only display Excerpts for Search ?> ←元のコード

23

使用コード、その理由については、下記ページで詳しく説明されています。
>WordPressの投稿記事一覧を抜粋表示する条件分岐タグの使い方/メイン・カテゴリー・タグ・アーカイブページなど/the present note
ありがとうございます。

抜粋部分最後の[…]の表示を変える方法と「続きを読む」を追加する方法

デフォルトでの記事抜粋表示の最後は、[…]←になっています。
この部分を変更し、更に「続きを読む」という個別ページへのリンク文字を追加する為に、テーマの編集「functions.php」の最後に下記コードを追加しました。
※赤枠の【・・・】と【続きを読む】の部分は、好きな言葉に変更出来ます。

24

使用コード、その理由については、下記ページで詳しく説明されています。
>wordpressのよくあるカスタマイズ(抜粋表示、the_excerpt 関連)/Web Desingn Recipes
ありがとうございます。


プラグインを使った、サムネイル画像付き抜粋表示方法。。
何の知識も無い私にとっては、思った以上に大変な作業でした。
沢山の役立つ情報を発信して下さっている、サイト管理者様へ感謝の気持ちを込めて。
また、自分自身のメモとしての記事投稿でした。(忘れっぽいからねぇ。。^^)

関連記事&広告

他の記事も覗いてみませんか?

当ブログで使用しているプラグインリスト

つい最近まで、wordpressの存在すら知りませんでしたから、当然どんなプラグインがあるの

記事を読む

ブログリニューアルと新サイトのご紹介です♪

こんにちは♪ ご訪問ありがとうございます。(*^_^*) ブログをリニューアルしました♪ この

記事を読む

WordPress ロリポップ/独自ドメインマルチサイト化 意外だったエラーの訳。。

1つのwordpressで、ブログを複数管理できるように変更する機能として【マルチサイト化】

記事を読む

ドメイン取得とレンタルサーバー選び

ドメインとレンタルサーバーとは? wordpressを利用するにあたって、必要になるのが「ドメ

記事を読む

本当に簡単だった♪ロリポップのWordPress簡単インストール

wordpressでブログを作っていく際にまず最初にする作業は【wordpressのインスト

記事を読む

文字がにじむ。ぼやける。。Twenty Twelveヘッダー画像の謎。。

当ブログで使用しているテーマ【Twenty Twelve】は、カスタムヘッダーと言って、自分

記事を読む

プラグイン設置以外のカスタマイズ記録

こちらのページは、プラグイン設置以外のカスタマイズ記録になります。 これまでのプラグイ

記事を読む

WordPressへのGoogle Analytics導入についての特記事項

私はホームページ作成の際には、アクセス解析にGoogle Analytics(グーグルアナリ

記事を読む

WordPress【Twenty Twelve】 リンク色の変更方法まとめ

ふと。。「ブログ内のリンク色」を変えてみようかな?と思い立ちました。 カスタマイズの大半は

記事を読む

インターネットカフェから・・・

最近、パソコンの調子が悪くてですね・・ 1月に修理に出したばかりなのにまた故障しちゃいまし

記事を読む

Comment

  1. […] トップページ・カテゴリーページ・アーカイブページなどのサムネイル画像付き抜粋表示方法まとめ […]

Message

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


follow us in feedly  

  •   HN:ai
    北海道在住
    ▶プロフィール詳細へ

    当ブログは北海道限定情報サイト
    「北海道ディレクトリ」登録サイトです。
    北海道ディレクトリ
PAGE TOP ↑