プラグイン

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

更新日:

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

「Shortcodes by Angie Makes」

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

「Shortcodes by Angie Makes」

  • できることは、レイアウトや見た目をHTMLやCSSの知識がなくてもショートコードで充実させることができる。
  • 名称は「Shortcodes by Angie Makes」
  • プラグインディレクトリのページ
  • ライセンスは無償
  • 必須WordPressバージョンは3.7
  • 検証済みバージョンは4.7.7
  • 管理画面の言語は英語
  • アクティブインストールは40,000+

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

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

※「Shortcodes by Angie Makes」のショートコードのデモサイトです。

「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分割でレイアウトすることができます。

1/2 +1/2 左・上
1/2 +1/2 右・下

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

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

3分割レイアウトです。

1/3 + 1/3 + 1/3
1/3 + 1/3 + 1/3
1/3 + 1/3 + 1/3

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

1/3
2/3

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」ではリンクボタンの外観を設定します。

「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」のインストールや更新時エラーの対処

「Shortcodes by Angie Makes」をインストールするには、ダッシュボード → プラグイン → 新規追加 → 検索 → 「Shortcodes by Angie Makes」で検索 → インストール → 有効

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

エラー:メンテナンスモードが消えない

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

対処1「.maintenance」を削除

更新中は「.maintenance」というファイルが作成されメンテナンスモードに入ります。更新が成功しているのに解除されない場合はこのファイルを削除してやれば解除されサイトが表示されるようになります。 まず、FTPソフトを使ってWordPressをインストールしたフォルダにアクセスします。次に、「.maintenance」というファイルが作成されているはずなのでこのファイルを削除します。これで作業は終了しメンテナンスモードが解除されました。

  1. FTPソフトでWordPressインストールフォルダにアクセス
  2. ルート直下の「.maintenance」を削除する
  3. WordPress管理画面からは操作できない
対処2プラグインを削除

「.maintenance」ファイルがないのにサイトが表示されない場合はプラグインを削除してみることです。但し、複雑な設定をしていて影響をしているのか確信が持てない時や複数のプラグインを更新中にエラーが発生して、どれかわからない場合はいきなり削除するのではなくフォルダ名を変更するとよいでしょう。

WordPressインストールフォルダに格納されています。例えば、「WP-Maltibyte Patch」ならば「/wp-content/plugins/wp-multibyte-patch/」となっています。この「/wp-multibyte-patch/」を「/wp-multibyte-patch-back/」とかに変更して状況が改善されるかを確認し、不要と確定した場合に削除するとよいでしょう。

  • FTPソフトでWordPressフォルダにアクセス
  • プラグインフォルダ名を変更してみる
  • エラーの原因プラグインが確定したら削除する
  • WordPress管理画面からは操作できない

プラグインとは

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

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

※WordPress Codex日本語版(公式オンラインマニュアル)『WordPress Codex』 とは、オープンソースブログツール・CMS WordPress の公式オンラインマニュアル(ドキュメント)であり、WordPress 知識の百科事典です。日本語版では、その和訳や日本語ユーザ向けのノウハウ・資料などの情報を Wiki で蓄積・整理して、日本語ユーザー同士で共有しています。コンテンツはいつでも誰でも編集できます。

プラグインのメリットとデメリット

導入メリットは以下のものでしょうか。

  • 必要な機能を簡単に導入することができる
  • 管理画面だけで柔軟に対応できる
  • 難易度の高いコーディングをしなくてすむ
  • WordPressのアップデートに伴い、アップデートがかかり、対応してくれる

導入には次のようなデメリットもあります。

  • 数が多くなると、サイトが重くなる
  • 数が多くなると、管理しきれなくなる
  • 他のプラグインと競合したり、バグがあったりするものもある
  • サポートが途中で終わるものもある

「Shortcodes by Angie Makes」のまとめ

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

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

-プラグイン

Copyright© WordPreeの使い方 , 2020 All Rights Reserved Powered by STINGER.