2025.04.03

WordPressプラグイン Read More WPで「続きを読む」機能を簡単に実装

angleinc0913

ニュースサイトやオウンドメディアによくある「続きを読む」ボタンを設置したいと思ったことはありませんか？記事の前半は公開し、後半部分は“続きを読む”リンクを押した人だけに表示されるようにすることで、コンテンツのコントロールがしやすくなります。

WordPressにはもともと「moreタグ」と呼ばれる機能がありますが、ブロックエディターではうまく機能しないことが多く、細かい表示設定やデザインの調整をしたい場合は、専用のプラグインを使うのがスムーズです。

そこでおすすめなのが、ショートコードでコンテンツを囲むだけで、簡単に「続きを読む」機能が実装できる「Read More WP」というプラグインです。

この記事では、Read More WPの基本的な使い方と、導入の流れ、デザインのカスタマイズ方法についてご紹介していきます。

プラグイン導入の手順

WordPress公式からプラグインをダウンロード

Read More WP のプラグイン紹介ページのダウンロードボタンをクリックすると、ZIPファイルがダウンロードされます。このファイルは解凍せずにZIP形式のままにしておいてください。

ダッシュボードでプラグインをアップロード

お使いのWordPressサイトのダッシュボードにアクセスして、「プラグイン」 >「新規プラグインを追加」>「プラグインのアップロード」へと進みます。ここで、先ほどダウンロードしたZIPファイルを選択し「今すぐインストール」をクリックします。

プラグインをインストールするとポップアップが出てきますが、ここでは「スキップ」を選択してください。

プラグインの設定

プラグイン有効化の後に表示される設定画面（もしくはプラグイン > インストール済みプラグイン一覧 > Read More WP > Settings）でプラグインの設定を行います。

設定箇所は3箇所だけです。

Read More Button Label … 「続きを読む」ボタンのテキストを変更できます
Read Less Button Label … 「表示を減らす」ボタンのテキストを変更できます
Hide Ellipsis(“…”) … ボタンの手間に「…」というテキストを入れるかどうかの設定ができます。あまり見栄えが良くないので、チェックを入れて非表示にしておきましょう。

上記の設定が完了したら「Save Settings」ボタンで設定を保存します。これで初期設定は完了です。

記事の設定

記事への追加方法はいたって簡単で、ショートコード[start-read-more]と[end-read-more]で非表示にしたい部分を囲むだけです。

たとえば編集画面でこのように設定した場合、

フロントエンドではこんな感じで表示されます。

非表示ボタンはこんな感じです。

デザインをカスタマイズ

このままでも十分便利なのですが、サイトに合わせて少しデザインをカスタマイズをしてみました。

CSSはこちらです。コピペしてお使いください。

.rmwp-button-wrap {
	width: 100%;
	display: block;
	text-align: center;
	position: relative;
}

.rmwp-button-wrap button {
	border: none;
	border-radius: 10px;
	padding: 14px 10px 12px 0px;
	margin: 0;
	width: 160px;
	font-size: 14px;
	background: #12A7CC; /* ボタンの背景色 */
	color: white; /* ボタンの文字色 */
}

.rmwp-button-wrap button:before,
.rmwp-button-wrap button.open:before {
	content: "+";
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	font-size: 1.2em;
	background: white;
	border-radius: 50%;
	color: #12A7CC; /* 表示ボタン(+)の色 */
	margin-right: 10px;
}

.rmwp-button-wrap button.open:before {
	content: "×";
	color: #555; /* 非表示ボタン(+)の色 */
}

応用編：パラメータを変更するとクイズ機能にも使える

Read More WPは、ショートコードのパラメータを変更することにより、ボタンのテキストを個別に変えることができます。例えば、[start-read-more more="答えを見る" less="答えを隠す"] のようにすると、クイズや問題を設定することも可能です。

色々な活用法がありますので、サイトのテーマに合わせて設定してみてください。

まとめ

Read More WPは、個別記事の中で「続きを読む」リンクを使って前後半を切り分けられる、とても便利なプラグインです。
記事をすべて一度に表示するのではなく、まずは興味を持ってもらえる導入部分を読んでもらい、続きはクリックで表示という流れを作ることで、読者の集中力を保ちつつ、ページの見た目も整えることができます。

コンテンツの見せ方にちょっとした工夫を加えたいとき、また会員限定の後半表示などにも応用できる構成です。
難しい設定は不要なので、WordPressに不慣れな方でも扱いやすく、読みやすさと演出の両立におすすめのプラグインです。ぜひ一度試してみてください。

#Read More WP #WordPress #プラグイン

ABOUT ME

WordPressプラグイン Read More WPで「続きを読む」機能を簡単に実装

目次