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

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

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

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

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

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

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

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

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

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

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

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

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

ちょっとスタイルが物足りない…、という場合は「使用例」をクリックします。

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

コードが表示されるので必要な部分だけコピペします。

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

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

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

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

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

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

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

コードが表示されるので必要な部分だけコピペします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動画のURLを設定します。

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

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

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

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

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

文書のURLを設定します。

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

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

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

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

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

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

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

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

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

Mattya_image

Curry_image

Milk Seafood_image

Noodle_image

Chease curry_mage

seafood_image

Chili Tomato_image

Sio_image

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

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

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

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

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

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

投稿（カスタム投稿を含む）の一覧を表示

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

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

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

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

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

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

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

いかがでしたか？

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

ではまた！

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

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

WordPressのプラグインを眺めるのが楽しいです、網干です。

WordPressのプラグインは優秀なモノが多いので、何かを実装する前にまずはプラグインを検索するのがクセになっています。
細かいギミックはプログラムを組む必要がありますが、大きな仕掛けはプラグインでなんとかなったりすることが多いですね。

さて、今回はそんな便利プラグインの一つ「Smart Slider 3」を使って簡単にコンテンツスライダーを作る方法を記載します。
なんと、このコンテンツスライダーは標準でレスポンシブ対応していますので、別途CSSの設定をする必要がない素晴らしいプラグインなのです！

参考記事は下記になります。
Smart Slider 3 – 高機能で使いやすいコンテンツスライダーのWordPressプラグイン

「Smart Slider 3」のインストール方法

WordPressのプラグイン検索で「Smart Slider 3」と検索してプラグインを探します。
プラグインが見つかったら「今すぐインストール」を押してインストールを行います。

インストールが終わったらボタンが「有効化」に変わるので、ボタンを押してプラグインを有効化します。

プラグインが有効になると、WordPressのメニューに「Smart Slider」が追加されます。

以上で「Smart Slider 3」のインストールは完了になります。

コンテンツスライダーの設定方法

プラグインをインストールするとサンプルもついてきますので、そこからいじるのが一番早いのですが…。
こういった機能はいじらないと身につかないので、新規作成からコンテンツスライダーを作っていきましょう！

WordPressのメニューの「Smart Slider」をクリックするとダッシュボードが表示されます。
左側のアイコンの「NEW SLIDER」をクリックします。

今回は画面の下部にサムネイルのついたスライダーを作ります。
そのため、新規作成時のスライダーの選択画面でサムネイル付きのスライダーを選択します。

スライダーを作成すると下図のような画面が表示されます。
画像を一つ以上登録しないとスライダーの設定ができないので、とりあえず「Slide #1」をクリックして画像を設定します。

画像を設定したら右上に下図のようなウインドウが表示されるので「GOT IT!」をクリックします。
※このウインドウは設定の成功/失敗等のメッセージが表示される箇所になりますので、基本的には「GOT IT!」を押して大丈夫です。

次に、スライダーの設定をしていきます。

メニューの「GENERAL」をクリックしてスライダーの概要を設定します。
ここでは「Name」の欄にスライダーの名前を入力します。

次に「AUTOPLAY」の項目でスライダーの自動スライドの設定を行います。
ここでは自動スライドの間隔を二秒に設定します。

次に「ARROWS」の項目でスライダーの左右に表示される矢印マークのボタンを設定します。
今回は下図のような矢印を設定します。

矢印マークを強調するために、背景に色を設定することもできます。
ここでは透明度のあるグレーを選択します。

次に「TEXT BAR」の項目で画像のタイトルと概要が表示されるように設定します。

タイトルと概要の区切りの仕様を「Separator」の項目にて設定します。
今回はタイトルと概要の区切りを改行にします。

上記の設定が全て完了したら、ウインドウ右上の「SAVE」ボタンで保存を行います。

以上で、スライダーの設定は完了になります。

スライダーに表示する画像の設定

次に、スライダーに表示する画像を設定します。
現状で設定されている画像にマウスカーソルを合わせると「EDIT」という文字が表示されます。
画像をクリックすることで画像の設定画面が表示されます。

はじめに「Settings」ボタンを押して画像の設定画面を開きます。

「Name」に画像のタイトル、「Description」に画像の説明を入力します。
※ここで設定したタイトルと説明がスライダーの下部に表示されます。

画像のタイトルと説明を入力したら、SAVEボタンを押して設定を保存します。

次の画像を設定するために「SLIDES」ボタンを押して画像の一覧画面に戻ります。
※画像のタイトルや説明を変更しても、表示が更新されないことに注意してください。
　保存が実行されていれば問題ないのでそのまま作業を進めてください。

「NEW SLIDE」を押して新しいスライドを作成するのも良いのですが、ここでは初めに設定した画像の複製を作ります。
画像右上の「…」をクリックしてメニューを表示させて「Duplicate」を押します。

画像が複製されますので、複製した画像をクリックして画像の設定を行います。

複製した画像を変更するために「Background」ボタンを押して画像を変更します。
「Background」の「image」の項目を押して、一枚目とは別の画像を選択します。
※画像を設定しても表示が更新されないことに注意してください。

次に「Settings」ボタンを押して、画像のタイトル、説明、サムネイル画像を設定します。
※サムネイル画像は「Background」で設定した画像を設定してOKです

設定が終わったら「SAVE」ボタンを押して設定を完了します。

設定が正しいか確認をするために、WordPressのメニューの「Smart Slider」を押して、先ほどまで編集していたスライダーを選択して設定の再読み込みを行います。

設定中は画像イメージが変わりませんでしたが、再読み込みをすることで設定した画像が正常に表示されます。

画像が二枚では寂しいので、同じ設定の画像を複数作成します。

画像を複数作成したら、画面左上の「PREVIEW」ボタンを押してスライダーの確認を行います。

ディスプレイで見た場合は下図になります。

上のアイコンを変更することで、ipadのような画面で見た場合やスマホで見た場合のプレビューも表示されます。

以上で、画像の設定は完了になります。

ショートコードを使って投稿記事にコンテンツスライダーを表示する

設定が全て完了したら、スライダー設定画面の「PUBLISH」の項目でショートコードを確認します。

投稿画面でショートコードを入力します。

記事を投稿すると「Smart Slider」のプレビュー画面でみたようなコンテンツスライダーが表示されます。

もちろん、レスポンシブに対応していますので画面を小さくしてもスライダーは正常に表示されます。

今回は以上になります

プラグインをうまく使って魅力あるコンテンツを短時間で作りましょう！

いかがでしたか？

コンテンツスライダーのような大掛かりなギミックは、一から組もうとすると非常に多くの時間を割くことになってしまいます。
こういった部分をプラグインで時間短縮できれば、別の場所に力を注ぎ込むことでより素晴らしいWebサイトを作成することができます。

WordPressを使用したWebサイト制作を行う際は、まずはプラグインを探す事から始めるといろいろと捗りそうですね。

ではまた！

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

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