WING(Affinger5)

【初心者向けおすすめプラグイン】アフィンガー5(WING)を使いこなす!

WING初心者向き使い方マニュアル2プラグイン

WING(アフィンガー5)は、操作の丁寧な解説がされた公式マニュアルが用意されています。

なので購入後も、マニュアルを見ながら設定・編集していけば充分に使うことが可能!ですが、ワードプレス初心者の方には公式マニュアルだけだとわかりづらい部分もあるかもしれません。

そこで、初心者向けに補足のマニュアルをまとめてみます。今回は事前準備の次の段階、プラグイン導入編

公式マニュアルを見たけど、よくわからない・・!という方は参考にしてみてください。

 

マストツール!な商品紹介リンク

あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか?

手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています!

必須!
amazon 楽天 yahoo 商品リンク ブログ
ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法

この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい!」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと ...

続きを見る

 Wordpressのプラグインとは

プラグイン

まず、プラグインって何なのか?簡単に説明をします。

プラグインとは、一言で言うと「ワードプレスの機能を追加・拡張するための小さなプログラム」

プラグインを導入していくことで、ワードプレスの編集画面や作ったサイトを自分好みにカスタマイズしていくことができます。スマホでいうところの「アプリ」のようなイメージです。

プラグインは一部有料なものもありますが、ほとんどは無料で高機能。誰でもワンクリックでダウンロードできて、簡単な設定をすれば使えます。

WINGなどのワードプレス有料テーマには元々オリジナルの機能がたくさん組み込まれていますが、

 

  • プラグインを導入して使うことが前提
  • プラグインを組み込むことで、機能を最大化

 

というテーマも多くなっています。

そのため、有料テーマでもプラグインを適宜導入してワードプレスを使いやすくしていくことが必要です。




 

 アフィンガー5で必須なプラグイン

アフィンガー5(WING)は、公式マニュアルで「必須レベルな無料プラグイン」が紹介されています。ただ、それにしてもかなり数がありますので当記事ではその中からさらに厳選をしました。

実際使ってみて、初心者向きに「これは便利!導入すべき!」というプラグインを、その役割と共に9つ紹介。また、その使い方についてもレポートしていきます。

 

編集画面を初心者用にする

・Classic Editor

記事編集を効率化

・TinyMCE Advanced

・AddQuick Tag

・ステ子

記事内に目次を挿入

・SUGOI MOKUJI

SEO対策(サイト表示速度)

・WP Fastest Cache

・EWWW Image Optimizer

・Imsanity

SEO対策(サイトマップ)

・Google XML Sitemaps

 

編集画面を初心者用にする 

まず、編集画面を初心者用に使いやすいものにするためのプラグイン「classic Editor」の紹介から。

現在、Wordpress(アフィンガー)の編集画面としては大きく分けて2つあります。

 

  •  新仕様エディタ「Gutenberg(グーテンベルグ)」
  •  現行エディタ「Classic editor(クラシックエディタ)」

新仕様エディタ「Gutenberg(グーテンベルグ)」は配布が進んでいて、そちらへの移行が取りざたされています。そして、現行の「Classic editor(クラシックエディタ)」のサポート期限は2021年末までというアナウンスも・・!

ただ、新エディタの「Gutenberg」は現在進行形で頻繁に仕様のアップデート・変更が行われています。そのため、Affinger公式サイトでも「Gutenberg使用の場合は、予期せぬバグが発生する可能性が高まる」とし、現状はまだ「Classic Editor」の使用を推奨しています。

初心者の方の場合、予期せぬバグなどが発生するとリカバリーは難しく、そこで行き詰ってしまってその後のブログ作成にも大きな影響を及ぼします。

なので、特に初心者の方はClassic Editorを使用することを推奨します。Gutenbergへ移行するにしても2021年中盤以降の方が得策です。

Classic Editorは充分に使いやすい編集画面で、既存ユーザーの間でも評価が高く今後Classic Editorが完全に廃止される方向で進むのか?もまだ不確定な部分あります。覚えておけばGutenbergへの応用も効くので使っていても損はありません。

 

当サイトでは、Classic Editorの使用を前提とした説明をしています!

 

Classic Editorを使うには 

現状がClassic Editorを使えるようになっていない場合の対応手順を説明します。

 

step
1
Classic Editorプラグインを有効化

「プラグイン」⇒「新規追加」で検索窓に「classic Editor」と入力してプラグインをインストール・有効化します。

classic editor プラグイン 有効化

 

step
2
投稿画面で、右上のメニューを表示

サイドメニュー「投稿」⇒「新規追加」でエディタ画面を呼び出します。

 

step
3
Classic Editorへ切替

右上のメニュー画面から「旧エディターに切替」をクリックします。

classic editor 切替

 

 

 

 記事編集を効率化するプラグイン

サイトに投稿する記事の編集作業をやりやすくするためのプラグインです。導入することで記事作成のスピードアップ・効率化をすることができます。

 

 Classic Editorで記事の編集画面は2種類

ちなみに予備知識として、ワードプレスのClassic Editorには「ビジュアルエディタ」と「テキストエディタ」という2種類の記事編集画面があります。アフィンガー5も例外ではありません。

それぞれのエディタを簡単に紹介します。

 

アフィンガー5のビジュアルエディタ

WINGビジュアルエディタ

実際サイトに表示される画面に近い形で記事の編集ができるのがビジュアルエディタ

記事の完成形をイメージしながら作業できるので、初心者の方でも使いやすい。普段はビジュアルエディタを使った方が作業がしやすいです。

 

アフィンガー5のテキストエディタ

WINGテキストエディタ

一方、テキストエディタは「HTML言語」と呼ばれるWebページ作成のためのプログラミング言語を直接編集する画面です。

細かい調整をしたい時など、場合によってはこちらの方が作業がやりやすいこともありますが、HTML言語をある程度理解していないと難しい。どちらかというと上級者向けと言えるでしょう。

 

 エディタを使いやすくする重要性

記事編集はサイト作成のために一番大事でよく使う部分なので、エディタが使いやすいかどうか?というのはとても重要です。

使いやすければサイトの作成もサクサク進みますが、やりいくいと作成ペースが遅れるばかりか日々のヤル気にも悪影響を及ぼしてしまい、挫折する確率を高めてしまいます。

そこで、エディタを使いやすくする便利プラグインを3つ紹介します。

 

 TinyMCE Advanced

色々なショートカットキーを追加・削除することでビジュアルエディタの機能を拡張できるプラグインです。

アフィンガー5ではこのプラグインを前提にテーマが作られている・・といっても過言ではないので、推奨プラグインの中でも、必ず導入すべきものになります。

TinyMCE Advanced導入後

TinyMCE Advanced導入後のビジュアルエディタでは、赤で囲んだあたりのショートカットキーが追加されています。

ビジュアルエディタ上で欲しい記事装飾パーツや操作がすぐに呼び出せるようになるので、作業がとってもやりやすくなります。

特にオレンジで囲んだ

 

  • 一つ元に戻る
  • フォントサイズ
  • テーブル表

 

あたりは使用頻度が高く、重宝します。

もちろん自分にとって必要なものばかりではないので、プラグインの設定画面では下記のような感じで適宜削除したり追加したり・・という編集ができます。

TinyMCE Advanced 編集画面

 

最初の設定としては、とりあえず単純にTinyMCE Advancedをインストール&有効化して使ってみましょう。そうすれば、ほとんどの操作は事足ります。

ココに注意

TinyMCE Advancedを有効化すると、「スタイル」キーが消えてしまうことがあるので注意が必要。消えている場合は、プラグイン設定画面で再登録しましょう。

参考リンク

WING(アフィンガー5)スタイルタグ出ない
WING(アフィンガー5)で「スタイル」タグが出てこない時の対処法

WordPressのWINGテンプレートで記事を書き始めようとしたのに、文字装飾に不可欠な「スタイル」タグが出てこないじゃないか・・!(怒) 記事作成の初期段階でつまづいたので、忘備録として対処法を書 ...

続きを見る

10記事、20記事と投稿していくと、ショートカットキーの中でも「これ欲しい、これは要らない」というのが段々出てきます。適宜追加・削除して自分好みにカスタマイズしていきましょう!

 

 AddQuicktag

オリジナルのショートカットキーを作ってエディタに追加できるプラグインです。

先ほどのTinyMCE Advancedは予め用意されたショートカットキーの追加・削除だけですが、AddQuicktagでは欲しいショートカットキーを自分で作ることができます。

TinyMCE Advancedを導入すればショートカットキーが追加されて操作はやりやすくなるのですが、記事の装飾パーツによってはかなり深い階層までアクセスしなくてはいけないものも。

例えばこのように赤マーカーで装飾したい場合、下記のようにアクセスしなくてはいけません。

AddQuicktag説明

アフィンガー5の装飾パーツはとても沢山用意されていますが、使っていくうちに使用頻度の高いものは限られていきます。

深い階層のものは毎回アクセスする手間も面倒ですし、使う数が多くなっていくと「どこにあるのか?」場所も覚えてられない・・ということも。

AddQuicktagはそんな悩みを解決してくれるプラグイン。使用頻度の高いショートカットキーを自分で登録、2クリックで全て呼び出せるようになります。

AddQuicktagイメージ

なのでTinyMCE Advancedの導入だけでもかなり便利になりますが、AddQuicktagを併用するとさらに編集効率を高めることができます。

ちなみにテキストエディタの場合は、既存のショートカットキーの削除もすることができますよ。

 

 ステ子

ステ子はWING専用のプラグイン。機能はAddQuicktagと似ていて、自分でショートカットキーを登録して素早く呼び出すことができます。ステ子 イメージ

機能的にはAddQuicktagと似通っていますが、下記のような違いがあります。

 

  使い方 適性
AddQuicktag 反転選択した文字を装飾 太字やマーカーなど、文字の装飾
ステ子 何もない箇所に、登録したタグを挿入 定型の表や複合タグなどの挿入

AddQuicktagは反転選択した文字に装飾を追加することができますが、何もない箇所には挿入することができません。

逆にステ子は何もない箇所に登録したタグを挿入することができますが、反転選択した文字に装飾追加することはできなくなっています。

なのでAddQuicktagで事足りる方もいるとは思いますが、定型の表や複合タグを多用する場合はステ子も併用するとさらに便利です。

例えば、ステ子では下記のようなチェックボックスも登録すれば一発で呼び出すことができるようになります。

 

  • テキスト1
  • テキスト2
  • テキスト3

 

ショートカットキーを登録して整理すれば「Quicktags」「ステ子」の2つのコマンドがあれば、自分が欲しい装飾や複合タグをほとんど呼び出せるようになるのです。

ステ子の使い方は公式マニュアルに詳しく記載されていますので、参考にしてみてください。




 

 記事内に目次を挿入するプラグイン

記事内に1クリックで目次を挿入することができるプラグイン。

Table of Contents Plus(TOC)という無料プラグインが有名ですが、アフィンガー5では「SUGOIMOKUJI」というさらに高機能なプラグインを利用することができます。

「SUGOIMOKUJI」では

 

  • 目次に出したいhタグを記事別で選択
  • どの目次がクリックされたか?クリック数をカウント

 

ということが可能。

目次を最大限に活用した記事の作成ができますし、クリック数の計測で「どのポイントがユーザーは気になってアクセスしてきているのか?」知ることもできます。

クリック数を参考にした記事の修正・改善をすることで、さらなるアクセスアップにもつながります。

アフィンガー5でしか使えないプラグインですし、導入するのがオススメです。

 

 SEO対策(サイト表示速度)

サイトの表示速度を高速に保てれば、ユーザビリティーが良くなるだけでなくサーチエンジンに対する評価も良くなります。

無料で導入できて効果が高い、サイト表示速度を保つためのプラグインを3つ紹介します。

 

 WP Fastest Cache

「キャッシュ」を生成することによって、サイトの表示速度を高速に保つためのプラグインです。

無料版と有料版があって、有料版はさらに強力な圧縮を利用したり、モバイルキャッシュの生成をすることができます。

ただ、実際試したところ無料版(パソコン表示速度)は大きな効果がありましたが、有料版(スマホ表示速度)はそこまで・・という結果に。

詳細記事は下記になりますので参考にしてみてください。

参考リンク

WP Fastest Cache有料版のモバイル速度向上効果【実測結果】

サイトの表示速度向上効果がある色々なWordpressプラグインの中でも、初心者向きとされる「WP Fastest Cache」。 当ブログのテーマ、WING(アフィンガー5)でも表示高速化のための推 ...

続きを見る

なので、とりあえず無料版を導入して使用することをオススメします。

 

 EWWW Image Optimizer

見やすくわかりやすい記事の作成には、写真や図の挿入が欠かせません。

ですが、一方で写真や図などの画像ファイルはデータ容量が大きく、入れれば入れるほどサイトの表示速度を低下させてしまいます。

EWWW Image Optimizerはアップロードする画像ファイルの画質を劣化させることなく、容量を小さく最適化してくれるプラグイン。

有効化しておけば、アップロードする際に自動で最適化してくれるのでとても便利です。さらに今まで既に使った画像でも導入後に一括変換で容量縮小することもできるスグレモノ。

とても重宝するプラグインなので、導入をオススメします。

 

 Imsanity

アップロードする画像データのサイズ(大きさ)を元の縦横比は維持したまま、自動で指定したものに変換してくれるプラグイン。

不要に大きなサイズのデータがアップロードされることを防止できます。EWWW Image Optimizerと共に併用すれば、サイト表示速度維持の効果が大きいです。

 

 SEO対策(サイトマップ)

GoogleなどのSearch Engineはサイト全体がどのような構成になっているのか?サイトマップというのを読み取ることで検索結果に反映しています。

 

 Google XML Sitemaps

サイトや記事の修正・変更がある度に、自動でサイトマップを生成してSearch Engineに伝えてくれるプラグインです。

自分で毎回サイトマップのケアまでするのは大変なので、導入しておくと大変便利です。

 

Amazonアソシエイト審査通過できない方へ!

Amazonの商品を紹介したいのに、審査がいつまでたっても通過せずウンザリ・・

そんな貴方への解決策!

カンタンに審査通過できるだけじゃなく、こんなリンクもカンタンに作れちゃいますよ~

必見!
amazonアソシエイト審査落ち 代わり
Amazonアソシエイトの審査に受からない方へ!ベストな代替策教えます

この記事は、「Amazonとかのネット通販商品を、手間なく格好良く紹介したい!」のに   Amazonアソシエイトの審査に全然通らない・・! Amazonアソシエイトの新規ルール(3件発生後 ...

続きを見る

初心者向けオススメ記事

アフィンガーサイトデザイン初心者
アフィンガー5のサイトデザイン設定方法!初心者用の一番カンタンな手順

アフィンガー5(WING)の初心者の方向けマニュアル!今回はサイトのデザイン編です。 アフィンガー5はすごく多機能なテーマなので、こだわればいくらでも凝ったデザインにしていくことは可能。 ただサイトを ...

続きを見る

初心者向けオススメ記事

アフィンガー5初心者向け使い方マニュアル【記事の書き方・投稿編】

WING(アフィンガー5)初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の書き方編です。 WINGではどのように記事を書いていけばいいの?各画面の役割は?というあたりを順を追って解説し ...

続きを見る

肩こりにお悩みの方へ

ticova 人間工学椅子 レビュー
【Ticovaオフィスチェアレビュー】首と肩が疲れない理想の人間工学椅子

テレワークが流行りの今日この頃。 家で仕事するために長時間座ってても、首や肩が疲れない椅子が欲しいですよね。 そのために「Ticova人間工学椅子オフィスチェア」を候補に入れている貴方は、素晴らしい眼 ...

続きを見る

-WING(Affinger5)
-

© 2020 Affingerの教科書 Powered by AFFINGER5