【WP Canvas–Shortcodes】アコーディオンやタブなどをショートコードで簡単に実装できるWordPressプラグイン

【記事公開日】2015/03/04
WordPress, プラグイン

WordPressでブログを運営していくと、記事中にただずらずらとテキストを並べていくだけでなく、少し凝ったデザインをしたくなる時がありますよね?

特にブログよりも企業サイトなどのホームページのような使い方をしていると尚更出てくると思います。

CSSやScriptを書ければ良いのですが、独学勉強中の僕には少し荷が重いので、現時点ではプラグインに頼ることにします。

何か良いの無いかなー。と探していた時に便利なプラグインを発見したのでご紹介しておきます。

[wc_fa icon=”wordpress” margin_left=”” margin_right=””][/wc_fa] WP Canvas – Shortcodes

紹介するのは「 WP Canvas – Shortcodes 」というプラグインです。

下のリンクからダウンロードするか、管理画面からプラグイン検索でインストールも出来ます。

[btn]WP Canvas – Shortcodes[/btn]

 

実装できる内容

  • アコーディオン
  • タブ
  • トグル
  • 列&セクション
  • お客様の声
  • ボーダー
  • ボタン
  • 全幅
  • 通知
  • Googleマップ
  • SNSアイコン
  • プログレスバー
  • 価格表
  • フラグ付きの画像
  • ハイライト
  • カウントダウン
  • RSVP
  • カスタムHTML
  • コー​​ドスニペット
  • カスタム投稿
  • アイコン

こんなに沢山のことができてしまいます!

しかも設定不要でインストールして有効化するだけ。

 

WP Canvas – Shortcodesの使い方

estelocos_2

▲プラグインを有効化すると、投稿画面のツールバーに上記のアイコンが追加されています。

 

estelocos_3

▲あとは入れたいデザインを選ぶだけ、ビジュアルエディタにショートコードが挿入されますので、任意のテキストに変えるだけです。

 

記事内をカラム分け

[wc_row][wc_column size=”one-third” position=”first”]

例えば、このようにコンテンツ内を簡単に3カラムにできます。

[/wc_column][wc_column size=”one-third”]

okepool-banner-1

[/wc_column][wc_column size=”one-third” position=”last”]

画像も入れれますし、レスポンシブ対応でスマホでは1カラムの縦並びになります。

[/wc_column][/wc_row]

[wc_row][wc_column size=”one-third” position=”first”]

この他にも半分ずつの2カラムはもちろん

[/wc_column][wc_column size=”two-third” position=”last”]

このように1/3 + 2/3等の分け方もできます。

[/wc_column][/wc_row]

 

アコーディオン

[wc_accordion collapse=”0″ leaveopen=”0″ layout=”box”]

[wc_accordion_section title=”アコーディオンの例1″]

縦に長くなりすぎる場合はアコーディオンの開閉式にしてみるとスッキリするかもしれませんね。

[/wc_accordion_section]

[wc_accordion_section title=”アコーディオンの例2″]

クリックで開閉します。

[/wc_accordion_section]

[/wc_accordion]

 

タブ

[wc_tabgroup layout=”box”]

[wc_tab title=”タブの例1″]

同様にタブ表示にしてみてもいいかもしれません。

[/wc_tab]

[wc_tab title=”タブの例2″]

表示するコンテンツに合わせて使い分けてみましょう。

[/wc_tab]

[/wc_tabgroup]

 

スキルバー

[wc_skillbar title=”便利度” percentage=”100″ color=”##bf7fff”]

[wc_skillbar title=”使いやすさ” percentage=”90″ color=”#7f7fff”]

[wc_skillbar title=”自由度” percentage=”50″ color=”#7fffbf”]

[wc_skillbar title=”デザイン性” percentage=”70″ color=”#ffbf7f”]

コンテンツによっては面白い使い方ができるかもしれませんね。

 

料金表

[wc_row][wc_column size=”one-third” position=”first”]

[wc_pricing type=”primary” featured=”yes” plan=”無料プラン” cost=”FREE” per=”10秒間のみ” button_url=”#” button_text=”申し込む” button_target=”self” button_rel=”nofollow”]

軽く試したい方におすすめ

料金表サンプル

簡単実装

[/wc_pricing]

[/wc_column][wc_column size=”one-third”]

[wc_pricing type=”inverse” featured=”yes” plan=”通常プラン” cost=”100円 / 月” per=”1年まとめ払いで10,000円” button_url=”#” button_text=”申し込む” button_target=”self” button_rel=”nofollow”]

1番人気プラン

料金表は適当なサンプルです

お間違いなく

[/wc_pricing]

[/wc_column][wc_column size=”one-third” position=”last”]

[wc_pricing type=”secondary” featured=”yes” plan=”プロ級プラン” cost=”100万円 / 年” per=”10年契約となります” button_url=”#” button_text=”申し込む” button_target=”self” button_rel=”nofollow”]

最上級プラン

妥協できない人に

この内容で1年間100万円は良心的価格です

[/wc_pricing]

[/wc_column][/wc_row]

料金表も簡単に作れます。

 

まとめ

いかがでしたでしょうか。

一部しか紹介しませんでしたが、設定も不要で他にも様々な装飾が投稿画面から簡単に実装できます。

開閉式のアコーディオンやタブを実装したかった僕には非常に効果的なプラグインでした。

記事中にテキスト以外に色々な装飾を施したい人は使ってみてください。

 

ではまた。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で野口 銀河をフォローしよう!

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

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

関連記事一覧