デジタルマーケティング専門家/デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

WordPressで本文中のコンテンツの表示・非表示を切り替える方法

 
コンテンツの一部を表示非表示切り替え
この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

今回の記事の難易度★★★☆☆【中級者向け】
■今回の記事はこんな人のために書いています
⇒WordPressの本文中の一部のコンテンツを隠したり見せたりっていうのを切り替えたい人

今回の記事を読むと以下のことが分かります
⇒WordPressで本文中のコンテンツの表示・非表示を切り替えることができる

今回目指すのはこういう感じのこと。

↓↓ クリックしてみてください。

もっと読んでみる

・・・み・・・た・・・な・・・!?

こんな感じで、一部のコンテンツを隠しておいて、見たい人だけに見てもらえるような仕組みを作ります。

これをするのはそんなに難しくないので、ぜひ挑戦してみたい人は以下の解説を参考にしてみてください!

大まかな手順

手順1.WordPressプラグイン「Shortcodes Ultimate」をインストール&有効化

手順2.専用のショートコードを本文に入力

これだけ!では、具体的な方法をやっていきますね。

【作業編】WordPressの本文中の一部コンテンツの表示・非表示を切り替える方法

では早速やっていきましょう!

手順1.おすすめプラグイン『Shortcodes Ultimate』を入れる

プラグイン⇒新規追加で「Shortcodes Ultimate」を検索して、インストールして有効化までしましょう。

こんなアイコンのやつです。↓↓

Shortcodes Ultimate

手順2.Shortcodes Ultimateのショートコードを使う

とても簡単!以下のショートコードを使うだけ。

↓ これを本文にコピペしてみてくださ。

[su_spoiler title="もっと読んでみる" icon="plus-square-1"]
ここに隠したいコンテンツ
[/su_spoiler]

↓ すると、こうなります。

もっと読んでみる

ここに隠したいコンテンツ

補足)Shortcodes Ultimateの機能を使うと色々カスタマイズできる!

↓ 簡単に手順を動画にしています。

ショートコードブロックを追加

Shortcodes Ultimateのメニューを起動

スポイラーを選択

・タイトル:最初から表示しておきたい文字
・スタイル:3種類から選ぶ
・アイコン:13種類から選ぶ
・コンテンツ:隠しておくコンテンツ
※他のメニューは無視してOK

「ショートコードを挿入」

これだけです。

どんな時に使うの?

色々なケースに使えます。

シーン1)長いお客様の声の一部を隠す

いやー本当に「カレー屋田中」のところのカレーライスは美味しかった。
どこが美味しいの?って言われると答えるのが難しいんですが、強いて言うなら

続きも読む

カレーライスの上に乗っているカツがうまいんですよね。カレーの味は普通なのに、カレーの上に乗っているトンカツの厚みが10cmくらいあるんですよね。初めは、あれ?レンガが乗ってるんちゃうか?って思って店長の田中人志さんに聞いてみたら、「てやんでい!レンガなんかじゃねぇよ!」って怒られてしまったんですけどね。
それくらいこのレンガのボリュームが凄くて美味しくて、僕は一体何を食べてるんだろうか?と思いながら、カレーを食べるんです。そういうお店です。

ジュンイチ

↑ こんな感じでちょっと長くなりがちなお客様の声を、サクッと見せることができ、気になる人だけにじっくり読んでもらう、ってこともできますよね。

シーン2)Q&Aコーナーに使う

↓ ちょっとだけCSSいじってカスタマイズしていますが、こんな事もできます。

Q:カレーの上に載っているこの分厚い物体はなんですか?レンガですか?
A:トンカツだって言ってるだろ!!こんにゃろう!!!
Q:レンガが大きすぎて、カレーが最後まで食べれません。どうしたらいいですか?
A:レンガじゃねえ!!!トンカツだって言ってるだろ!!こんにゃろう!!!
Q:カレーの味は普通ですね。
A:めちゃくちゃ美味いわ!!こんにゃろめ!!!

【応用編】テーブル(表)の中でも使える!

↓ 一つだけ美味しそうなトンカツカレーが隠れています。探してみて下さい。

これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
いいえ。これはトンカツです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。
これはレンガですか?
はい。これはレンガです。

こんな感じのことも出来ます。

まとめ

はい!というわけで、「WordPressの本文中のコンテンツの一部の表示・非表示を切り替える方法」をお伝えしました。

Shortcodes Ultimateのスポイラー機能、とても優秀なのでぜひお試しあれあれ!

予め隠しておきたい部分がある方は、ぜひこの方法をお試し下さい。

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

【今すぐ読める無料Ebook】
広告費を一切使わずブログだけで
19,000人以上を集客した全手法!

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

Ebook

この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら