Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでページに抜粋を追加する方法(ステップバイステップ)

ページの簡潔な要約を追加することで、ユーザーエクスペリエンスと検索エンジンの可視性を大幅に向上させることができます。

抜粋とは、投稿やページに関する説明や要約、ちょっとした詳細などをコンテンツから短く抜き出したものです。初期設定では、抜粋はWordPressの投稿でのみ利用可能です。

WPBeginnerでは、長年にわたって何百ものチュートリアルを執筆してきましたが、サイトパフォーマンスを向上させるために、サイト上のページから抜粋して表示したいユーザーもいることを理解しています。

この投稿では、WordPressでページに抜粋を簡単に追加する方法を順を追って紹介します。

Add Excerpts to Your Pages in WordPress

なぜWordPressでページに抜粋を追加するのか?

WordPressには、投稿とページという2つのコンテンツタイプが初期設定として用意されています。投稿は、ブログやホームページに時系列順に表示されます。

一方、ページは、時間順に公開されない独立したコンテンツです。一般的には、会社概要やお問い合わせページのような単発のコンテンツに使用されます。

ページの抜粋を表示する必要がある場合があります。例えば、ページだけでWordPressサイトを構築している場合に便利です。

抜粋は、訪問者がコンテンツを閲覧したり、ページの要約を見たりしやすくすることで、全体的なユーザーエクスペリエンスを向上させることができます。

それでは、WordPressでページに抜粋を追加し、サイトに表示する方法を見てみましょう。以下のクイックリンクから、さまざまな方法に飛ぶことができます:

WordPressでページに抜粋を追加する方法

WordPressでページ抜粋を有効化するには、テーマのfunctions.phpファイルにカスタムコードを追加します。

しかし、コードタイプ中のわずかなエラーでサイトが壊れてしまうこともある。さらに、別のテーマに切り替えたり更新したりすると、コードをすべて追加し直さなければならなくなる。

そこでWPCodeの登場です。市場で最高のWordPressコードスニペットプラグインであり、あなたのサイトにカスタマイザーコードを安全かつ簡単に追加することができます。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

:WPCodeには、このチュートリアルで使用できる無料プランがあります。しかし、プロバージョンにアップグレードすると、コードスニペットのクラウドライブラリ、スマート条件ロジック、カスタムブロックオプションにアクセスできるようになります。

有効化したら、WordPressダッシュボードからコードスニペット ” + スニペットの追加ページにアクセスします。ここで、「カスタムコードを追加(新規スニペット)」設定の下にある「スニペットを使用」ボタンをクリックします。

Add new snippet

カスタムスニペットの作成」ページが表示されますので、スニペットの名前を入力してください。この名前はあなたの識別のためだけのもので、あなたのサイトのフロントエンドに表示されることはありません。

次に、右側のドロップダウンメニューから「PHP Snippet」オプションを選択します。

Choose the PHP Snippet option for the page excerpts code

次に、以下のカスタムコードを「コードプレビュー」ボックスに追加します:

add_post_type_support( 'page', 'excerpt' );

挿入」セクションまでスクロールダウンし、「自動挿入」モードを選択する。

スニペットを有効化すると、カスタマイザーコードはあなたのサイトで自動的に実行されます。

Choose insertion method

その後、ページの一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。

最後に「Save Snippet」ボタンをクリックして、設定を保存します。

Click the Save Snippet button for the page excerpts code

WordPressのブロックエディターで抜粋を追加したいページを開いてください。

そうすると、画面右側のブロックパネルに「抜粋」タブがあることに気づくだろう。

ここでは、簡単にタブを展開し、WordPressページの抜粋を追加することができます。

Add page excerpts in the Excerpts tab in the block panel

更新」または「公開」ボタンをクリックし、変更内容を保存します。

あとは、抜粋を追加したいWordPressページすべてについて、このプロセスを繰り返すだけです。

WordPressでページの抜粋を表示する方法

ページに抜粋機能を追加したら、WordPressサイトに抜粋を表示しましょう。

これを行うには、ウィジェットエリアまたはページにショートコードを追加する必要があります。

まず、Display Postsプラグインをインストールして有効化する必要があります。詳しくは、初心者向けWordPressプラグインのインストール方法をご覧ください。

このプラグインは、最近の10ページのタイトル、抜粋、続きを読むリンクを表示するショートコードを有効化します。

ページにカスタマイザー抜粋を入力しなかった場合、プラグインは初期設定の55ワードで抜粋を自動生成します。

方法1:WordPressのページに抜粋ページを表示する

有効化した後、あなたのページとその抜粋のリストを表示したい新しいページを作成する必要があります。

ブロックメニューを開き、ショートコード・ブロックを追加します。次に、ブロック自体に以下のショートコードを貼り付けます:

[display-posts post_type="page" include_excerpt="true" excerpt_more="Continue Reading" excerpt_more_link="true"].

Add the page excerpt shortcode in the block editor

最後に、「更新」または「公開」ボタンをクリックして、設定を保存します。

あとは、WordPressサイトにアクセスするだけで、ページの抜粋リストが表示される。

Preview of page excerpts on a page

方法2:WordPressのサイドバーにページの抜粋を表示する

WordPressのサイドバーにページの抜粋を表示したい場合は、WordPressのダッシュボードから外観 ” ウィジェットページにアクセスする必要があります。

:ダッシュボードに「ウィジェット」メニュータブが表示されない場合は、ブロックテーマを使用していることを意味します。その場合は、次の方法に進んでください。

ここで、ブロックの追加「+」ボタンをクリックして、左側のブロックメニューを展開します。次に、サイドバーエリアにショートコードブロックを追加します。

Add page excerpts shortcode in a widget area of your choice like the Sidebar

その後、以下のショートコードをコピー&ペーストしてブロックに貼り付ける:

[display-posts post_type="page" include_excerpt="true" excerpt_more="Continue Reading" excerpt_more_link="true"].

最後に「更新」ボタンをクリックして設定を保存します。

これで、WordPressブログにアクセスしてページの抜粋を表示できる。

Preview of page excerpts in the WordPress sidebar

方法3: フルサイトエディターでページの抜粋を表示する。

ブロックテーマを使用している場合は、WordPress管理画面のサイドバーから外観 ” エディターページにアクセスする必要があります。

サイトエディターが開きますので、抜粋リストを表示したいページを選択してください。

Choose a page to edit in the full site editor

次に、画面上のブロック追加「+」ボタンをクリックして、ショートコード・ブロックを追加します。

そして、以下のショートコードをコピー&ペーストしてください:

[display-posts post_type="page" include_excerpt="true" excerpt_more="Continue Reading" excerpt_more_link="true"].

Add page excerpts shortcode in the full site editor

最後に「保存」ボタンをクリックして設定を保存します。

では、あなたのサイトにアクセスしてページ抜粋のリストを表示してください。

Page excerpts preview in the WordPress block theme

ボーナス:WordPressで投稿抜粋を表示する

ページ以外にも、WordPressブログで投稿の抜粋を表示するのも良いアイデアだ。

初期設定では、WordPressはホームページ、アーカイブページ、ブログページに投稿全文を表示します。これは多くのスクロールを意味し、あなたのサイトを素早く閲覧したい訪問者にネガティブなユーザーエクスペリエンスを提供する可能性があります。

ブログが成長するにつれて、過去の投稿リストも他のページに押され、表示回数が減っていきます。だからこそ、ブログやアーカイブページで投稿の抜粋を表示することを検討すべきなのです。

An example of post excerpts in a WordPress theme

クラシックテーマを使用している場合、WordPress管理画面のサイドバーから外観 ” カスタマイズページにアクセスすることで、投稿抜粋を追加することができます。

カスタマイザーが開いたら、画面の左カラムにある’Blog’タブを展開します。投稿コンテンツ’セクションまでスクロールダウンし、’抜粋’オプションをクリックします。

Adding post excerpts to your WordPress website

ただし、これらの設定は使用しているテーマによって異なる可能性があることに留意してください。

あなたのテーマが抜粋をサポートしていない場合は、カスタムコードまたはSeedProdのようなページビルダーを使用してブログに投稿抜粋を追加することができます。

Adding blog excerpts to a WordPress theme

詳しい説明は、WordPressテーマで投稿抜粋を表示する方法のチュートリアルをご覧ください。

この投稿が、WordPress でページに抜粋を追加する方法を学ぶのにお役に立てば幸いです。また、最高のウェブサイトビルダーを選択する方法についてのガイド、または最高のライブチャットソフトウェアの専門家の選択もご覧ください。

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

42件のコメント返信を残す

  1. Moinuddin Waheed

    easy to follow tutorial for making excerpts for the blog posts.
    I have used excerpts for most of my blog posts but didn’t know the exact length of the excerpts to use.
    is there any minimum or maximum length for post excerpts?
    and does the length of the excerpts make any difference advantage or disadvantage of seo?

  2. marcelo araujo

    Hi, great tip. Tks a lot! Its possible to use same param to get “tags” in pages?
    add_post_type_support( ‘page’, ‘excerpt’ );
    like:
    add_post_type_support( ‘page’, ‘tags’ );
    its correct? it works?
    Tks!

  3. Jim Kernicky

    Easy as pie – thanks a lot for that!

    • WPBeginner Support

      You’re welcome :)

      管理者

  4. Jean-Louis

    It’s very helpful… Thank you so much!

    • WPBeginner Support

      Glad our article was helpful :)

      管理者

  5. Adam

    So, I can’t find the “excerpt” option under “screen options” on the post/page editing page. I added the code to my functions.php file and the option to include the ‘excerpts’ is still not showing up. It’s as if the excerpts function doesn’t even exist on my install of wordpress. I added the following code and nothing changed:
    add_post_type_support( ‘page’, ‘excerpt’ );

    Please help

  6. Juan Manuel Linares

    Thanks so much, it also worked for me, just when I needed it!

    It would also be advisable that you suggest ppl to check Screen Options (as CTGIRL said), ‘cause in my case it was hidden there ;)

    Thanks anyway!

  7. Steve

    Is there a way to add an excerpt to an archive category page like with the code for pages? The following code worked great for pages. Wanting to add it to the category archive too.

    add_post_type_support( ‘page’, ‘excerpt’ );

  8. Ruth Billheimer

    Thank you so much! This is excellent and just what I was looking for.

  9. Atilla

    Thank you for the code!

  10. Djong Timoer

    I works !!
    Thank you

    Do you have idea how to use in post types?

  11. Manoj

    Thanks for the code .But if i don’t write content in excerpt section , Excerpt is not retrieving from editior .

  12. Amit kumar

    how to separate post excerpt in box

    • Sreehari P Raju

      You have to use CSS for that :)

  13. Toure

    How can it be added to a page template?

  14. nad ray

    You should wrap the code in :

    …for it to work and not make your site break/display a blank page.

  15. Reza

    How can I add excerpts to the events? Can anyone please help?

    • nad ray

      I would use the same code, but change page to events (line 3). If that does not work you need to find your events custom post type name and enter it instead of pages.

  16. ctgirl

    The code worked for me. Added it to functions.php, and the Excerpt field became available in Screen options. Thanks so much!

  17. kapil

    around 15 days ago, same above code work perfectly for me, but now it is not working, what may be the problem, can anyone help me ? above code doesn’t show excerpt place in admin panel for new website that I am developing right now.

    • Firda

      It’s working for me. Maybe the exceprt was hide by screen options?

  18. João G.

    That’s amazing! I got a job to change the layout of a website which is running on WP and I would have to search for a function to get the content with “strip_tags” and reduce characters, but after “googling”, found your post. Great !!

  19. Real name

    Tank’s

    codex.wordpress.org/Function_Reference/add_post_type_support#Example

  20. Julio

    Thanks! worked perfectly

  21. Dave Andrew

    Worked a treat. Thanks for the post.

  22. Owen

    Thanks your sharing :)

  23. Lins

    Thanks, super-handy & works easily. :)

  24. syndrael

    Thanks it works..

  25. Alastair Barnett

    Hello,

    I posted the above code to my functions php. I now cannot access my website. Here is the message I receive:Parse error: syntax error, unexpected T_FUNCTION in /home/content/94/8738594/html/wp-content/themes/associate/functions.php on line 82

    Please tell me how I can access my website in order to delete this code. Thanks if you can help. I’ve just lost my website and in a bit of a panic. Website address: http://www.thewritingbutler.com
    AB

  26. WK

    Added the code to my functions.php to enable excerpts on my pages.

    Worked perfectly, first time – thanks.

    W.

  27. mebhuwan

    Thank you for posting. Great Code. :)

  28. DanS

    Brilliant, thank you

  29. softboxkid

    no need any plugins… just place this add_post_type_support( 'page', 'excerpt' );
    to your functions.php

    • ghimeray

      How to get this excerpt into the page?
      Tne Excerpt function is working well, but i’m not able to get the excerpt into the front page.

    • adam

      This didn’t work for me. :( Still no excerpts option. Using default 2015 theme.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。