【Diver図解マニュアル】最低限必要な8つのプラグインと設定解説

2020年9月29日 2020年10月14日

ワードプレステーマの「Diver」で利用すべきプラグインを9つを紹介します！
設定方法も併せて載せていますので、まだインストールしていないものがあればこの記事を参考に設定してみて下さい。

Classic Editor
Contact Form 7
EWWW Image Optimizer
Google XML Sitemaps
PS Auto Sitemap
Smart Slider 3
Table of Contents Plus
WebSub/PubSubHubbub

8つのプラグインの役割と重要度

8つもインストールするのが面倒という人に向けて、役割と重要度について表にしました。

プラグイン	重要度	役割
Classic Editor		投稿画面を旧エディターへ変更します。Diverの投稿画面は旧エディターの方が使いやすいです！
Contact Form 7		読者からのお問い合わせページを簡単に作れます。
EWWW Image Optimizer		アップロードした画像を軽くして、サイト表示を早くします。
Google XML Sitemaps		Googleのクローラーにサイトを認識してもらいます。
PS Auto Sitemap		読者用のサイトマップを簡単に作成できます。
Smart Slider 3		スライダーを作成するプラグインです。
Table of Contents Plus		目次を自動的に作成します。
WebSub/PubSubHubbub		記事投稿時にGoogleに認識してもらいます。

最低でも【Classic Editor】【Google XML Sitemaps】【WebSub/PubSubHubbub】の3つを入れてから投稿をしましょう！

各プラグイン解説

プラグインのインストール手順

　プラグインのインストール手順はどのプラグインでも共通となりますので、必ずマスターしてください！

ワードプレスにログインしたら左のメニューより　プラグイン→新規追加　をクリックしてください。

下記画像の赤枠部分にプラグイン名を入れて検索します。

探しているものがあれば、今すぐインストールをクリックします。

インストールが終わったら有効化をします。

有効化をするだけで完了するものもあれば、設定が必要なものもありますのでプラグイン毎に解説します。
似たような名前のプラグインも多くあり、思っていたのと違う動作をすることもありますので、必ず紹介しているものをインストールしてください。

Classic Editor

重要度

Diverを利用するのであれば必ず入れてほしいプラグインです。
投稿画面を旧エディターに戻してくれます。Diverの入力補助機能も旧エディターの方が操作しやすいです！

Classic Editorの設定方法

Classic Editorはインストールして有効化すれば完了です。
特に設定は必要ありません。

投稿→新規追加　で下記のような画面になっていれば問題ありません。

このような画面になっていなければ、設定→投稿設定をクリックします。

デフォルトエディターをClassic Editorになっているか確認してみて下さい。

Contact Form 7

重要度

Contact Form 7はお問い合わせページを簡単に作成できるプラグインになります。
サイトのPVが増えてくるとASPから問い合わせがあったり、迷惑メールが届いたりします。
Googleアドセンス（Googleから広告が配信され、クリックされると報酬となる）の審査でも必須になりますので、すぐではなくてもどこかのタイミングでは設置することをオススメします。

Contact Form 7の設定方法

インストールして有効化をします。
プラグイン→インストール済みプラグイン　をクリックし、Contact Form 7の設定をクリックします。
上に新規追加とありますのでクリックします。

下記の画面が出てきますので、タイトルには「コンタクトフォーム」と入力します。デフォルトで入力されている文字は一度全て削除します。

削除した部分に下記の文字列をコピペしてください。

<div class="contact">
<div class="name">
<div class="form_title">お名前<span>必須</span></div>
<div class="form_area">[text* your-name]</div>
</div>

<div class="address">
<div class="form_title">メールアドレス<span>必須</span></div>
<div class="form_area">[email* your-email] </div>
</div>

<div class="title">
<div class="form_title">題名</div>
<div class="form_area">[text your-subject] </div>
</div>

<div class="message">
<div class="form_title">メッセージ本文</div>
<div class="form_area">[textarea your-message] </div>
</div>
[submit "送信"]
</div>

入力してから右上にある保存をクリックします。
すると下記のコードが表示されるのでメモ帳などにコピーしておきましょう。

ワードプレスのトップに戻り、固定ページ→新規追加　をクリックします。

タイトルとパーマリンクは任意の文字列を入れます。先ほどコピーした文字列は投稿画面のテキストをクリックしてから貼り付けます。最後に公開をクリックして完了です。

EWWW Image Optimizer

重要度

このプラグインをインストールすると、画像をWEB表示用に最適なサイズまで軽くしてくれます！
ページの表示速度が遅いと離脱の要因となり、Googleの評価が低くなります。
画像を多く使うサイトでは必須のプラグインとなります！

EWWW Image Optimizerの設定方法

インストールして有効化します。
設定→EWWW Image Optimizer　をクリックします。

基本タブのメタデータを削除にチェックが入っていなければクリックしてチェックを入れ、下の保存を押します。

続いて　メディア→一括最適化　をクリックします。
最適化されていない画像をスキャンするをクリックしてください。

画像が多いと最初は時間がかかるかもしれませんが、一度やってしまえば次回以降は画像を登録した際に最適化されます。

Google XML Sitemaps

重要度

このプラグインはGoogleのクローラー（世界中のウェブページを巡回して更新されてないかをチェックするロボット）へサイトの情報を伝える役割をしてくれます。
この作業をしないとクローラーはどのページが追加されたのかなど最新情報を把握しにくくなってしまうというものです。

Google XML Sitemapsの設定方法

インストールして有効化します。
設定→XML-Sitemap をクリックします。設定画面を下にスクロールしていきます。
Sitemapコンテンツで下記にチェックが入っているか確認してください。チェックがなければクリックしてを入れて下さい。

サーチコンソールへアクセスし、左のサイトマップをクリックします。
新しいサイトマップの追加の部分に
sitemap.xml
と入力して送信をクリックします。
下記画像のようにステータスが成功しました、と表示されれば完了です！

PS Auto Sitemap

重要度

PS Auto Sitemapはユーザー用のサイトマップを自動で作成してくれるプラグインです。
当ブログでのサイトマップもこちらで作成しています。

【私の夢はペンギンでした】のサイトマップ

PS Auto Sitemapの設定方法

インストールして有効化します。
ワードプレスメニューの設定→PS Auto Sitemap をクリックします。

下記のコードをコピーします。

固定ページ→新規作成　で入力をしていきます。
ページ名は「サイトマップ」としていますが、読者がわかりやすいように変更しても問題ありません。
入力モードをビジュアルではなくテキストで先ほどのコードを貼り付け公開をクリックします。

固定ページ→固定ページ一覧　をクリックすると公開したサイトマップがありますので、マウスを持っていきます。（クリックはしません）
下にURLが表示され、post=●●●という部分の数字を覚えておいてください。

再度、設定→PS Auto Sitemap をクリックします。
サイトマップを表示する記事という部分へpost=●●●の部分の数字を入力して、変更を保存をクリックします。

　変更を保存の上にあるスタイルの変更でデザインを変えることが出来ます！

当ブログのサイトマップは付箋にしています。

Smart Slider 3

重要度

Smart Slider 3はファーストビューで記事をスライダー表示することの出来るプラグインです。
当ブログでは採用していませんが、ニーズは多いので解説していきます。

Smart Slider 3の設定方法

インストールして有効化します。
ワードプレス管理画面より、設定の下にあるSmart Sliderにマウスを持っていき、Dashboardをクリックします。

ここでスライダーを作成するのですが、全て英語で若干複雑なので別の記事で紹介します。~~（2020.9月執筆中）~~

関連記事【Diver図解マニュアル】Smart Slider 3 の設定詳細

2020.10.4

ファーストビューで記事のスライドがあると一気にプロっぽいサイトになります。定番のカスタマイズですが、初心者は設定が複雑で挫折してしまうことが多いです。この記事で詳細に解説します！...

スライダーを作成したら、Diverオプション→ファーストビュー　をクリックしてカスタムを選択し、スライダーのコードをテキストモードで貼り付けて変更を保存で完了です。

Table of Contents Plus

重要度

Table of Contents Plusは投稿した記事へ目次を自動的に作成してくれるプラグインです。
一度設定すればすべての記事に対応してくれる為、非常に便利です。
ユーザービリティも上がるので、早めにインストールしておきましょう！

Table of Contents Plusの設定方法

インストールして有効化します。
設定→TOC+　をクリックします。

基本設定をカスタマイズしていきます。
表示条件は見出しタグ（h2,h3,h4,h5～）の数がいくつ以上ある時に目次を作るかという設定になります。
個人的には3つがオススメです。
コンテンツタイプはpost（投稿）のみにしています。pageは固定ページになりますが、私はチェックを入れていません。
見出しテキストはお好みの文言に変更できます。

下にスクロールすると上級者向けとありますが、こちらは変更しなくてOKです。
最後に設定を更新をクリックします。