WING(Affinger5)

WING(アフィンガー5)の使い方補足マニュアループラグイン導入編ー

更新日:

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

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

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

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

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

 

 Wordpressのプラグインとは

プラグイン

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

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

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

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

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

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

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

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




 

 WINGで必須なプラグイン

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

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

記事編集を効率化

・TinyMCE Advanced

・AddQuick Tag

・ステ子

記事内に目次を挿入

・SUGOI MOKUJI

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

・WP Fastest Cache

・EWWW Image Optimizer

・Imsanity

SEO対策(サイトマップ)

・Google XML Sitemaps

 

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

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

 

 記事の編集画面は2種類

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

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

 

 WINGのビジュアルエディタ

WINGビジュアルエディタ

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

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

 

 WINGのテキストエディタ

WINGテキストエディタ

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

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

 

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

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

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

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

 

 TinyMCE Advanced

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

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

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説明

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

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

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

AddQuicktagイメージ

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

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

 

 ステ子

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

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

 

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

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

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

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

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

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

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

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




 

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

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

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

「SUGOIMOKUJI」では

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

ということが可能。

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

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

WINGでしか使えないプラグインですし、導入がオススメです。

 

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

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

無料で導入できて効果が高い、サイト表示速度を保つためのプラグインを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に伝えてくれるプラグインです。

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

-WING(Affinger5)
-

Copyright© LeGoon Blog-我が家の忘備録- , 2019 All Rights Reserved Powered by AFFINGER5.