WordPressの使い方とSNSに依存しない個人のWeb戦略について発信しています

  1. ワードプレス プラグイン

WordPressで開閉クリックできるプラグインShortcodes Ultimate

クリックすると開いたり閉じたりするの、ありますよね。

こちらをクリック
隠れているコンテンツが見えます。

スポイラーと言うらしいです。

このスポイラーを使用するために、Shortcodes Ultimateというプラグインを使っていきます。この記事では操作方法と使用例を初心者向けにご紹介します。

難しい設定がないプラグインなので、すぐに使えると思います。

Shortcodes Ultimateのインストール&有効化

まずはインストールしていきます。

ダッシュボード>プラグイン>新規追加>キーワード「Shortcodes Ultimate」を入力>「今すぐインストール」をクリック

Shortcodes Ultimate

 

「有効化」をクリック

Shortcodes Ultimate

自動的にプラグイン一覧のページに切り替わると思います。

もうこれで使えます。早いですね!

Shortcodes Ultimateを実際に使用する

せっかくなので試しに使ってみましょう。

投稿から「新規追加」クリックして、新規のページを開いてください。(試し入力用です)

新しいボタンが追加されていると思います。

「[]ショートコードを挿入」をクリック

Shortcodes Ultimate

「スポイラー」をクリック

Shortcodes Ultimate

「タイトル」を入力(クリックするところに表示されるテキスト)

Shortcodes Ultimate

Shortcodes Ultimate

「スタイル」と「アイコン」をプルダウンから選ぶ

Shortcodes Ultimate
※初期設定のまま進めます

Shortcodes Ultimate

 

「内容」にはクリック後に表示させたいテキストを入力>「ショートコードを挿入」をクリック

コードを挿入後も入力可能なので、このままショートコードを挿入してもOKです。

Shortcodes Ultimate

自動的に編集画面に切り替わり、下の図のようなコードが挿入されていると思います。

Shortcodes Ultimate

「非表示のコンテンツ」はクリック後に表示させたいテキストを自由に入力できます。

ちなみに、「非表示のコンテンツ」のままだとこうなります↓↓

こちらをクリック
非表示のコンテンツ

Shortcodes Ultimateの使用例

勉強会を開催している別サイトで、どうしてもページの上下の長さが長くなってしまうのでどうにかコンパクトにしたい、プラグインでできるのかな?と思ったら一瞬で見つかりました。

いろいろな使い方ができると思いますが、いくつか例を挙げてみたいと思います。

1.目次をコンパクトに表示したい

目次はこちら
  • 目次 1
  • 目次 2
  • 目次 3
  • 目次 4
  • 目次 5

スポイラー
スタイル:デフォルト
アイコン:プラス

2.Q&Aをスッキリ表示したい

このプラグインは使いやすいですか?
はい、使いやすいです。

スポイラー
スタイル:デフォルト
アイコン:カーソル

3.複数のQ&Aを並べて表示したい

複数のQ&Aを並べるなら、Shortcodes Ultimate(このプラグイン)の「アコーディオン」を活用する方法もあります。

おすすめのワードプレスの無料テーマはどれですか?
こちらのページにまとめています。
ワードプレスを使ってクレジット決済システムを導入できますか?
できます。stripeが使いやすいと思います。
画像に枠線を付けたいのですが、簡単にできる方法はありますか?
あります。プラグイン不要で追加CSSの入力で対応できます。

アコーディオン
(その他特別な選択・設定はなし)

4.説明をコンパクトに表示したい

詳しくはこちらをお読みください。
このプラグインは多機能です。

「スポイラー」や「アコーディオン」だけでなく、「見出し」や「ボックス」などブログ記事で活用できそうな機能がたくさんあるので、別の記事で紹介していきたいと思っています。

スポイラー
スタイル:デフォルト
アイコン:矢印

5.枠付きで内容をスッキリ表示したい

Webサイトの立ち上げに必要なものは何ですか?

次の3つが必要です。

  • ドメイン
  • レンタルサーバー
  • ワードプレステーマ

スポイラー
スタイル:ファンシー
アイコン:シェブロン

例は以上です。

スタイルは3つあり、アイコンは13個あるのでサイトに合わせて使い分けられそうです。

 

このサイトでは、こちらの記事で実際にスポイラーを使用しています。

ワードプレス プラグインの最近記事

  1. WordPressで開閉クリックできるプラグインShortcodes Ultimate

  2. クレジット決済導入を迷っている人へ

  3. stripe(ストライプ)決済の返金方法と注意点

  4. WordPressで予約管理できる無料プラグインAmelia

  5. stripeでクレジット決済のテストをする方法

スポンサーリンク


スポンサーリンク


PAGE TOP