WordPressの抜粋をカスタマイズしたいですか？
抜粋は、ブログ投稿のリストやサイトの他の主要ページに表示することができる投稿からの短いスニペットです。
この投稿では、コードを書かずにWordPressの抜粋をカスタマイズする方法を紹介する。
動画チュートリアル
文章での説明がお好きな方は、そのまま読み進めてください。
WordPressで抜粋を使うべきときと理由
まず、どのような場合に抜粋を使うのが理にかなっているのか、なぜそうするのが良いのかについて説明しよう。
初期設定では、WordPressはサイトのトップページ、ブログページ、アーカイブに全投稿を表示します。
これはWordPressサイトの表示速度を低下させ、サイト上に重複コンテンツがあることを意味するため、検索エンジンの問題を引き起こす可能性もあります。
抜粋を使用すると、各投稿のほんの一部だけを読み込むことになるため、ページの読み込みが速くなります。抜粋は、以下のような場面で使うとよいでしょう：
- あなたのサイトのトップページ（ブログ投稿が表示されている場合
- カテゴリーや タグのアーカイブページ。
- 静的なホームページをお持ちの場合は、ブログ投稿ページ。
多くのWordPressテーマは、トップページなどで抜粋を使用するように初期設定されています。プレミアムWordPressテーマでは、完全な投稿を表示するか抜粋を表示するかを選択するオプションがあります。
詳しくは、投稿日全文と抜粋の比較の投稿をご覧ください。
抜粋をカスタマイズしたい理由
WordPressテーマが初期設定で抜粋を使用している場合、WordPressは自動的に抜粋を生成します。デフォルト設定では、WordPressは投稿の最初の55語を使用しますが、多くのテーマはもう少し表示します。
それのどこが悪いのでしょうか？WordPressに抜粋を任せれば時間を節約できるのでは？
問題はここからです。自動生成された抜粋は、投稿の先頭にあるテキストから始まります。これは場合によっては問題ないのですが、投稿の紹介を始める前に何かある場合はあまりうまく機能しません。
Ribosomeテーマを使っているサイトの例です：
ご覧のように、抜粋には投稿の一番最初のテキストが表示されます。これには、アイキャッチ画像のクレジットに加え、投稿が直近で更新された時期についての注意書きが含まれています。これはあまりよく見えません。
もしあなたのテーマが抜粋をうまく扱えないのであれば、より読みやすく、投稿のクリック数を増やすことができるようにカスタマイズするとよいだろう。
ということで、WordPressで抜粋をカスタマイズするさまざまな方法を見ていきましょう。以下のリンクからお好きな方法にジャンプできます：
1.WordPress（初期設定）でカスタム抜粋を追加する方法
WordPressでカスタム抜粋を追加するのはとても簡単です。まず、新規投稿を作成するか、既存の投稿を編集する必要があります。
WordPressのコンテンツエディターの右側のパネルに、「抜粋」のドロップダウンがあるはずです。その横にある下向きの矢印をクリックします。
抜粋ボックスが表示されます。
ここにカスタム投稿の抜粋を入力することができます。私たちは単に投稿の最初の段落をコピーしました。
注： 古いクラシックエディターをまだ使っている場合は、右上の「画面オプション」タブをクリックする必要があります。そして、「抜粋」ボックスにチェックを入れてください。これで、投稿を書くボックスの下に抜粋用のスペースが表示されます。
WordPressテーマはこの投稿にカスタマイ抜粋を使用するようになります。
ご覧の通り、抜粋の後に「続きを読む」リンクが表示されていません。使用しているテーマによっては、カスタマイザーにこのリンクがない場合があります。
読者は、投稿タイトルや投稿のアイキャッチ画像をクリックすることで、投稿の全文を読むことができます。
2.抜粋の長さを変える
サイト上の抜粋の長さを変更したい場合は、無料のWPCodeプラグインを使用することができます。サイトにカスタムコードを追加する最も簡単で安全な方法であるだけでなく、設定済みのコードスニペットの大規模なライブラリが付属しています。
今日はこのビルトイン・スニペットのひとつを使う。
はじめに、WPCodeをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPress管理画面のCode Snippets “ Add Snippetから「抜粋」を検索してください。
Change Excerpt Length（抜粋の長さを変更する）」というタイトルの結果にマウスオーバーし、「Use Snippet（スニペットを使用する）」ボタンをクリックします。
プラグインは次のようなコード・スニペットを挿入します：
add_filter(
'excerpt_length',
function ( $length ) {
// Number of words to display in the excerpt.
return 40;
},
500
);
その後、「Edit Snippet」画面が表示されます。WPCodeはすでに、あなたのためにすべて設定済みです。
初期設定では、このスニペットは抜粋を40ワードに制限します。5行目の数字は、あなたのWordPressブログに最適なものに調整することができます。
ご希望の抜粋の長さを設定したら、スイッチを「有効化」に切り替え、「更新」ボタンをクリックするだけです。
これで、あなたのサイトにアクセスすると、テーマが表示するどこにでも短縮抜粋が表示されるようになります。
以下は、Twenty Twenty-Twoテーマを使用し、5つの単語を表示するようにWPCodeスニペットを設定した場合の例です。
WPCodeからのスニペットは、WordPressが生成する初期設定の抜粋でのみ動作することに注意してください。
カスタマイザー抜粋の長さの変更
カスタマイザーの抜粋の長さを変更したい場合は、WPCodeに区切りのカスタム・スニペットを追加する必要があります。WordPressにコードスニペットをコピー＆ペーストするのはとても簡単で、WPCodeを使用しているため、上記と同じ手順で行うことができます。
まず、Code Snippets “ Add Snippetにナビゲーションします。Add Your Custom Code (New Snippet)’にマウスオーバーし、’Use Snippet’ボタンをクリックします。
次に、「カスタム・スニペットの作成」ページが表示されます。
新規スニペットにタイトルを付け、以下のコードを「コードプレビュー」フィールドに貼り付けます：
add_filter( 'get_the_excerpt', function( $excerpt, $post ) {
$excerpt_length = 40; // Change excerpt length
$excerpt_more = '...<br><br><a href="' . get_permalink($post->ID) . '">Read More »</a>'; // Add ellipsis and 'Read More' permalink text when trimmed
if ( has_excerpt( $post ) ) {
$excerpt = wp_trim_words( $excerpt, $excerpt_length, $excerpt_more );
}
return $excerpt;
}, 10, 2 );
3行目の$excerpt_lengthの値を変更することで、カスタム抜粋の文字数を選択することができます。
さらに、4行目の下にハイライトされているテキストを編集すると、抜粋がトリミングされたときに続きを読むリンクのアンカーテキストが変更されます。
スニペットをカスタマイズしたら、’コードタイプ’が’PHP Snippet’になっていることを確認してください。
次に、スイッチを「有効化」に切り替え、「スニペットを保存」ボタンをクリックします。
サイトにアクセスすると、カスタマイザーが3行目で選択した長さに短縮されていることがわかります。
3.抜粋の続きを読むテキストを変更する
上記のスニペットに加えて、WPCodeスニペットライブラリを使用して、ほとんどのテーマで抜粋とともに表示される「続きを読む」テキストを変更することもできます。
無料のWPCodeプラグインをインストールして有効化するだけです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、管理画面のCode Snippets ” Add Snippetにアクセスします。そこから’抜粋’を検索し、’抜粋の続きを読むテキストを変更’というタイトルの結果にマウスオーバーするだけです。
スニペットを使う」ボタンをクリックすると、「スニペットの編集」ページに移動します。WPCodeは、すでにあなたのためにコードスニペットを初期設定しており、初期設定では、「投稿全体を読む」という設定になっています。
ただし、4行目のテキストは好きなものに置き換えることができる。
新しいテキストに満足したら、スイッチを「有効化」に切り替え、「更新」ボタンをクリックします。
4.抜粋をテーマに表示する
ほとんどの人気WordPressテーマには、投稿日にカスタム抜粋を表示するためのビルトインサポートが付属しています。
しかし、テーマによっては抜粋をサポートしていないものもあります。もしあなたのテーマがそうであれば、テーマのテンプレートを手動で修正する必要があります。
ブロックテーマでの投稿抜粋の追加
ブロックテーマを使用している場合は、外観 ” エディターページに移動し、サイトエディターでテーマを編集することができます。
サイトエディターが開きます。左サイドバーから編集したいテンプレートをクリックするか、投稿が表示されているエリアをポイントしてください。
フルサイトエディターは、投稿のリストを表示する標準的な方法であるクエリループブロックを使用して、最新の投稿を表示することができます。
クエリー・ループ・ブロックを追加したら、’Choose’ボタンをクリックしてパターンを選択する必要がある。
WordPressにはクエリループのパターンとして、グリッド、テーブル、リストなどのレイアウトが用意されています。
生成された投稿テンプレートはあなたの投稿抜粋を自動的に表示します。
ただし、ここで変更できるのは続きを読むのテキストだけだ。
クラシックテーマで投稿抜粋を追加する
クラシックテーマを使用している場合は、子テーマを作成し、いくつかのコードを追加することで投稿抜粋を追加することができます。
もしそれが嫌であれば、この投稿の3の方法を使えば、コードを追加する必要はない。
子テーマでは、変更したいページを表示するためのテンプレートが必要です。どのテンプレートを編集する必要があるかは、WordPressテンプレート階層のガイドを参照してください。
ファイル名はテーマによって若干異なりますが、おそらくhome.php、content.php、archive.php、category.phpをお探しでしょう。
これらのファイルのそれぞれで、次の行を見つける必要がある：
<?php the_content(); ?>?
次に、このタグを次のようにthe_excerptタグに置き換える必要がある：
<?php the_excerpt(); ?>?
重要：この方法は初心者にはお勧めしません。WordPressにかなり慣れている方でも、子テーマの作成とテンプレートファイルの編集は避けた方がよいでしょう。
次の2つの方法は素晴らしい選択肢だ。
5.Moreタグで投稿の冒頭を表示する
WordPressのホームページやアーカイブページ用に投稿のショートバージョンを作成するもう一つの方法は、「More」タグを使うことです。
Moreタグは抜粋とは少し違います。Moreタグは、投稿のテキストのみのスニペットを作成する代わりに、投稿を特定の位置で区切ることができます。
つまり、投稿の最初の部分（タグまで）だけがホームページやカテゴリーページなどの投稿リストに表示されます。Moreタグの利点は、書式がすべて保持されることです。
Moreタグを設置すると、WordPressは「続きを読む」リンクを表示します。読者はこれをクリックすることで、投稿全体を見ることができます。読者も自動的に投稿の適切なポイントにジャンプします。
Moreタグを作成するには、新規投稿を作成するか、既存の投稿を編集してください。
次に、Moreタグを配置するブロックを追加します。レイアウトオプションセクションからMoreブロックを選択するか、検索バーで検索してください。
このようにMoreタグがコンテンツエディター内に表示される。
オプション設定として、実際の投稿のMoreタグの前のコンテンツを非表示にすることができます。
注：旧クラシックエディターでもMoreタグを追加できます。投稿のタグを配置したい場所をクリックし、ビジュアルツールバーのMoreボタンをクリックします。
ほぼすべてのテーマで、投稿が表示されるあらゆる場所でMoreタグを使用することができます。ただし、あなたのテーマが抜粋を表示する場合は、抜粋自体をカスタマイズする必要があることに注意してください。投稿にMoreタグを追加しても変更できません。
6.プラグインを使ったWordPressカスタム抜粋の追加
WordPressのビルトインカスタム抜粋機能では思い通りにならない……Moreタグも使いたくないとしたら？
簡単な解決策があります。プラグインを使ってカスタマイザーを作成し、表示することができます。
まず、Advanced Excerptプラグインをインストールして有効化する必要があります。
プラグインをインストールしたことがない場合は、WordPressプラグインのインストール方法をステップバイステップでご覧ください。
有効化したら、「設定」 ” 「抜粋」でどのように機能するかを設定できます。
ここでは、抜粋を表示する文字数や単語数などを変更することができます。抜粋を単語の途中で切るか、文の途中で切るかを決めることもできます。
また、通常カスタム抜粋から消えてしまう「続きを読む」リンクを復活させることもできます。これを好きなテキストに変更して、その機能を変更することもできます：
ヒント:このプラグインでカスタム抜粋を使用するには、「投稿にカスタム抜粋が添付されていても抜粋を生成する」のチェックを外してください。
こんな感じだ。
高度な抜粋設定を変更したら、画面下の「保存」ボタンをクリックしてください。
Advanced Excerpt プラグインを使用すると、抜粋は投稿フォーマットを保持します。以下はプラグインを有効化した自動生成抜粋です。
ご覧のように、改行とイタリック体は維持されている。
初期設定では、Advanced Excerptプラグインはホームページ、RSSフィード、その他のアーカイブページで抜粋を使用します。
コンテンツに変更を加えることはなく、オフにしたい場合はプラグインを無効化するだけです。
この投稿が、コーディングなしでWordPress抜粋を簡単にカスタマイズするのにお役に立てば幸いです。また、ビジネスサイトには必須のプラグインのリストや、サイトのSSL証明書を取得する方法についてのガイドもお勧めです。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dom says
Is there a way to edit the excerpt length on a specific page? or a specific category?
WPBeginner Support says
If you wanted a custom length for a specific post or page then you would want to manually set the excerpt in the post/page itself.
管理者
Marie-Christine says
Hello,
in code editor is there a way to display the Excerpt tab in the main window instead of in the side bar?
WPBeginner Support says
We do not have a method we would recommend at the moment to force it into the main editing area.
管理者
Raihan says
I’m facing a big problem. The excerpt is showing perfectly in desktop and tab responsive mode on the post. But the main issue is, it is not showing up in mobile responsive mode. What should I do…..?
WPBeginner Support says
It would depend on the specific theme you are using as each theme has different styling but if you reach out to your theme’s support they can normally assist with the mobile styling.
管理者
Kristie says
Thanks so much! I’ve been trying to solve this problem for a few weeks.
Kristie
Edwin says
So I’m having an issue where anything I write in the excerpt box DOES NOT display verbatim but only display the first 40 characters or whatever from the content summary. What am I doing wrong here?
WPBeginner Support says
You would want to check with your theme’s support as it sounds like a design for your specific theme.
管理者
Roni Lion says
I may have missed it, but what I was looking for and did not find is how it looks to the user. A user sees a web page or post, sees the excerpts, clicks the more button–where and how does it display? It’d be meaningful to include in this post — unless you already did and I missed it!
WPBeginner Support says
The display would heavily depend on your specific theme, as each are different we can’t say how your specific theme will display the excerpts
管理者
Rintesh Roy says
Thanks for suggesting the ‘Ádvanced Excerpt’ plugin. It is quite good.
WPBeginner Support says
Glad you found our recommendation helpful
管理者
Khubaib says
Thank for excerpt solution, you guys are serving a lot of for the community.
WPBeginner Support says
You’re welcome, glad you found our guide helpful
管理者
Temitayo says
Please. advanced excerpts is not working for Divi theme
WPBeginner Support says
If you reach out to the plugin’s support they should be able to assist you with a conflict like that.
管理者
Márcio says
The new versions of the post editor hides the “add more tag” button.
The way I found to solve the problem was installing the classic editor plugin.
WPBeginner Support says
For adding it in Gutenberg, you can use the more block or the manual excerpt can be found in the document’s settings
管理者
Nancy says
I have installed the Advanced Excerpt plugin, selected a place on my posts for the Read More button & made sure except was selected in my screen options in the drop down box at the top but it doesn’t work. I have a long posts on my home page, no Read More button & don’t see how the plugin makes any difference at all. Please help. Thanks.
Leanna says
This article is helpful for posts on the site, but does it carryover to automated emails sent to subscribers when new post is added? Currently emails show the entire new post, not giving them a reason to visit the site.
Theresa Fronius says
This was SO helpful. I tried the first two, which did not help. But the last one, installing the Advanced Excerpt plugin – THAT DID THE TRICK! Wish I would have found this before I had invested so many hours in trying everything else under the sun. Thank you!
Bexster says
That was a great post! I’ve been looking to remove image captions from being pulled into post excerpt summary – this easily did the trick! Also looking into this plugin too as need a call to action button not showing up at present. TY!!
Michał - Poland says
Thank you very much. Ive been thinking for a long time, how to extend “excerpt” . Even try to find it somewhere in the code. Very greatful for this information.
Jeff Risley says
Thanks! Very helpful
John says
I am making a blog with wordpress free and with sapor I am stuck because I don’t know how to change a photo they already had on the blog I pressed a button on the top right corner and I chose a image and it came on top of the photo that had on I’m trying to change their one not add another so could you tell me how to do it (I’m doing it with sapor)
Kind regard’s
John
Jules says
Thank you mucho this was soooo helpful and easy to understand too ..
Nic Mattson says
I want to completely remove the automatic excerpt from appearing on certain posts display modules. Any advice?
Roz says
Thanks a lot! it is helpful for me
shank says
Thanks!! Advanced Excerpt plugin helped me on Twenty seventeen theme..
Ernie says
Can you help me remove “read more” on my post pages. Even my privacy policy page have this annoying “read more” button. I installed WP and already had this button. Thanks!!
Great Ravian says
How i can allow tag or other HTML tags in post excerpt without using a plugin?
shubham says
how i can continue customizing my website which i left half on wordpress running with wamp.??
Ihsan says
Dear Author,
Can you guide me on how to allow link (tag) on my post excerpt on Recent Post Extended plugin please? I tried few things – adding the tag on excerpt box, tried few things that I found online the last 3 hours, but no successful result. Please help.
Thank you and regards,
Ihsan
Hemang Rindani says
WordPress is a powerful CMS platform that can handle large chunks of data through easy to use interface. Over a website it is important to showcase the offerings on the landing page to attract more visitors. WordPress provides excerpts that helps a developer to add a summary block to the webpage. This size, shape and color of the block can be customized by the user. The links to the entire content can be placed in the block and can be managed manually from the dashboard. Use only the authenticated plugins like Advanced Excerpt that doesn’t compromise the website security.
Ken Schleimer says
The plug-in is a nice idea but I’d like to use an image instead of text for the “Read More” and haven’t found an easy way to accomplish it.
deuns26 says
hello,
this website has exactly the same Article.
I wonder who to create original article.
often it is the same article, but in other language.
Maxwell Ifeanyi Anozie says
Pls,help me customize my wordpress account.This is my account:
WPBeginner Support says
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Sue Waterworth says
I so appreciate your simple answers to what, for me, are complex questions. Thank you.