WordPressで投稿記事内に「続きを読む（more）タグ」を入れるプラグインはこれ！

この記事では、WordPress/Cocoonで、投稿記事内に「続きを読むボタン（moreタグ）」を入れるプラグインをご紹介いたします。

ブログを書いていると、やたら長い文章になってしまい、「見たい人だけ見れる表示にしたい…」と思いますよね。

しかしmoreタグは、投稿記事内に挿入しても効かないものなんですね。（後ほど理由を説明します）

そこで今回は、続きを読む（moreタグ）を入れたかのような表示になる、アコーディオンメニューをご紹介いたします。

投稿記事内に「続きを読む（moreタグ）」を入れても効かない理由

理由は簡単。

moreタグはそもそも、記事一覧の表示方法が、開いた状態で反映されるタイプのブログに適用するタグだからです。

記事一覧が開いた状態とはこれ

このブログは私のはてなブログです。（実物を見てみたい方はこちら）

こういった、トップページに本文が丸出しのタイプのブログに対し、

moreタグを入れて、「続きを読む」リンクを生成するとスッキリ見えますよ、というタグ。

なので、投稿記事内でmoreタグをつかうというのは、そもそもタグの使い方が間違えているんですね。

みんなが実現したい続きを読む（moreタグ）はこれ

皆さんがイメージしている、続きを読む（moreタグ）は、

「一部分を折りたたんで表示するもの」という認識だと思います。

なので、投稿記事内に何かしらのタグやらカスタマイズをして、クリックすれば以下を表示する仕組みにしたいということ。

これを実現するのは、アコーディオンというメニューです。

アコーディオンとは

アコーディオンは、CSS＆HTMLを使って表示する方法と、

プラグインを入れてショートコードを挿入する方法があります。

今回は、プラグイン Shortcodes Ultimate を使って、アコーディオンメニューを作る方法をご紹介します。

投稿記事の本文を折りたたむアコーディオンプラグインの導入＆使い方

１：プラグインを入れる

ダッシュボード ＞ プラグイン ＞ 新規追加 > Shortcodes Ultimate を検索

すると↑のような Shortcodes Ultimate というプラグインが出てくるので、

今すぐインストール をクリックして、有効化してください。

ダッシュボードのメニューにショートコードのボタンが出てきたらOK。

これで導入は終わりです。次に使い方をご説明します。

２：Shortcodes Ultimateの使い方

まずは投稿記事をひらいてください。

何か文字を打つと、［］ショートコード というボタンが出てくるのでこれをクリック。

すると、ショートコードで使用できるものが一覧で出てきます。

この中の、アコーディオン を選択してください。

下記のようなショートコードが出てくるので、ショートコードを挿入をクリック。

するとショートコードが挿入されます。

このショートコードが、アコーディオンの本体です。

スポイラーのタイトル部分にタイトルを入力してください

非表示のコンテンツ部分に、隠したい中身を入力してください。

入力できたら完成です。

できあがりはこんな感じ

では次に、このアコーディオンのカスタマイズをご紹介します。

アコーディオンを好きなスタイルとアイコンにカスタマイズしよう

Shortcodes Ultimateは、デフォルトでいくつか種類を提示してくれており、

ショートコード内の、style=””とicon=””をカスタマイズすることで、好みの設定に変更できます。

style要素は３つ、icon要素は13この計39パターン！

お好みにカスタマイズしてくださいね。

１：表示スタイル（style）のカスタマイズ方法

ダッシュボード ＞ ショートコード ＞ Available Shortcode ＞ アコーディオンをクリック

ショートコードという枠が出てきます。

ここは、ショートコードを呼び出した時の、コード内容を変更するエディターになります。

※なお、編集ししたあとの設定はここでは保存されません。あくまでも編集画面。

下にスクロールすると、styleの要素として使用できる3つの候補が挙げられています。

• default（デフォルト）
• fancy（ファンシー）
• simple（シンプル）

これを、ショートコードエディタ部分のstyle=””の中にコピペしてください。

カスタマイズしたショートコードが出来上がったら、全体をコピーして、投稿画面へ。

［］ショートコードを呼び出し、コンテンツ枠の中に、先ほどのショートコードをペーストしてください。

ここで、プリセットをクリック。

ショートコードごとに名前を決めれるので、好きな名前を入力してOK をクリックしたら、

現在の設定をプリセットとして保存 してください。

これで、カスタマイズしたものが保存され、いつでも呼び出し可能になりました。

２：アイコンボタン（icon）のカスタマイズ方法

アイコンボタンのカスタマイズ手順は、スタイルと同様なので、

飛ばしたい方は飛ばしてください。

ダッシュボード ＞ ショートコード ＞ Available Shortcode ＞ アコーディオンをクリック

下にスクロールすると、iconの要素として使用できる13この候補が挙げられています。

これを、ショートコードエディタ部分のicon=””の中にコピペしてください。

カスタマイズしたショートコードが出来上がったら、全体をコピーして、投稿画面へ。

［］ショートコードを呼び出し、コンテンツ枠の中に、先ほどのショートコードをペーストしてください。

ここで、プリセットをクリック。

ショートコードごとに名前を決めれるので、好きな名前を入力してOK をクリックしたら、

現在の設定をプリセットとして保存 してください。

これで、カスタマイズしたものが保存され、いつでも呼び出し可能になりました。

アコーディオンの表示パターン（随時更新中）

style=”default”、icon=”plus”

style=”fancy”、icon=”plus”

style=”simple”、icon=”plus”