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

この記事はプロモーションが含まれています。

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

Shortcodes by Angie Makes

Shortcodes by Angie Makes(WordPressプラグイン)のページ

Shortcodes by Angie Makes

このプラグインの公開は2023年7月27日に停止されており、ダウンロードできません。 この公開停止は一時的なもので、完全なレビューを待っている状態です。

このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。

WordPress.orgShortcodes by Angie Makes
バージョン3.46
最終更新4年前
有効インストール30000+
WordPressバージョン3.7以上
検証バージョン5.0.18
Shortcodes by Angie Makes 2023年08月

WordPressを利用したブログマーケティングをされている方におすすめのテーマです。 最新のテーマSTORK19ではブロックエディタ(Gutenberg)にも最適化され、 マニュアルなしでも利用可能なほどシンプルで使いやすいテーマとなります。

実装されているショートコード

  • Columns(カラム・列)
  • Elements(要素)
  • Content(コンテンツ)
  • Posts(投稿)Posts(投稿)
  • Actions(アクション)
  • Wrappers(ラッパー)
Shortcodes by Angie Makes(WordPressプラグイン)に実装されているショートコード
Shortcodes by Angie Makes に実装されているショートコード

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

インストール

プラグインをインストールするには、ダッシュボード → プラグイン → 新規追加と進みます。

Shortcodes by Angie Makes(WordPressプラグイン)のインストール
インストール

検索 → プラグイン名で検索 → インストール → 有効化すれば利用できるようになります。

プラグイン

WordPress最大の特徴の一つとして「プラグイン」があります。標準のWordPressにはない機能(プログラム)が「プラグイン」という形で配布されており、それらを追加インストールする事によって、ウェブサイトに様々な機能を持たせる事が出来ます。

プラグインの多用は表示速度やメンテナンス性などに影響を与えるので必要なものに留める方が良いようです。また、インストールするサーバ環境や干渉、テーマとのマッチングの問題も発生します。

プラグインとは機能を拡張するためのツールです。コアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったものを利用して、カスタム機能を取り入れられるように作られています。

WordPress Codex日本語版(公式オンラインマニュアル)

メリット・デメリット

メリットデメリット
必要な機能を簡単に導入することができる数が多くなると、サイトが重くなる
管理画面だけで柔軟に対応できる数が多くなると、管理しきれなくなる
難易度の高いコーディングをしなくてすむ他と競合したり、バグがあったりするものもある
アップデートに伴い、アップデートがかかり、対応してくれるサポートが途中で終わるものもある
プラグイン導入のメリット・デメリット

エラーの対処

プラグインはインストール時や更新時にエラーを起こしてしまうことがあります。エラーによってはサイトが表示できなくなるだけではなく、WordPressにログインできなくなったりWEBサイトを利用できなくなったりすることもあります。

>> プラグインがエラーを発生した時の回復方法

プラグインの更新中は自動的にメンテナンスモードになりサイトにアクセスできなくなります。更新が終了すれば自動的にメンテナンスモードが解除されアクセスできるようになっています。更新中に何らかの原因で失敗してしまうとメンテナンスモードが解除されずアクセスできないといった状態になるわけです。

※万一の不測の事態に備え「BackWPup」、「UpdraftPlus」、「Duplicator」などのプラグインやレンタルサーバーの機能を使ってバックアップを取るようにしましょう。

プラグインの更新中は自動的にメンテナンスモードになりサイトにアクセスできなくなります。更新が終了すれば自動的にメンテナンスモードが解除されアクセスできるようになっています。更新中に何らかの原因で失敗してしまうとメンテナンスモードが解除されずアクセスできないといった状態になるわけです。万一の事態に備えレンタルサーバーのバックアップ機能を確認しておきましょう。

レンタルサーバーバックアップ
WordPressインストール済みの KAGOYA のレンタルサーバー 毎週や毎月など指定したスケジュールでバックアップが可能、万一の時にはバックアップデータから復旧が可能。
【国内最速No.1】高性能レンタルサーバーConoHa WING 14日間の自動バックアップ
安価で快適に・・リトルサーバー 毎日1回自動で7日分の自動バックアップ
高速・安定・無料SSL付!月額425円からWordPressが使えるさくらのレンタルサーバ サイト更新の世代管理
ワンクリックでWordPressインストール
【WordPress最適化サーバー】
1日1回
サポート満足度94%!レンタルサーバー【ロリポップ!】 自動バックアップ、間隔は自由設定
レンタルサーバーのバックアップ

バックアップの復元

一般的なバックアップの復元方法は以下の流れになります。(使用中のレンタルサーバーで確認ください。)

1.管理画面等から「バックアップから復元」を選ぶ

2.対象のバックアップと復元方法を選ぶ

3.開始を選ぶ