WordPressで本文中のコンテンツの表示・非表示を切り替える方法
今回の記事の難易度★★★☆☆【中級者向け】
■今回の記事はこんな人のために書いています
⇒WordPressの本文中の一部のコンテンツを隠したり見せたりっていうのを切り替えたい人
■今回の記事を読むと以下のことが分かります
⇒WordPressで本文中のコンテンツの表示・非表示を切り替えることができる
今回目指すのはこういう感じのこと。
↓↓ クリックしてみてください。
・・・み・・・た・・・な・・・！？
こんな感じで、一部のコンテンツを隠しておいて、見たい人だけに見てもらえるような仕組みを作ります。
これをするのはそんなに難しくないので、ぜひ挑戦してみたい人は以下の解説を参考にしてみてください！
大まかな手順
手順１．WordPressプラグイン「Shortcodes Ultimate」をインストール＆有効化
手順２．専用のショートコードを本文に入力
これだけ！では、具体的な方法をやっていきますね。
【作業編】WordPressの本文中の一部コンテンツの表示・非表示を切り替える方法
では早速やっていきましょう！
手順１．おすすめプラグイン『Shortcodes Ultimate』を入れる
プラグイン⇒新規追加で「Shortcodes Ultimate」を検索して、インストールして有効化までしましょう。
こんなアイコンのやつです。↓↓
手順２．Shortcodes Ultimateのショートコードを使う
とても簡単！以下のショートコードを使うだけ。
↓ これを本文にコピペしてみてくださ。
[su_spoiler title="もっと読んでみる" icon="plus-square-1"] ここに隠したいコンテンツ [/su_spoiler]
↓ すると、こうなります。
補足）Shortcodes Ultimateの機能を使うと色々カスタマイズできる！
↓ 簡単に手順を動画にしています。
ショートコードブロックを追加
↓
Shortcodes Ultimateのメニューを起動
↓
スポイラーを選択
↓
・タイトル：最初から表示しておきたい文字
・スタイル：３種類から選ぶ
・アイコン：13種類から選ぶ
・コンテンツ：隠しておくコンテンツ
※他のメニューは無視してOK
↓
「ショートコードを挿入」
これだけです。
どんな時に使うの？
色々なケースに使えます。
シーン１）長いお客様の声の一部を隠す
いやー本当に「カレー屋田中」のところのカレーライスは美味しかった。
どこが美味しいの？って言われると答えるのが難しいんですが、強いて言うなら
ジュンイチ
↑ こんな感じでちょっと長くなりがちなお客様の声を、サクッと見せることができ、気になる人だけにじっくり読んでもらう、ってこともできますよね。
シーン２）Q&Aコーナーに使う
↓ ちょっとだけCSSいじってカスタマイズしていますが、こんな事もできます。
【応用編】テーブル（表）の中でも使える！
↓ 一つだけ美味しそうなトンカツカレーが隠れています。探してみて下さい。
これはレンガですか？
はい。これはレンガです。
 | これはレンガですか？
はい。これはレンガです。
|
これはレンガですか？
はい。これはレンガです。
| これはレンガですか？
はい。これはレンガです。
|
これはレンガですか？
はい。これはレンガです。
| これはレンガですか？
いいえ。これはトンカツです。
 |
これはレンガですか？
はい。これはレンガです。
| これはレンガですか？
はい。これはレンガです。
|
これはレンガですか？
はい。これはレンガです。
| これはレンガですか？
はい。これはレンガです。
|
こんな感じのことも出来ます。
まとめ
はい！というわけで、「WordPressの本文中のコンテンツの一部の表示・非表示を切り替える方法」をお伝えしました。
Shortcodes Ultimateのスポイラー機能、とても優秀なのでぜひお試しあれあれ！
予め隠しておきたい部分がある方は、ぜひこの方法をお試し下さい。
デジタルマーケティングで重要な
「データ分析」を今すぐ始めよう！
＼ Kindleで売れ筋トップ獲得本 ／
GA4超入門ガイドブック
プレゼント！
