WordPressのブログ記事を自動的に抜粋表示して「続きを読む」とする方法~テーマ編集編~

抜粋表示-15

記事の全文ではなく、一部分だけを抜粋表示させる方法をご紹介します。

トップページや、記事一覧などで、全文が表示されていたら、 たくさんスクロールしないと、他にどんな記事があるのかわかりにくいですよね。
ブログ記事の一部だけを表示して「続きを読む」という形にすると、パッと見やすくなります。

抜粋表示-12

前回の記事では、<more>タグを使って、「続きを読む」にする方法をご紹介しました。

⇒ <more>タグを使って、「続きを読む」にする方法

この記事では、テーマ(テンプレート)ファイルを編集して、自動的に抜粋表示してくれる方法について、お伝えしますね。

テーマファイルを編集するので、慣れないと少し難しく感じるかもしれませんね。ですが基本的に、コピペ(コピー&ペースト)だけでできるので、HTMLの知識がなくてもできます。

一度設定してしまうと、設定した文字数になるよう勝手に抜粋表示してくれるので、後々楽できちゃいますよ♪ 私はめんどくさがり屋なんで、当ブログはこちらの方法を使っています。

では、いきますね。

 

参考にさせていただいた記事

今回の記事は、こちらの記事を参考にさせていただきました。ありがとうございます!

★PressStocker「WordPress:記事抜粋を表示するthe_excerptの使い方とカスタマイズのまとめ」
http://pressstocker.com/the-excerpt/

★ブログアクセスアップの秘密 「WordPress続きを読むの設定をthe_excerpt()で極める方法」
http://accessup-blog.net/the_excerpt.html

 

プラグインを有効化する

まず一番初めの準備として、プラグイン「WP Multibyte Patch」を有効化します。

これは何のためかというと、WordPressは英語仕様なので、日本語で「先頭から○文字分を抜粋する」と設定しても、文字数をうまくカウントすることができません。「WP Multibyte Patch」を有効化することで、日本語の文字列をうまくカウントしてくれるようになります。

「WP Multibyte Patch」はWordPressをインストールしたら、自動的に入っているプラグインです。ダッシュボードの「プラグイン」をクリックすると、一覧の下の方に入っているはずです。

で、この「WP Multibyte Patch」を有効化します。

抜粋表示-5

これで、準備OKです。

 

「index.php」を編集する

次は、「index.php」という名前のテンプレート(テーマ)ファイルを編集します。

ダッシュボード>外観>テーマの編集をクリックし、「index.php」を選びます。

これを編集するのですが、念のため編集前にバックアップをとっておいてください。全選択&コピーして、メモ帳などに貼り付けておきます。

抜粋表示-7

で、この「index.php」内にある

抜粋表示-16
という記述を見つけて、下記のコードに書き換えます。

<?php
     if( has_excerpt() ){
          the_excerpt();
          echo '<a href="'; the_permalink(); echo '"'. 'class="more-link">'.'&raquo;&nbsp;続きを読む</a>';
     } else {
          the_excerpt();
     }
?>

引用:ブログアクセスアップの秘密 「WordPress続きを読むの設定をthe_excerpt()で極める方法」

私の使っている「FMテンプレート」では、21行目にありました。

「どこにあるのか見つけられないよ(><)」という場合。
キーボードの「Ctrl」+「F」を押せば、検索窓が出てきますので、「content」と入力すれば、見つかると思います。

抜粋表示-8

「ファイルを更新」をクリックすれば、抜粋表示になりました。

抜粋表示-13

プラグイン「WP Multibyte Patch」有効化している場合、記事の先頭から数えて110文字を抜粋してくれるようになります。

このままの状態でも構わないのですが、訪問者にとって、よりわかりやすくなるようにカスタマイズする方法をご紹介しますね。

 

抜粋する文字数を変更する

プラグイン「WP Multibyte Patch」を有効化した場合、記事の先頭から数えて110文字を抜粋してくれるようになります。

この文字数を変えたい場合は、「function.php」にコードを追加します。

こちらも、「index.php」同様に、バックアップをとっておいてくださいね。
「function.php」は、編集に失敗すると、画面が真っ白になって一切の操作ができなくなります。
(私は、ブログを立ち上げて間もない頃に編集に失敗し、ブログを真っ白にさせてしまったことがあります。あの時はほんとに焦りました。。)

ですので、必ず必ずバックアップしておいてください。

もし、編集に失敗したときは、FTPソフトを使って「function.php」をダウンロードし、はじめのコードに戻します。訂正したファイルをサーバーにアップロードすれば、元に戻せます。

詳しくはこちらの記事で
⇒ 画面が真っ白に!「functions.php」の編集に失敗した場合の対処法
 

こちらのコードを、「function.php」の一番後ろに貼り付け。

/*抜粋表示の文字数変更*/
function new_excerpt_mblength($length) {
     return 100;
}	
add_filter('excerpt_mblength', 'new_excerpt_mblength');

引用:PressStocker「WordPress:記事抜粋を表示するthe_excerptの使い方とカスタマイズのまとめ」

このコードをそのまま貼ると、100文字に抜粋します。2行目の「100」という数字を変更すれば、文字数を変更できます。

 

[…]を消し、続きを読むのリンクを貼る

抜粋の文末には[…]という記号が表示されます。これを「続きを読む」に変えて、全文を読むためのリンクを追加したい場合。

抜粋入力欄に入力しない場合も、入力した場合も、文末を「続きを読む」にし、リンクを追加してくれます。こちらのコードも、「function.php」の一番後ろに貼り付け。

/*抜粋の文末記号を変える*/
function my_excerpt_more($post) {
	return '……  <a href="'. get_permalink($post->ID) . '">' . '>>続きを読む' . '</a>';
}
add_filter('excerpt_more', 'my_excerpt_more');

引用:PressStocker「WordPress:記事抜粋を表示するthe_excerptの使い方とカスタマイズのまとめ」

「>>続きを読む」の文字列は、お好きに変えられます。

「>>」の記号を消して単に、「続きを読む」にしてもいいし、「この記事の続きを読んでみる」とか、 「Read more」とかでもかまわないです。

 

自分で抜粋部分を入力したい場合

先頭から○文字というのではなく、自分で抜粋部分を考えて、表示させたいこともありますよね。自分で抜粋部分に表示させたい内容を入力することができます。

入力する場所は、記事投稿画面の真下にあります。

抜粋表示-9

もし、抜粋入力欄が表示されていないとき。記事投稿画面の一番上の右端にある、「表示オプション」というところをクリックすると、チェック項目が出てくるので、「抜粋」にチェックを入れると出てきます。

抜粋表示-10

 

カスタマイズ完了

ここまで無事に編集できたら、以下のようになります↓↓

抜粋表示-14
お疲れ様でした。

まとめ

テーマを編集するのは、ちょっと難しく感じるかもしれませんが、一度やってしまえば、特に何もしなくても勝手に抜粋してくれるので、楽ちんです。

私たちは楽ちんできますし、ブログの訪問者にとっても見やすくなるはずですので、ぜひ挑戦してみてくださいね。

<more>タグを使う方法はこちら
⇒ 「moreタグ」を使って、記事を一部表示にする方法
最後まで読んでいただきありがとうございました。

コメント

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

まかろんのプロフィール



ハンドルネーム:まかろん
2児を子育て中の主婦兼アフィリエイターです。

このブログでは、知識も実績もゼロの初心者がアフィリエイトで稼ぐための情報をお伝えしていきます。
少しでもあなたのお役に立てたら幸いです。

詳しくはこちらから

ブログランキングに参加しています


人気ブログランキングへ
ポチっと応援クリックしてもらえるとうれしいです♪

当ブログで使用しているテンプレート

初心者でも、ブログの作成が簡単にできる工夫がいっぱいのテンプレート

詳しくはこちらから

アーカイブ

こちらのサイトの素材を使わせていただいてます

Re:vre