WordPressの記事にちょっと凝ったデザインのパーツを入れようとすると、スタイルシートを設定したり画像を作ったりと、案外手間が掛かることがあります。そんなときに、簡単に様々なパーツを埋め込めるのが、今回紹介するプラグインの「WP Canvas – Shortcodes」です。

このプラグインひとつで記事内に追加出来る項目は以下の通り。

  • アコーディオン
  • タブ
  • トグル
  • カラムとセクション
  • お客様の声
  • ボーダー
  • ボタン
  • Full Width
  • 通知
  • Googleマップ
  • ソーシャルアイコン
  • プログレスバー
  • 価格表
  • フラグ付きの画像
  • ハイライト
  • カウントダウン
  • RSVP
  • カスタムHTML
  • コードスニペット
  • 任意の投稿の表示
  • 様々な種類のアイコン

プラグインのインストール

下記のURLからプラグインをダウンロードして、wp-content/pluginsディレクトリにインストール。その後、管理画面から有効化してください。

WP Canvas – Shortcodes

プラグインの有効化

プラグインを有効化したら、特に設定の必要は無くすぐに使用することができます。

まず新規投稿を選び、ビジュアルエディタに切り替えましょう。プルダウンできる項目がふたつ増えていることがわかると思います。
01.fw

いずれのコンテンツを挿入する場合も、基本的な使い方は同じです。「[]」をプルダウンしてコンテンツの種類を選択するだけ。

02.fw

サンプルが挿入されるので、それを編集するだけでOKです。

03.fw

こちらは、2カラムのコードを挿入したものです。

04.fw

左側の「Font Icons」をプルダウンして選んでいくことで、アイコンを挿入することができます。

05.fw

こういう感じでポイントで利用出来そうなアイコンを挿入できます。

06.fw

プラグインのサンプル(抜粋)

ここからは、一部サンプルをご紹介します。

■ボタンの挿入

Elements>Buttonで挿入。リンクボタンなどを挿入したいときなどに利用できそうです。

07_button.fw

■Googleマップの挿入

Elements>Google Mapで挿入。locationを変更することで、目的の場所を表示できます。

08_google_map.fw

■価格表の挿入

Elements>Pricing Tableで挿入。こちらはカラムを挿入したあと、それぞれに価格表を設定したものです。

09_Pricing.fw

■プログレスバー

Elements>Skillbarで挿入。アンケート結果の表示などに最適です。

10_skillbar.fw

■ソーシャルアイコン

Elements>Social Iconで挿入。

11_social.fw

■お客様の声

Elements>Testimonialで挿入。ユーザーの声などを表現したいときに使えそうです。

12_testimonial.fw

■カウントダウン

Elements>Countdownで挿入。設定した日付までのカウントダウンを表示できます。

13_countdown.fw

■アコーディオンメニュー

jQuery>Accodionで挿入。アコーディオンメニューを記事内に設置できます。

14_accodion.fw

■タブ

jQuery>Tabsで挿入。タブメニューを記事内に設置できます。

15_tab.fw

それぞれの項目の細かい設定方法や例は、以下のサイトでも確認することができます。

http://webplantmedia.com/starter-themes/wordpresscanvas/features/shortcodes/

いかがだったでしょうか? そこそこ凝ったデザインのコンテンツが割と簡単に設置できるため、見栄えの良さがアップしたいときにもオススメです。