Shortcodes by Angie Makesは記事を装飾するプラグイン

Shortcodes by Angie Makesとは

「Shortcodes by Angie Makes」は、WordPressテーマにさまざまな便利なショートコードを追加するプラグインです。主にAngie Makesが提供するWordPressテーマと連携して動作するように設計されていますが、他のテーマでも利用できる場合があります。

このプラグインを使うことで、以下のような様々な要素を、複雑なコードを書くことなく簡単にウェブサイトに追加できるようになります。

主な機能と提供されるショートコードの例：

• カラム（Columns）： 記事やコンテンツを複数の列に分割して表示できます。
• ボタン（Button）： さまざまなスタイルやサイズのリンクボタンを作成できます。
• 価格表（Pricing table）： サービスや商品の価格プランを分かりやすく表示できます。
• 吹き出し（Testimonial）： 顧客のレビューやコメントを魅力的な吹き出し形式で表示できます。
• ボックス（Boxes）： コンテンツを囲む様々なデザインのボックスを作成できます。
• アイコン（Font Awesome Icon）： さまざまなアイコンを簡単に追加できます。
• 見出し（Heading）： スタイリングされた見出しを作成できます。
• ハイライト（Highlight）： テキストを強調表示できます。
• アコーディオン（Accordion）/タブ（Tabs）： コンテンツを折りたたみ式やタブ形式で整理できます。
• SNSアイコン： ソーシャルメディアのアイコンを設置できます。
• 画像ショートコード： 画像の表示を制御できます。
• カウントダウン： カウントダウンタイマーを表示できます。

特徴：

• 使いやすさ： WordPressのビジュアルエディタに専用のボタンが追加され、そこから簡単にショートコードを挿入・設定できます。プログラミングの知識がなくても、視覚的にコンテンツを装飾できます。
• レスポンシブデザイン対応： 追加される要素はレスポンシブに対応しており、様々なデバイスで適切に表示されます。
• カスタマイズ性： ショートコードには様々なオプションが用意されており、色やサイズ、配置などを調整できます。

基本的には無料で利用できるプラグインですが、Angie Makesのプレミアムテーマを購入することで、個別のサポートが受けられるとされています。

このプラグインは、WordPressサイトのレイアウトやデザインを向上させ、より魅力的で分かりやすいコンテンツを作成するのに役立ちます。

Shortcodes by Angie Makesに実装されているショートコード

できることは、レイアウトや見た目をHTMLやCSSの知識がなくてもショートコードで充実させることができ、インストールするとビジュアルモード画面にボタンが表示されます。ボタンをクリックするとColumns,Elements,Content,Posts,Actions,Wrappersから選択し記事を編集することができます。

• Columns（カラム・列）
• Elements（要素）
• Content（コンテンツ）
• Posts（投稿）Posts（投稿）
• Actions（アクション）
• Wrappers（ラッパー）

「Shortcodes by Angie Makes」のショートコードを利用するにはビジュアルモードでボタンをクリックし選択します。（ビジュアルモードでショートコードボタンが表示されます。テキストモードではボタンは表示されません。）

Colum

Shortcodes by Angie Makesの【 Colum 】はページを分割表示するレイアウトができる機能です。WordPressのレスポンシブ対応テーマを利用するとスタイルシートをカスタマイズするのに知識が必要です。文章だけで構成できる記事なら比較的簡単に作りことができますが、企業サイトのように製品やサービスをアピールするにはレイアウトを操作したくなります。ビジュアル編集画面で分割したいレイアウトを選択するだけでショートコードがページに埋め込まれます。分割できるサイズは下記のようになっています。

• 1/2 + 1/2
• 1/3 + 1/3 + 1/3
• 1/3 + 2/3
• 2/3 + 1/3
• 1/4 + 1/4 + 1/4 +1/4
• 1/4 + 1/2 + 1/4
• 1/2 + 1/4 + 1/4
• 1/4 + 1/4 + 1/2
• 1/4 + 3/4
• 3/4 + 1/4

Colum の使用例

次のショートコードで1/2分割レイアウトすることができます。

[wc_row][wc_column size="one-half" position="first"]
[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]1/2 +1/2
左・上[/wc_box]
[/wc_column][wc_column size="one-half" position="last"]
[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]1/2 +1/2
右・下[/wc_box]
[/wc_column][/wc_row]

モバイル端末では左側が上に、右側が下にレイアウトされます。

1/3 + 1/3 + 1/3 「Columns」ショートコード

3分割レイアウトです。

[wc_row][wc_column size="one-third" position="first"]
[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]1/3 + 1/3 + 1/3[/wc_box]
[/wc_column][wc_column size="one-third"]

[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]1/3 + 1/3 + 1/3[/wc_box]
[/wc_column][wc_column size="one-third" position="last"]
[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]1/3 + 1/3 + 1/3[/wc_box]
[/wc_column][/wc_row]

1/3 + 2/3 「Columns」ショートコード

[wc_row][wc_column size="one-third" position="first"]
[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]1/3[/wc_box]
[/wc_column][wc_column size="two-third" position="last"]
[wc_box color="secondary" text_align="left" margin_top="" margin_bottom="" class=""]2/3[/wc_box]
[/wc_column][/wc_row]

Elements

Shortcodes by Angie Makesの「Elements」にはButton、Font Awesome Icon、Heading、Highlight、Spacing、Clear Floats、Inline Code、Dividerなどの文章を装飾する機能がショートコードで提供されています。HTMLやCSSスタイルシートを理解しなくても装飾をすることが可能になります。

• Button – リンクボタンを設置できる
• Font Awesome Icon – アイコンを設置できる
• Heading – 見出しを設置できる
• Highlight – ハイライトをつける
• Spacing – スペースをとるスペース
• Inline Code
• Divider – デバイダー（分割線を設置）

「Elements」を編集するにはビジュアル編集モードから ［▼］ ボタンをクリックして、ドロップダウンメニューより装飾したいショートコードを選択します。

Button

「Button」はリンクボタンを設置することができます。「Button Type」ではリンクボタンの外観を設定します。

[wc_button type="info" url="" title="ボタンはInfo" target="" url_rel="" icon_left="" icon_right="" position="" class=""]「Button」[/wc_button]

• Primary
• Secondary
• Inverse
• Saccess
• Warning
• Danger
• Info

その他に、リンク先のURL、アンカーテキスト、別窓で開く、nofflow、配置位置などボタンに関する設定ができます。

Font Awesome Icon

「Font Awesome Icon」は文字列にアイコンをつけることができます。Iconをクリックすると用意されているアイコンから選択できるようになっています。

Heading

「Heading」は見出しを設置できます。通常見出しはテーマによってスタイルシートで装飾されていますが、手軽にアイコンをつけたりすることは難しくなっています。また、見出しの上下の余白、文字寄、文字の大きさ、文字色、アイコンを付けるなど指定ができるので表現力が増します。

Content

「Content」には価格表を設置、ソーシャルボタンを設置、シャエアボタン、吹き出しを埋め込んだりとコンテンツを装飾するためのショートコードが揃っています。

• Pricing Table – 価格表を設置する
• Social Icon – ソーシャルボタンを設置する
• Share Buttons – シェア（共有ボタン）を設定する
• Testimonial – 吹き出しを埋め込む
• Countdown – カウントダウンを設置する
• Skillbar – スキルバーを埋め込む
• 画像 – 画像を埋め込む
• Call to Action – 資料請求などの行動を促すコンテンツを追加する
• Image links – 画像リンク(一度に複数)埋め込むことができる
• Box – ブロックを線で囲むことができる
• HTML – カスタムHTMLを埋め込める
• Preformatted Text – 書式設定済みのテキストを配置

Pricing Table

「Pricing Table」は価格表を設置し、問い合わせ、申し込み、予約などのコンタクトフォームにユーザーを誘導することができます。

Social Icon

「Social Icon」はページにソーシャボタンを埋め込むことができます。ソーシャルボタンを埋め込むことができるプラグインもありますが、サイト全対に必要がない場合等、ページ単位で埋め込みが可能です。

画像

画像はメディアの追加でも埋め込むことができるのですが、こちらは画像の上にラベルを表示させることができます。サンプルでは「For Sale」を表示しています。画像を編集したものではなく、文字を重ねてくれるのです。

Posts

ショートコードを埋め込んだページにカテゴリーやタグ、個別指定（ID）で投稿を一覧表示してくれます。アイキャッチ画像やページタイトル、詳細文章を同時に表示できるのでナビゲーションページを効率良く作成することが可能になります。

• Masonry-Box　→　タイル・フチあり
• Masonry-Borderless　→　タイル・フチなし
• Grid-Box　→　グリッド・フチあり
• Grid-Borderless　→　グリッド・フチなし
• Post Slider 1　→　スライダー
• Post Slider 2　→　スライダー
• Collage　→　コラージュ

Masonry-Box

Masonry-Boxは投稿ごとに枠線で囲って並べて表示できます。並べるBox数は指定でき、１ボックスだけ表示することもできたりします。以下のサンプルではアイキャッチ画像をサムネイル表示、ページタイトルを見出しタグを使って抜粋を表示しています。モバイル端末などの表示領域が狭い場合は左から順番に下へと表示されるようになっています。