WordPress は HTML や CSS の知識がなくても無料ブログと同じように記事が書けますし、TinyMCE Advanced というプラグインを入れることで表作成なども簡単にできます。
でも、記事内で段組みしたりアコーディオンメニューを入れたいとなると、それなりの知識が必要になってきますよね。
実はこれもプラグインを入れることで解決できます。「Shortcodes by Angie Makes」を使って、もっとおしゃれな記事を作成してみましょう！
「WP Canvas – Shortcodes」の名前が「Shortcodes by Angie Makes」に変更されました（2017/01）。記事内の画像は「WP Canvas – Shortcodes」となっていますが機能や使い方は同じです。
Headline
Shortcodes by Angie Makes とは
WP Canvas – Shortcodes は、専用のショートコードを使って記事の見た目を充実させることができるプラグインです。
ショートコードは半角大かっこ [ ] で囲んで使いますが、とくにコードを覚える必要はありません。
エディタに追加されるメニューから選択するだけで OK です。
アコーディオンメニューやタブメニュー、おしゃれなボックスや価格表などもこのボタンひとつで作れてしまいます。
プラグインを使うメリット・デメリット
HTML や CSS に詳しくなくても様々な表現ができるというメリットはあるものの、一度入れたら外すことができない、というデメリットもあります。
たとえば、以下のようにハイライトを使って一部テキストを目立たせることができますが、
プラグインを外した状態だと、このようにショートコードがむき出しになってしまうのです。
[wc_highlight color=”blue”]ここのテキストの背景色が青になります[/wc_highlight]
どうしても外す場合は置換作業が必要なので、「一度使ったら入れっぱなし」と思っていたほうが良いかもしれません。
逆に考えると、テーマを変えてもプラグインを入れておけば見た目をある程度同じにできます。
最近ではあらかじめ豊富なショートコードが用意されているテーマも増えてきましたが、テーマを使い続けるかプラグインを使い続けるか、ですね。
プラグインのインストールと初期設定
それではさっそく使ってみましょう。
管理画面［プラグイン］－［新規追加］より、「Shortcodes by Angie Makes」を検索してインストールしてください。
有効化後、［外観］－［Shortcodes］から設定画面に入れます。
とくに設定しなくても大丈夫ですが、SNS ボタンを呼び出すときはあらかじめ各 SNS の URL を入れておきましょう。
WP Canvas – Shortcodes の使い方
プラグインがインストールされていると、エディタにショートコードボタンが追加されます。
ここから目的のものを選択すると、サンプルコードがエディタ内に埋め込まれるので、あとは必要に応じて書き変えれば OK 。
※テキストモードでは使えないので注意してください
では、使い方の一例をご紹介します。
記事内の段組み（Columns）
「Columns」は、記事内の段組みができる機能です。組み合わせは以下の 10 種類。
画像と説明文を横に並べたいときなどに使えますね。
商品名と商品説明・価格など、アフィリエイトにも使えそうです。
各カラム内は通常どおり HTML タグが使えますので表を入れることもできますし、他のショートコードを使うこともできます。
リンクボタン（Button）
「Elements」から「Button」を選択すると、リンクボタンが作れます。
[wc_button type="primary" url="http://webplantmedia.com" title="Visit Site" target="self" position="float"]Sample Content[/wc_button]
少しわかりづらいですが、type の値によって見た目を変更できます。
それぞれ以下のような値を指定できます。
| type |
primary secondary inverse success warning danger info |
|---|---|
| url | リンク先 URL |
| title | リンクの title 属性 |
| target | self blank |
| position |
float left center right |
価格表（Pricing table）
「Elements」から「Pricing table」を選択すると、価格表とリンクボタンを表示することができます。
サンプルコードが以下のように出力されるので、プレビューを確認しながらどこの値がどこに反映されるか確認しながら設定すれば OK です。
[wc_pricing type="primary" featured="yes" plan="Basic" cost="$19.99" per="per month" button_url="#" button_text="Sign Up" button_target="self" button_rel="nofollow"] <ul> <li>30GB Storage</li> <li>512MB Ram</li> <li>10 databases</li> <li>1,000 Emails</li> <li>25GB Bandwidth</li> </ul> [/wc_pricing]
なお、type は「primary」「secondary」「inverse」が選択できます。
段組みと合わせて使えば、無料・ベーシック・プレミアなどのプラン比較が簡単に表現できますね。
満足度・進捗状況（Skillbar）
商品の満足度や作業工程の進捗状況で使えるプログレスバーは「Elements」の「Skillbar」から。
[wc_skillbar title="Sample Content" percentage="100" color="#6adcfa"]
「テキスト」「パーセンテージ」「色」を変更するだけなので簡単です。
なお、簡単なアニメーション機能もついています。
吹きだし（Testimonial）
「Elements」の「Testimonial」を選ぶと、簡単な吹きだしを表示できます。
サンプルコードはこちら。
[wc_testimonial by="Author" url="" position="left"]Sample Content[/wc_testimonial]
吹きだし内は画像も入れられるので、「お客さまの声」などに使いやすいかもしれません。
「position」を left と right にすれば、会話っぽく見せることもできますよ。
ボックス（Boxes）
「Boxes」を使うと、以下のようにテキストをボックスで囲むことができます。
背景色は「Button」と同じです。
| color |
primary secondary inverse success warning danger info |
|---|
目立たせたいところに使ってみましょう。
強調させたい文字をカラフルにするよりは、ボックスのほうがおしゃれです。
アコーディオンメニュー（Accordion）
「jQuery」から「Accordion」を選択すると、クリックで開閉するアコーディオンメニューが作れます。
重要なテキストを隠しておくのは好ましくない（検索エンジンに嫌われやすい）ので、多用するのはあまりオススメしません。
長めの CSS や HTML のサンプルコードを入れて記事をスッキリさせたり、簡単なクイズで使うと面白いかもしれませんね。
なお、collapse の値を「0」にすると一番上のメニューだけ開いた状態で表示され、「1」にすると全メニューが隠れた状態になります。
leaveopen の値が「0」のときはいずれかのメニューをクリックすると他の開いているメニューが自動的に閉じられ、「1」のときはクリックしても開いたメニューはそのままの状態となります。
上のサンプル画像は両方「1」です。
Font Awesome アイコン
ショートコードボタン横の「Font Icons」から、Font Awesome のアイコンを直接選択することができます。
わざわざアイコンを探しにいかなくても良いので便利ですが、選択画面にはアイコンが表示されないのでどれがどれだかわかりづらいかも……。
アイコンを選択して、ショートコードごと色やサイズを変えればそれがアイコンにも適用されます。
オプションは margin のみですが、クラス名もつけられます。
[wc_fa icon="coffee" margin_left="" margin_right="" class="ellora"][/wc_fa]
まとめ
このほかにも「カウントダウンタイマー」や「タブメニュー」などいろいろ揃っているので、今までより表現の幅が広がると思います。
ショートコードの詳しい解説は 公式サイト にありますが、習うより慣れろでいろいろ試してみてください。
ショートコードのなかでショートコードを使える、だけ覚えておけばあとは直感的に操作できますよ。
それでは、また。