Web担当者の知識

PPC広告・アクセス解析・SEO・Web/グラフィックデザインなど、Web担当者が書く中小企業のWeb担当者向けのブログ。

*

WordPressブログのトップ(記事一覧)ページに抜粋文章とアイキャッチ画像を簡単に設定する方法

      2013/02/25

このエントリーをはてなブックマークに追加
はてなブックマーク - WordPressブログのトップ(記事一覧)ページに抜粋文章とアイキャッチ画像を簡単に設定する方法

ワードプレスのサムネイル画像と記事抜粋の設定

wordpressでブログシステムを構築する際に一般的に多いのは、トップページにブログ記事の抜粋と記事に使用している画像のサムネイルが表示されているパターンですよね。

今回はwordpress初心者の方向けに、トップページ(記事一覧ページ)に抜粋文章とアイキャッチ画像を簡単に設定する方法を説明します。

まず、アイキャッチ画像の設定ですが、「wordpress サムネイル 一覧」「wordpress アイキャッチ 一覧」で検索してもWordPress初心者には少し難しい記事ばかりヒットします。

わかりやすい記事が見つかっても、自分が望んでいる形と少し違うカスタマイズだったりしますよね。

よく検索で見つかる設定は、ブログの記事に横長の画像を使うと、トップページでのサムネイル(アイキャッチ画像)が他の画像よりも小さくなり見栄えが悪かったりします。

そこで、今回はすべて均一な大きさのサムネイル(アイキャッチ画像)を設定するために「Thumbnail for Excerpts」というプラグインを使います。
プラグインのバージョンは2.1のまま更新されていませんが、2012年7月25日現在、使用して全く問題はありませんでした。

このプラグインをダウンロードし、インストール・有効化します。

プラグインのインストールが完了すると設定の項目の中に「Thumbnail for Excerpts」が追加されます。
今回はトップページにだけサムネイルを表示させたいのでApply on homeの項目だけを「yes」にします。
Width・Heightはデフォルトが150pxになっていますがお好みで調整して保存して下さい。

これで、記事の一番初めに使用している画像がトリミングされ、キレイに表示されます。

たったこれだけです。簡単ですよね。

続いて、それぞれの記事の抜粋を表示させる方法を説明します。

まず、最初からインストールされてるプラグイン「WP Multibyte Patch」を有効にしておきます。

その後、トップページ(「index.php」や「home.php」)の

<?php the_content(__('続きを読む'));?>

<?php the_content(__('more')); ?>

の部分を

<?php the_excerpt();?>

<?php the_excerpt(__('more')); ?>

に変更します。

要は the_content を the_excerpt に変えればいいという事ですね。

これで文字数制限した抜粋表示の設定ができました。

初期設定では全角110文字で表示され、それ以降の部分が[…]や[続きを読む]と表示されるだけなのでこれをクリックして記事ページに飛べるようにリンクを設定します。

下記のコードをfanction.phpに記載して下さい。

function new_excerpt_more($post) {
 return '<a href="'. get_permalink($post->ID) . '">' . '続きを読む' . '</a>';
 }
 add_filter('excerpt_more', 'new_excerpt_more');

そうすると、
抜粋文章の後に「続きを読む」と表示され記事にリンクされます。

抜粋文章の文字数を変更する場合は「WP Multibyte Patch」の excerpt_mblength を調整します。

以上。
すべて独学のため、上記の内容でお気づきの点や間違い等あれば、コメント欄よりご指摘いただけますと幸いです。

このエントリーをはてなブックマークに追加
はてなブックマーク - WordPressブログのトップ(記事一覧)ページに抜粋文章とアイキャッチ画像を簡単に設定する方法

 - WordPress , ,