2026年5月22日

2026年5月22日

WordPressで記事に「続きを読む」ボタンを付ける方法(ブロックテーマ・クラシックテーマ別)

WordPressで記事一覧に「続きを読む」ボタンを出す方法は、テーマが記事一覧を「本文の全文」で表示しているか「抜粋」で表示しているかで変わります。全文表示のテーマなら本文に「続きを読む」ブロックを入れ、抜粋表示のテーマやブロックテーマなら、一覧側の抜粋やリンクの設定で調整します。この記事では、自分のサイトがどちらの仕組みかを見分ける方法から、テーマ別の設定手順、リンク文言の変更、うまく表示されないときの確認ポイントまでを説明します。

まず仕組みを知る:「全文表示」と「抜粋表示」の違い

トップページやカテゴリー一覧に記事が並ぶとき、各記事の部分にどんな内容が出るかはテーマが決めています。大きく分けると次の2種類です。

  • 全文表示型:一覧にも記事の本文がそのまま表示される。本文の途中で区切らないと、長い記事が一覧に丸ごと並んでしまう。
  • 抜粋表示型:一覧には本文の冒頭を自動で切り取った文章(抜粋)だけが表示され、その後ろにリンクが付く。

本文に入れる「続きを読む」ブロックが効くのは、前者の全文表示型の一覧だけです。抜粋表示型の一覧では、本文中の区切りは使われず、抜粋の長さやリンク文言はテーマ側・一覧側の設定で決まります。「ブロックを入れたのに何も変わらない」という相談の多くは、この違いが原因です。

見分け方は簡単で、トップページを開いて、一覧に表示されている文章が本文の画像や見出しまで含んでいれば全文表示型、短い文章の後ろに「…」や「[…]」が付いていれば抜粋表示型です。

なお、この区切りや抜粋は記事一覧のための機能です。記事の個別ページ(シングルページ)では、区切りの有無に関係なく本文がすべて表示されます。

全文表示のテーマで「続きを読む」ブロックを使う

クラシックテーマの多くは、一覧で本文を表示するときに「続きを読む」の区切りを読み取って、そこから先を隠し、リンクを表示します。

区切りを入れる手順

  1. 投稿の編集画面を開き、一覧に見せたい部分(導入の段落など)の直後にカーソルを置きます。
  2. 左上の「+」(ブロック挿入ツール)をクリックし、検索欄に「続きを読む」と入力します。
  3. 表示されたブロックを選ぶと、本文に「続きを読む」と書かれた点線の区切りが入ります。
  4. 投稿を更新し、トップページやカテゴリー一覧で区切りより前だけが表示されているか確認します。

検索すると、名前の似たブロックが複数表示されることがあります。本文の区切りに使うのは英語名で「More」と呼ばれるブロックで、挿入すると点線の区切り線として表示されるものです。後述する、クエリーループ内で使うリンク用ブロックとは別物です。

区切りは段落や見出しの間、本文の一番外側に置きます。グループやカラムなどの中に入れると、テーマによっては一覧の表示が崩れることがあります。

区切りの文言を変える

挿入した区切りの「続きを読む」という文字部分をクリックすると、そのまま文言を書き換えられます。たとえば「この記事の詳しい手順を見る」と入力すると、一覧に出るリンクの文字がその記事だけ変わります(テーマがこの機能に対応している場合)。

サイト全体で文言を変えたい場合は、テーマの設定画面に項目がないかを先に確認します。項目がなければ、子テーマの functions.php で変更できます。コードの編集が不安な場合は、この方法は使わずテーマの設定やカスタマイズ用のCSSだけで対応しても構いません。

// 本文の区切りから生成される「続きを読む」リンクの文言を変更する
add_filter( 'the_content_more_link', function () {
    return '<a class="more-link" href="' . esc_url( get_permalink() ) . '">記事の続きを読む</a>';
} );

標準のリンクには、個別ページの区切り位置へ移動するためのページ内リンク(URL末尾の #more-投稿ID)が付きます。上の例ではそれを外して、記事の先頭から読めるようにしています。また、この例はすべての記事で同じ文言を返すため、記事ごとに区切りで書き換えた文言も上書きされる点に注意してください。

ボタンらしい見た目にする

区切りから生成されるリンクには、通常 more-link というクラスが付いています。「外観」→「カスタマイズ」→「追加CSS」に次のようなCSSを入れると、文字リンクをボタン風にできます。

.more-link {
    display: inline-block;
    padding: 0.6em 1.4em;
    background: #2b6cb0;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}
.more-link:hover {
    background: #2c5282;
}

テーマによってクラス名が違うことがあるため、反映されないときはブラウザの開発者ツールでリンクのクラス名を確認してください。

抜粋表示のテーマ(クラシックテーマ)での調整

抜粋表示型のクラシックテーマでは、本文に区切りを入れても一覧の見た目は変わりません。調整できるのは主に次の2点です。

  • 抜粋の中身:投稿編集画面の右側の設定サイドバーにある「抜粋」欄に文章を入れると、自動の切り取りではなくその文章が一覧に表示されます。記事ごとに一覧での見せ方を整えたいときに便利です。
  • 抜粋の後ろのリンク:「続きを読む」ボタンの有無や文言、抜粋の文字数は、テーマの設定(「外観」→「カスタマイズ」内のテーマ独自の項目など)で変えられることが多いです。国産の有料テーマや無料テーマでは、一覧のカード表示とボタン文言を設定画面から変えられるものがよくあります。

テーマに設定項目がない場合、抜粋の後ろの「[…]」は excerpt_more フィルターで変更できますが、まずはテーマのマニュアルを確認するほうが安全です。

ブロックテーマでの設定(サイトエディター)

Twenty Twenty-Four や Twenty Twenty-Five のようなブロックテーマでは、記事一覧は「クエリーループ」ブロックで作られています。「外観」→「エディター」を開き、「テンプレート」からブログのホームやアーカイブのテンプレートを選ぶと、一覧の中身を直接編集できます。

クエリーループの中に何が入っているかで、やり方が変わります。

  • 「投稿抜粋」ブロックが入っている場合:抜粋の後ろに表示される「続きを読む」の文字はブロック上で直接書き換えられます。設定サイドバーでは、リンクを新しい行に表示するかどうかや、抜粋の長さを調整できます(バージョンにより項目が異なります)。
  • 「投稿コンテンツ」ブロックが入っている場合:一覧に本文が表示されるため、前述の「続きを読む」ブロック(本文の区切り)が意味を持ちます。
  • 独立したリンクを置きたい場合:クエリーループの中に、各記事へのリンクだけを表示するブロック(英語名「Read More」、日本語画面では「続きを読む」系の名前で表示)を追加できます。文言はブロック上で書き換えられ、色や文字サイズ、余白などは設定サイドバーで調整できます(項目はWordPressのバージョンによって異なります)。

ボタンらしく見せたい場合は、リンク用ブロックに背景色を付けて余白を広げると、追加CSSなしでもボタン風になります。テンプレートを編集したら「保存」を押し、サイトを表示して確認します。

うまくいかないときの確認ポイント

  • ブロックを入れても一覧が変わらない:テーマが抜粋表示型の可能性が高いです。抜粋欄やテーマ設定、ブロックテーマならテンプレートの「投稿抜粋」ブロックで調整します。
  • 個別ページで本文が途中までしか出ない:通常は起こりませんが、テーマやプラグインが一覧と同じ表示方法を使っている場合があります。テーマを一時的に標準テーマに切り替えて比較すると原因を絞り込めます。
  • 固定ページで効かない:固定ページは記事一覧に並ばないことが多いため、区切りを入れても目に見える変化はありません。
  • CSSやテキストを変えたのに反映されない:キャッシュ系プラグインのキャッシュ削除と、ブラウザの再読み込み(Windowsは Ctrl+F5 など)を試します。
  • テーマ更新でカスタマイズが消えた:functions.php を親テーマに直接書くと更新で上書きされます。コードは子テーマかコード管理用のプラグインに書きます。

画面の名称や設定項目は WordPress のバージョンとテーマによって異なります(2026年10月現在)。表記が見つからないときは、ブロック挿入ツールの検索で英語名を入れて探すと見つかることがあります。

まとめ

  • 「続きを読む」ブロック(本文の区切り)が効くのは、記事一覧で本文の全文を表示するテーマだけです。
  • 抜粋表示型のテーマでは、投稿の「抜粋」欄やテーマ設定で一覧の見せ方とボタン文言を調整します。
  • ブロックテーマでは、サイトエディターでクエリーループ内の「投稿抜粋」やリンク用ブロックを編集します。
  • ボタン風の見た目は、追加CSSかブロックの色・余白設定で作れます。反映されないときはキャッシュを確認します。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲