WP Canvas – Shortcodesは、画像や見出しを横並びにしたり、文字を装飾することができるプラグインです。

CSSの知識は必要なく、プラグインを有効化するだけで、使用することができます。

※WP Canvas – ShortcodesはShortcodes by Angie Makesへと名前を変えました。

機能はまったく変わっていないので、ご心配なく。

WP Canvas – Shortcodesの使い方

columns

WP Canvas - Shortcodes1

まず、投稿ページに移動すると、ビジュアルエディターに上図のようなものが追加されます。

WP Canvas - Shortcodes コンテンツ

[]のところをクリックして、「columns」→「1/2+1/2」をクリックすると、以下のような文字が表示されます。

WP サンプル

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

Sample Content

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

Sample Content

[/wc_column][/wc_row]

プレビューすると、上のように、Sample Contentの文字が横に並びます。

このSample Contentの文字を消して、画像を挿入すれば、画像を横に並べることもできます。

ほかにも「1/3+1/3+1/3」や、「1/4+1/4+1/4+1/4」など、さまざまな種類がありますので、ご自身の好みに合わせて使い分けてみてください。

Elements

Button
[wc_button type=”primary” url=”http://webplantmedia.com” title=”Visit Site” target=”self” position=”float”]Sample Content[/wc_button]

「Element」→「Button」の順にクリックすると、ボタンが挿入されます。

Pricing Table
[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”]

  • 30GB Storage
  • 512MB Ram
  • 10 databases
  • 1,000 Emails
  • 25GB Bandwidth

[/wc_pricing]

Pricing Tableは、価格表を挿入できます。(あまり使う機会はなさそうですが…)

Social icons

[wc_social_icons align=”left” size=”large” display=”facebook,google,twitter,pinterest,instagram,bloglovin,flickr,rss,email,custom1,custom2,custom3,custom4,custom5″]

Twitterやfacebookなどのソーシャルメディアのアイコンが表示できます。

Countdown
[wc_countdown date=”July 23, 2017, 6:00:00 PM” format=”wdHMs” message=”Your Message Here!” labels=”Years,Months,Weeks,Days,Hours,Minutes,Seconds” labels1=”Year,Month,Week,Day,Hour,Minute,Second”]

日時を設定すると、カウントダウンが開始されます。

posts

過去記事

postsは、過去の記事を上のように並べることができます。

Boxes

[wc_box color=”primary” text_align=”left”]

Sample Content

[/wc_box]

[wc_box color=”secondary” text_align=”left”]

Sample Content

[/wc_box]

Boxesは、テキストを四角で囲むことができ、「primary」「secondary」「inverse」「success」「warning」「danger」「info」の7種類あります。

Highlights

[wc_highlight color=”blue”]Sample Content[/wc_highlight]

[wc_highlight color=”gray”]Sample Content[/wc_highlight]

[wc_highlight color=”green”]Sample Content[/wc_highlight]

[wc_highlight color=”red”]Sample Content[/wc_highlight]

[wc_highlight color=”yellow”]Sample Content[/wc_highlight]

Highlightsは、テキストを色で囲むことができます。色は、「blue」「gray」「green」「red」「yellow」の5種類です。

Dividers

[wc_divider style=”solid” line=”single” margin_top=”” margin_bottom=””]

[wc_divider style=”dashed” line=”single” margin_top=”” margin_bottom=””]

[wc_divider style=”dotted” line=”single” margin_top=”” margin_bottom=””]

[wc_divider style=”image” margin_top=”” margin_bottom=””]

[wc_divider style=”image2″ margin_top=”” margin_bottom=””]

[wc_divider style=”image3″ margin_top=”” margin_bottom=””]

dividerは、区切り線を引くことができ、「solid」「dashed」「dotted」「image」「image2」「image3」の6種類あります。

jQuery

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

[wc_accordion_section title=”Section 1″]

Sample Content

[/wc_accordion_section]

[wc_accordion_section title=”Section 2″]

Sample Content

[/wc_accordion_section]

[/wc_accordion]

sectionをクリックすると、テキストが上下に開閉します。

Taggle

[wc_toggle title=”This Is Your Toggle Title” layout=”box”]

Sample Content

[/wc_toggle]

「This Is Your Toggle Title」をクリックすると、Accordion同様、テキストが上下に開閉します。

Other

Spacing

あいうえお[wc_spacing size=”40px”]かきくけこ

Spacingは、文字と文字の間隔をピクセル単位で指定することができます。

[wc_clear_floats]

まとめ

WP Canvas – Shortcodesは、デザインの利便性が高まりますので、サイトを目立たせたい方にはおすすめです。

正直使わない機能もあったりしますが、HTMLやCSSをいじらなくてもいいのが大きなメリットですね。

すべて英語なので、最初は難しいと思いますが、慣れてくればだんだんと分かってきます。

WP Canvas – Shortcodesを活用して、自分好みのサイトを作っていきましょう。