WordPressの「抜粋」は、投稿の要約や概要を表示するための便利な機能ですが、記事一覧などに表示させたり、文字数を変更する際に困ったことはありませんか？
今回は、抜粋の設定方法から取得や表示、文字数の変更や文末の変更などを一通り初心者向けに解説します。
こんな人にオススメ！
- 抜粋ってそもそも何？という方
- 設定した抜粋の情報を取得して、表示する方法が知りたい方
- 抜粋の文字数を変更したい方
- テーマファイルごとに文字数を変更したい方
- 文末の[...]を変更したい方
- 自動挿入されるpタグを削除したい方
![文末の[...]を変更](https://tagnote.net/wp-content/uploads/2023/05/wp_04-10.webp)
WordPressの抜粋とは
WordPressの抜粋は、投稿の概要を表示するための機能です。
通常、投稿の本文の先頭部分から自動的に抜粋を生成しますが、手動で設定することもでき、抜粋の長さは設定により変更可能です。
抜粋の入力は必須ではありませんが、SEOにとっても重要で、検索結果に表示される文章を決定する際に利用されます。
抜粋の文字数は？
抜粋欄が空の場合は、日本語版で且つ初期状態では投稿の本文の先頭110文字が表示されます。（英語版では55文字）
そして、110文字を超える部分は文末に[…]が表示されます。
抜粋欄に入力がある場合は、入力文字数だけ表示されます。
ただし、マルチバイト機能の拡張プラグイン「WP Multibyte Patch」をインストール & 有効化していない場合は文字数のカウントがうまくできない場合があります。
抜粋の入力方法
抜粋は、投稿ページの編集画面の右側サイドバーの ❶ 投稿 > ❷「抜粋」欄で設定可能です。
サイドバーが表示されていない場合は、画面右上の 
(設定)マークをクリックして表示させましょう。
旧エディター(Classic Editor)の場合は、投稿ページの編集画面の下の部分にある抜粋欄で設定可能です。
抜粋が表示されない場合
投稿ページの編集画面に抜粋欄が表示されていない場合は、画面右上の ❶ 
(オプション) > ❷「設定」欄 を順にクリックして設定ウインドウを開きます。
設定ウインドウの ❸ パネル > ❹ 抜粋 にチェックが入っているか確認してみましょう。
旧エディター(Classic Editor)の場合は、投稿ページの編集画面右上の ❶ 表示オプション をクリックし、
開いたウィンドウで ❷「抜粋」にチェックが入っているか確認しましょう。
固定ページに抜粋を追加したい場合は、次に紹介する方法を試してみてね！
固定ページで抜粋を表示する
固定ページに抜粋のチェック項目を追加する場合は、functions.phpに以下のコードを追加します。
<?php add_post_type_support( 'page' , 'excerpt' ); ?>
「add_post_type_support」は、指定した投稿タイプで特定の機能を使用可能にする関数です。
ここでは、第一引数に「固定ページ」を表す page を、第二引数に「抜粋機能」を表す excerpt を指定しています。
この１行を、functions.phpに追記するだけで、固定ページの編集画面に抜粋が追加されます。
抜粋の表示方法
投稿ページの編集画面などで入力した抜粋内容をサイトに表示する場合は、表示させたい箇所に以下のコードを記述します。
<?php the_excerpt(); ?>
この１行を記述するだけで抜粋の内容が表示されます。
ただし、WordPressループ内でのみ利用可能ですので注意して下さい。
抜粋のカスタマイズ
今回は、「抜粋」の以下の５つのカスタマイズ方法について解説いたします。
抜粋の文字数の変更
抜粋の文字数は、デフォルトでは110文字(英語版では55文字)ですが、この文字数は変更することができます。
例えば、抜粋の文字数を「20」文字に変更する場合は、以下の内容を funcsions.php に記述します。
<?php
function custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length' , 'custom_excerpt_length' , 999 );
?>
これで、デフォルトの文字数である110文字から20文字に変更されました。
ただし、抜粋欄に入力がある場合は、その入力文字数が表示されるので注意しましょう。
今回は、「add_filter」を使って、抜粋の長さを定義する「excerpt_length」フィルターフックに、数値を返す関数を登録することで、抜粋の文字数を変更しました。
では、その「add_filter」について簡単に解説します。
<?php add_filter( $tag , $function_to_add , $priority ); ?>
| $tag | フィルターフック名 |
| $function_to_add | フィルター適用時に呼び出す関数名 |
| $priority | 関数を実行する順序。数値が小さいほど早く実行。初期値 = 10。 |
第一引数に、抜粋の長さを定義するフィルターフック excerpt_length を指定し、第二引数に文字数を返す関数を指定します。
そして第三引数に、関数を実行する順序である「999」を記述しています。
この「999」の数値については、WordPress Codex では以下のように説明されています。
999 などの優先度を正しく設定してください。そうしないと、この関数のデフォルトの WordPress フィルターが最後に実行され、ここで設定した内容が上書きされます。
テーマファイル別に文字数を変更
前項の functions.php に記述する方法では、全ての抜粋の文字数が変更されてしまいます。
文字数をテーマファイルごとに変更したい場合は、該当のテーマファイル自体に以下のような記述をします。
<?php
add_filter( 'excerpt_length' , function ( $length ) {
return 20; //表示する文字数
}, 999 );
the_excerpt();
?>
レイアウトの都合上、抜粋の文字数を一部だけ変更したい場合などに試してみてはいかがでしょうか。
文末の[...]を変更する
抜粋の表示は、文字数が最大文字数を越えると、その続きの文字が省略される代わりに文末に [...] が表示されます。
例えば、この文末の [...] を ... に変更する場合は、以下のコードを functions.php に記述します。
<?php
function new_excerpt_more( $more ) {
return '...' ;
}
add_filter( 'excerpt_more' , 'new_excerpt_more' );
?>
「add_filter」を使って、抜粋の後ろの文字列の長さを定義する「excerpt_more」フィルターフックに、文字列を返す関数を登録することで、抜粋の文末を変更しています。
これで、抜粋の文字数が最大文字数を越えると、文末のデフォルトの文字列 [...] は、設定した文字列（今回は ... ）に変更されます。
自動挿入される全ての抜粋のpタグを削除
抜粋を「the_excerpt」を使用して表示させると、自動的にpタグで囲まれるため、うまくCSSが機能しなかったり、レイアウトが崩れてしまう場合があります。
このpタグを削除するには、functions.php に以下の内容を記述します。
<?php remove_filter( 'the_excerpt' , 'wpautop' ); ?>
この１行を追加することで、「the_excerpt」で表示した全ての抜粋のpタグが削除されます。
今回は、特定のフィルターフックに付加されている関数を除去する「remove_filter」を使用しました。
では、ここで使用した「remove_filter」について簡単に解説します。
<?php
remove_filter( $tag , $function_to_remove );
?>
| $tag | フィルターフック名 |
| $function_to_remove | 削除する関数名 |
今回は、第一引数に、記事の抜粋(または投稿、抜粋がない場合)に適用するフィルターフック the_excerpt を指定し、第二引数にpタグを挿入する関数 wpautop を指定します。
自動挿入される一部の抜粋のpタグを削除
全てのページの抜粋のpタグを削除せずに、一部のみpタグを削除したい場合は、「the_excerpt」を使用する代わりに「get_the_excerpt」を使って以下のように記述します。
<?php echo get_the_excerpt(); ?>
このテンプレートタグもWordPressループ内でのみ使用可能ですので、注意して下さい。
場所によってpタグを削除したい場合はぜひ試してみて下さい。
「get_the_excerpt()」について詳しく知りたい方はコチラから！
最後に
今回は、抜粋の「設定方法」から「取得や表示」、「文字数の変更」や「文末の変更」などを一通り初心者向けに解説しました。
WordPressについて、他にも詳しく知りたい方は他の記事もチェックしてみて下さいね。
-
WordPress
WordPressの基本的な使い方について解説した記事一覧ページです。 イラストを交えてやさしく解説していますので、ぜひご覧ください。
続きを見る
