Cocoon『もっと見る』『次のページ』『新着記事』のテキスト変更カスタマイズ

Cocoonを使っていると、「もっと見る」「次のページ」「新着記事」などの表記が、サイトの雰囲気に合わないと感じることがあります。

• 英語表記にしたい
• クリックを促したい
• トップページをおしゃれに見せたい

そんなときは、テキストを少し変えるだけでサイトの印象や回遊率がぐっと変わります。

この記事では、Cocoonのボタンや見出しテキストをカスタマイズする方法を解説します。

• 「もっと見る」（ボタン）：例「Read More」に
• 「次のページ」（ボタン）：例「Next」に
• 「新着記事」（見出し）：例「News」に

事前準備｜functions.php編集の基本

コードの仕組みについて

この記事で紹介しているコードは、Cocoonに用意されているフィルターフックを使って、画面に表示されるテキスト部分だけを変更するカスタマイズです。

記事内容やデータベースを書き換える処理は行わないため、サイト構造に影響はありません。

不要になった場合は、追加したコードを削除するだけで元に戻せます。

初めて functions.php を編集する方でも、コピペだけで安全に使える内容になっています。

コードを記述する場所｜Cocoon子テーマのfunctions.php

テキスト変更のコードは、Cocoonの子テーマにあるfunctions.phpに記述します。

編集時の注意点

• 子テーマを使用
  親テーマに直接書くと、アップデート時にカスタマイズが上書きされます。必ず子テーマ側の functions.php を編集しましょう。
• バックアップ推奨
  functions.php はとてもデリケートなファイルです。編集前にバックアップを取っておくと、万が一エラーが出てもすぐ元に戻せます。
  
  もし画面が真っ白になった場合は、FTPやサーバーのファイルマネージャーからfunctions.php を元の状態に戻せば復旧できます。

バックアップ方法はこちらで解説しています。

• テキストを書き換えるときのポイント

コード内の ‘もっと見る‘ や ‘次のページ‘ の部分を、自分の好きな文字に書き換えるだけで変更できます。

例：

return 'もっと見る';

• ' '（シングルクォート）は消さない
• 文字はクォートの中の文字だけを書き換える
• 全角・日本語も使用可能

クォートの外を変更するとエラーの原因になります。中の文字だけ差し替えるイメージで編集しましょう。

Cocoon｜「もっと見る」ボタンのテキストを変更する方法

「もっと見る」ボタンは、主にトップページ（フロントページ）や投稿一覧ページで、新着記事・記事カードの下部に表示されます。

例：「もっと見る」を「Read More」に変更する場合、以下をfunctions.phpに追加します。

// 「もっと見る」ボタンのテキストを変更
add_filter('more_button_caption', function ($caption) {
  return 'Read More';
});

表記の応用例

• 日本語でカジュアルに：「さらに見る」
• アクションを促す表現：「記事一覧へ」
• 英語でスタイリッシュに：「Explore More」

ポイント

• ボタンの文字は短く・行動を促す表現がおすすめです。
• 長すぎるとデザインが崩れることがあるため、10文字前後を目安にしましょう。

Cocoon｜ページネーションの「次のページ」テキストを変更する方法

ページネーションは、カテゴリーページ・タグページ・検索結果ページなど、複数ページに分かれる一覧画面の下部に表示されます。

例：「次のページ」を「Next」に変更する場合、以下をfunctions.phpに追加します。

// ページネーションの「次のページ」テキストを変更
add_filter('pagination_next_link_caption', function ($caption) {
  return 'Next';
});

表記の応用例

• シンプルに：「次へ」
• 英語で：「Next Page」
• 親しみやすく：「次の記事へ」

ポイント

• ページネーションは複数ページがある場合のみ表示されます。
• 設定後は、アーカイブページなどで正しく反映されているか確認しましょう。

Cocoon｜「新着記事」見出しを変更する方法

「新着記事」見出しは、トップページ（フロントページ）に表示される記事一覧エリアのタイトル部分です。

例：「新着記事」を「New Post」に変更したい場合、以下をfunctions.phpに追加します。

// フロントページの「新着記事」見出しを変更
add_filter('new_entries_caption', function ($caption) {
  return 'New Post';
});

ポイント

• トップページの印象を左右するため、サイトの雰囲気に合った表記にすると効果的です。
• 日本語・英語どちらでも設定できます。

まとめ

今回紹介した方法を使えば、

• ボタン文言を変更できる
• 見出しテキストを調整できる
• サイトの雰囲気に合わせられる

といったカスタマイズが行えます。

設定後はトップページ・アーカイブページで表示が変わっているか必ず確認してみてください。

サイトのコンセプトに合ったテキストを設定して、クリックされやすく・伝わりやすいサイトに仕上げていきましょう。