【WordPress】本文内へ後から変更・追記できる開閉式コンテンツを作る方法
公開日：
使い方など
過去に書いたかも・・と思いつつ。このサイトでも行っている方法を紹介します。
このサイトはWordpressの使い方やプラグインなどの紹介記事が多いことから、より内容が分かりやすくなるよう、その場で表示できる開閉式の説明を書く所に入れるようにしています。これにより、
詳細な説明や用語に関する解説が不要な方には本題だけを伝えることができる
ことを目指してコンテンツ作りをしています（しているつもりです）。
ジャンルは違ってもそうしたものを目指したサイトを作りたい！と思われる方も多いのでは？？
どのジャンルでも何かを紹介する類の記事では読む人によって理解度が違うので、
- 初心者にも分かりやすく！を目指すとどんどんページが長くなる
- できるだけページを簡潔にしようとすると、別ページで詳細説明をしようとすると無駄に別ページのリンクが増えてしまう（特にモバイル環境では使いにくくなる）
という相反する課題に直面します。
誰にでも分かるようにかみ砕いた記事を書くと、説明書きが長くなり、本文に占める割合が上がってしまいます。読む人が初心者なら「このサイト分かりやすい！」と思うかも知れませんが、中級者以上になると「そんなこと分かってるよ！」という内容が多い印象になるので有用な記事でもスルーされてしまう可能性がありますから、なかなか難しいところです。
また、説明書きは比較的そのサイトで同じ内容を頻繁に使うことが多いので、都度コピーして使うのも面倒です。
でもやっぱりどちらにも対応したページを作りたい！！それを実現するには・・・
- 複数のページへ入れる決められた同じ説明や文章を簡単に管理・編集できるようにする
- 説明が長くなっても見やすくなるようにアコーディオン表示（開閉表示）させる
- アコーディオン表示は通常閉じられていて、クリックしたときだけ表示されるようにする
というファクターが必要になってきます。
今回はプラグインをいつくか使ってWordpressで本文内へ簡単に後から変更・追記でき、必要な人がクリックして見ることができる開閉式のコンテンツを作る方法を紹介します。
当サイトでも使っていますので例を挙げておきます。このアコーディオン表示はサイト内でPHPなどのコードを紹介する際、コード表示の下に追加している注意事項です。 この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。 コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。 万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります その場合には以下の方法で修正を行ってみてください ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
【注意】コードをコピーして使用する前に必ずお読みください
使用については自己責任でお願いします
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
これらのエラー対処については以下のページが参考になるかも知れません
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
ね！上の要件を満たしたいい表示方法だと思いませんか？？結構長い説明なのですが、閉じた状態では見出しの１行にすることができます。プラグインさえ用意すればそれほど難しくないのでチャレンジしましょう！
使用するプラグイン
上の条件を満たすプラグインを追加します。もちろんどれも今回の表示だけでなく、いろいろな場面で役に立つプラグインばかりです。
Shortcode Ultimate
今回のアコーディオン表示だけでなく、地図の埋め込み、動画の埋め込み、表、ログインユーザーだけが見えるコンテンツなど本当にいろいろな表示・表現がこれ１つでできる魔法のようなプラグインです。
Shortcoder
投稿や固定ページとは別の場所へ作ったコンテンツをショートコードで挿入できるようにするプラグインです。
このプラグイン上で作ったコンテンツを修正することで同じショートコードを挿入したすべての記事の内容を一度に変更することができます。
また、作成したショートコードを動作させないようにすることもできますので、同じショートコードが挿入されている複数の記事から使用しなくなった共通コンテンツの表示を即座に停止することができます。停止したショートコードは簡単に復活（再表示）させることができるのも魅力だと思います。
プラグイン検索で「Shortcoder」と入れればすぐに見つかります
使うのはたった２つのプラグインです。どちらも使い勝手の良いおすすめのプラグインです。
本文内へ後から変更・追記できる開閉式コンテンツの作りかた
先ほどサンプルとして表示した、コードコピーの注意事項 この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。 コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。 万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります その場合には以下の方法で修正を行ってみてください ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
【注意】コードをコピーして使用する前に必ずお読みください
使用については自己責任でお願いします
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
これらのエラー対処については以下のページが参考になるかも知れません
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
を例に説明していきます。
基本的には「Shortcoder」で作るコンテンツの中で「Shortcode Ultimate」の機能を使うだけです。
両方のプラグインをインストール＆有効化したら、管理画面から設定→Shortcoderをクリックします。
↑のような画面が出てきますので、「Create a new Shortcode」をクリックします。
↑のような画面が出てきますので、Name欄へ「code-copy-error」と入れ、以下の内容をそのままコピーしてください。
[su_spoiler title="【注意】コードをコピーして使用する前に必ずお読みください" icon="arrow"]
<p>この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。</p>
<h3>使用については自己責任でお願いします</h3>
<p>コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。</p>
<p>万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません</p>
<h3>コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります</h3>
<p>コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります</p>
<p>その場合には以下の方法で修正を行ってみてください</p>
<ol>
<li>コードの中に全角の記号が入っていませんか？</li>
半角にすることで解消できます
<li>コードの中に全角の空白（スペース）がありませんか？</li>
半角にすることで解決できます
<li>上のようなことがないのに更新できない</li>
特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。</ol>
<h3>コードを転載する場合には</h3>
<p>ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします</p>
[/su_spoiler]コピーしたら保存してください。これでコンテンツの作成は完了です。
※[su_spoiler title="【注意】コードをコピーして使用する前に必ずお読みください" icon="arrow"]～[/su_spoiler]というのが「Shortcode Ultimate」のアコーディオン表示機能です（Shortcode Ultimateのコンテンツ作成方法は↑のプラグイン紹介欄にある表示例のリンクからご覧ください）
あとは投稿編集画面でこのコンテンツを入れたいところで本文の上にあるShortcoderというボタンをクリックして先ほど作った名前のショートコード右のQuick Insertをクリックするだけです。
「Shortcoder」で作るコンテンツ、「Shortcode Ultimate」の内容に含める文章などはWordpress標準のエディタのように自動整形機能がありませんから、きちんとhtmlタグを使わないと改行などが機能しませんから注意が必要です。
また「Shortcoder」の「Name」欄はそのままショートコードの名前に使われるため、日本語などのマルチバイト文字は使用できませんから半角英数字で分かりやすいものにしてください
以上で この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。 コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。 万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります その場合には以下の方法で修正を行ってみてください ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
【注意】コードをコピーして使用する前に必ずお読みください
使用については自己責任でお願いします
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
これらのエラー対処については以下のページが参考になるかも知れません
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
と同じものが出来上がりました。あとはいくつかショートコードコンテンツをご自身で作ってみれば機能は理解いただけると思います。
このページはモバイル端末でもご覧いただけます
左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。
いつでもご相談・サイトカスタマイズの依頼を受け付けています
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちら
から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。
【スポンサーリンク】
閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします
