記事の詳細
便利で簡単!WordPressのプラグイン「Shortcodes Ultimate」で投稿記事や固定ページのコンテンツをより魅力的に装飾・表示する方法!
WordPressプラグインの回し者、網干です。
今回紹介するプラグインは非常に便利で、コンテンツの装飾・表示に関しては全てこれだけで済んでしまいそうなプラグインになっています!
具体的には、下記のようなコンテンツが一分もかけずに出来上がってしまいます!
- 動きのあるアコーディオン
- スタイリッシュなボタン
- コンテンツをまとめるボックス
- 動きのある文字
- レスポンシブなYoutube動画貼り付け
- 高機能なドキュメント表示
- スライダー形式・カルーセル形式で画像を表示
- 画像や動画をライトボックスで表示
- 投稿(カスタム投稿を含む)の一覧を表示
これでも抜粋した一部の機能になりますので、とんでもないプラグインです!
上記の抜粋した部分に関して、例を交えてご紹介致します。
今回のブログの見出しはコチラです!
「Shortcodes Ultimate」のインストール方法
プラグインの検索で「Shortcodes Ultimate」を入力します。
「Shortcodes Ultimate」のプラグインが表示されますので「今すぐインストール」をクリックします。
ボタンが「有効化」に変わりますので、ボタンをクリックしてプラグインを有効化します。
以上でインストールは完了です。
記事の投稿画面を表示した際に「ショートコードを挿入」のボタンが表示されていればプラグインは正常に機能しています。
では早速「Shortcodes Ultimate」を使ってコンテンツを素敵に装飾していきましょう!
動きのあるアコーディオンを表示する
「ショートコードを挿入」ボタンを押して下図メニューを表示します。
「アコーディオン」を選択して設定画面を表示します。
コンテンツに表示されている内容が記事への投稿内容になります。
まずは「プレビュー」を押してどのように表示されるか確認をします。
ちょっとスタイルが物足りない…、という場合は「使用例」をクリックします。
すると、プラグインに登録されている様々なスタイルのアコーディオンの例が表示されます。
良さそうな例を見つけたら、例の下部にある「コードを取得」ボタンを押します。
投稿画面に戻って、テキストエディタに先ほどのコピーした内容を貼り付けます。
これで、下記のようなアコーディオンが表示されるようになります!
スタイリッシュなボタンを設置する
「ショートコードを挿入」ボタンを押してメニューを表示します。
「ボタン」を選択して設定画面を表示します。
設定画面下部の「プレビュー」を押してボタンがどのように表示されるか確認をします。
ちょっとスタイルが物足りない…、という場合は設定画面上部の「使用例」をクリックします。
すると、プラグインに登録されている様々なスタイルのボタンの例が表示されます。
良さそうな例を見つけたら、例の下部にある「コードを取得」ボタンを押します。
投稿画面に戻って、テキストエディタに先ほどのコピーした内容を貼り付けます。
これで、下記のようなボタンが表示されるようになります!
Click me Click me Click me
Click me Click me Click me
コンテンツをボックスにまとめて表示する
「ショートコードを挿入」ボタンを押してメニューを表示します。
「ボックス」を選択して設定画面を表示します。
タイトル、スタイル、コンテンツの内容を設定してプレビューを表示します。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、下記のようなコンテンツの箱が表示されるようになります!
動きのある文字を表示する
「ショートコードを挿入」ボタンを押してメニューを表示します。
「アニメーション」を選択して設定画面を表示します。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、下記のような動きのある文字が表示されるようになります!
レスポンシブに対応したYoutube動画を表示する
「ショートコードを挿入」ボタンを押してメニューを表示します。
「YouTube」を選択して設定画面を表示します。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、下記のようなYouTube動画が表示されるようになります!
高機能なドキュメント表示
「ショートコードを挿入」ボタンを押してメニューを表示します。
「文書」を選択して設定画面を表示します。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、下記のようなドキュメントが表示されるようになります!
スライダー形式・カルーセル形式で画像を表示
「ショートコードを挿入」ボタンを押してメニューを表示します。
「スライダー」を選択して設定画面を表示します。
※スライダーもカルーセルも入力方法は同じなので、ここではスライダーのみを表示します。
ソースを「メディアライブラリー」に設定して画像を追加します。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、下記のような画像スライダーが表示されるようになります!
画像や動画をライトボックスで表示
「ショートコードを挿入」ボタンを押してメニューを表示します。
「Lightbox」を選択して設定画面を表示します。
コンテンツタイプをIframeに変更してコンテンツソースにURLを入力します。
※画像の場合はコンテンツタイプを画像に設定してコンテンツソースにURLを入力します。
「プレビュー」を押して表示内容を確認します。
※プレビューのボタンを押しても動画は再生されません。
そのため、確認はWordPressのプレビューボタンから行ってください。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、ボタンを押した際にライトボックス形式で動画が表示されるようになります!
ここをクリックして動画を再生
投稿(カスタム投稿を含む)の一覧を表示
「ショートコードを挿入」ボタンを押してメニューを表示します。
「投稿」を選択して設定画面を表示します。
「ページあたりの投稿数」「投稿タイプ」「タクソノミー」「条件」を指定します。
※ほかにも「投稿者」「順序」等も指定できますが、ここでは上記の指定だけ行います。
「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。
これで、記事一覧が表示されるようになります!
※2017年2月6日加筆
本記事に記事一覧を載せるとSNSアイコン表示プラグインが競合してしまうため、記事一覧は非表示にしました。
プラグインの紹介は以上になります。
プラグインを入れるだけで記事の装飾や表示に関することは大体できてしまいます!
いかがでしたか?
「細かい条件を指定して何かを表示させたい!」となる場合を除けば、大抵のことは「Shortcodes Ultimate」でできてしまいそうですね。
便利すぎるプラグインなので、個人的にも大きな発見となりました。
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。