記事の詳細

WordPressプラグインの回し者、網干です。

今回紹介するプラグインは非常に便利で、コンテンツの装飾・表示に関しては全てこれだけで済んでしまいそうなプラグインになっています!
具体的には、下記のようなコンテンツが一分もかけずに出来上がってしまいます!

  • 動きのあるアコーディオン
  • スタイリッシュなボタン
  • コンテンツをまとめるボックス
  • 動きのある文字
  • レスポンシブなYoutube動画貼り付け
  • 高機能なドキュメント表示
  • スライダー形式・カルーセル形式で画像を表示
  • 画像や動画をライトボックスで表示
  • 投稿(カスタム投稿を含む)の一覧を表示

これでも抜粋した一部の機能になりますので、とんでもないプラグインです!
上記の抜粋した部分に関して、例を交えてご紹介致します。

「Shortcodes Ultimate」のインストール方法

プラグインの検索で「Shortcodes Ultimate」を入力します。
「Shortcodes Ultimate」のプラグインが表示されますので「今すぐインストール」をクリックします。
01_プラグイン検索

ボタンが「有効化」に変わりますので、ボタンをクリックしてプラグインを有効化します。
02_プラグイン有効化

以上でインストールは完了です。

記事の投稿画面を表示した際に「ショートコードを挿入」のボタンが表示されていればプラグインは正常に機能しています。
03_投稿記事編集画面の確認

では早速「Shortcodes Ultimate」を使ってコンテンツを素敵に装飾していきましょう!

動きのあるアコーディオンを表示する

「ショートコードを挿入」ボタンを押して下図メニューを表示します。
「アコーディオン」を選択して設定画面を表示します。
05_アコーディオン選択

コンテンツに表示されている内容が記事への投稿内容になります。
まずは「プレビュー」を押してどのように表示されるか確認をします。
06_アコーディオン_プレビュー表示

ちょっとスタイルが物足りない…、という場合は「使用例」をクリックします。
07_アコーディオン_使用例

すると、プラグインに登録されている様々なスタイルのアコーディオンの例が表示されます。
良さそうな例を見つけたら、例の下部にある「コードを取得」ボタンを押します。
08_アコーディオン_コード取得

コードが表示されるので必要な部分だけコピペします。
09_アコーディオン_コード表示

投稿画面に戻って、テキストエディタに先ほどのコピーした内容を貼り付けます。
10_アコーディオン_コード貼り付け

これで、下記のようなアコーディオンが表示されるようになります!

Spoiler title
Spoiler content

スタイリッシュなボタンを設置する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「ボタン」を選択して設定画面を表示します。
11_ボタン選択

設定画面下部の「プレビュー」を押してボタンがどのように表示されるか確認をします。
12_ボタン選択_プレビュー表示

ちょっとスタイルが物足りない…、という場合は設定画面上部の「使用例」をクリックします。
13_ボタン選択_使用例

すると、プラグインに登録されている様々なスタイルのボタンの例が表示されます。
良さそうな例を見つけたら、例の下部にある「コードを取得」ボタンを押します。
14_ボタン選択_コード取得

コードが表示されるので必要な部分だけコピペします。
15_ボタン選択_コード取得

投稿画面に戻って、テキストエディタに先ほどのコピーした内容を貼り付けます。
16_ボタン選択_コード挿入

これで、下記のようなボタンが表示されるようになります!
Click me Click me Click me Click me Click me Click me

コンテンツをボックスにまとめて表示する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「ボックス」を選択して設定画面を表示します。
17_コンテンツボックス選択

タイトル、スタイル、コンテンツの内容を設定してプレビューを表示します。
18_コンテンツボックス_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
19_コンテンツボックス_コード挿入

これで、下記のようなコンテンツの箱が表示されるようになります!

ボックスの見本
スタイルをガラスに変更して表示!

動きのある文字を表示する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「アニメーション」を選択して設定画面を表示します。
20_アニメーション選択

アニメーションを設定してプレビューを表示します。
21_アニメーション_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
22_アニメーション_コード挿入

これで、下記のような動きのある文字が表示されるようになります!

レスポンシブに対応したYoutube動画を表示する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「YouTube」を選択して設定画面を表示します。
23_youtube選択

動画のURLを設定します。
24_youtube選択

「プレビュー」を押して動画を確認します。
25_youtube_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
26_youtube_コード挿入

これで、下記のようなYouTube動画が表示されるようになります!

高機能なドキュメント表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「文書」を選択して設定画面を表示します。
27_文書選択

文書のURLを設定します。
28_文書_URL入力

「プレビュー」を押して動画を確認します。
29_文書_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
30_文書_コード挿入

これで、下記のようなドキュメントが表示されるようになります!

スライダー形式・カルーセル形式で画像を表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「スライダー」を選択して設定画面を表示します。
※スライダーもカルーセルも入力方法は同じなので、ここではスライダーのみを表示します。
31_スライダー設定

ソースを「メディアライブラリー」に設定して画像を追加します。
32_スライダー_画像追加

「プレビュー」を押して画像スライダーを確認します。
33_スライダー_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
34_スライダー_コード挿入

これで、下記のような画像スライダーが表示されるようになります!

出典:日清カップヌードル|CUPNOODLE

画像や動画をライトボックスで表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「Lightbox」を選択して設定画面を表示します。
35_ライトボックス選択

コンテンツタイプをIframeに変更してコンテンツソースにURLを入力します。
※画像の場合はコンテンツタイプを画像に設定してコンテンツソースにURLを入力します。
36_ライトボックス_URL入力

「プレビュー」を押して表示内容を確認します。
※プレビューのボタンを押しても動画は再生されません。
 そのため、確認はWordPressのプレビューボタンから行ってください。
37_ライトボックス_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
38_ライトボックス_コード挿入

これで、ボタンを押した際にライトボックス形式で動画が表示されるようになります!
ここをクリックして動画を再生

投稿(カスタム投稿を含む)の一覧を表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「投稿」を選択して設定画面を表示します。
39_投稿選択

「ページあたりの投稿数」「投稿タイプ」「タクソノミー」「条件」を指定します。
※ほかにも「投稿者」「順序」等も指定できますが、ここでは上記の指定だけ行います。
40_投稿_設定

「プレビュー」を押して表示内容を確認します。
41_投稿_プレビュー

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
42_投稿_コード挿入

これで、記事一覧が表示されるようになります!
2017年2月6日加筆
 本記事に記事一覧を載せるとSNSアイコン表示プラグインが競合してしまうため、記事一覧は非表示にしました。

プラグインの紹介は以上になります。

プラグインを入れるだけで記事の装飾や表示に関することは大体できてしまいます!

いかがでしたか?

「細かい条件を指定して何かを表示させたい!」となる場合を除けば、大抵のことは「Shortcodes Ultimate」でできてしまいそうですね。
便利すぎるプラグインなので、個人的にも大きな発見となりました。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る