WordPressテーマ『Diver』の使い方や初期設定を図解解説します

本記事はWordPressの有料テーマ『Diver』の使い方や初期設定を解説するマニュアルとなっています。

さっそくですが、WordPressのテーマを変更するときってすごくワクワクしますよね。

期待と不安に胸躍らせ、訪問者の少ない深夜にインストール作業を行うんですよね。

…期待と不安とか学校の入学式みたいですね。笑

今回は、私がWordPressの有料テーマ『Diver』をインストールしてから行った初期設定（基本カスタマイズ）をご紹介していきたいと思います。

本記事を読めばそんな疑問はすべて解決です。

WordPressテーマ『Diver』とは？

Diverは、ブログ初心者やwordPress初心者でも簡単に使うことが可能なWordPressテーマです。使いやすさと高機能の両立が図られています。高機能がゆえに価格が少し高いのですが、それ相応の機能があり、またブロガーが記事執筆に集中できる補助機能がまとめられています。

ちなみに、公式サイトに記載されている文言で、かっこいいなと思ったのは、

常に進化していくWordpressテーマだから完成予定は未定です。常に最善で最高のテーマであり続けるために、インターネットがなくならない限り、Diverはバージョンアップを続けていきます。そのスピード感とWeb技術・洗練されたデザインを実感できるのは、WordpressテーマDiverだけです。

「このテーマの完成予定は未定です。」というところがまたかっこよくないですか？

実際に、最終更新日は2020.8.12、最新バージョンは4.7.0とのことで、常に短いスパンでSEO対策をはじめ様々な機能が更新されています。

記事作成時の時点なので、最新情報やDiverの主な特徴を知っておきたい人は公式サイトをご確認ください。

公式サイト最新SEO対策済み!WordPressテーマ「Diver」

＼SEO対策、サイト回遊率、アフィ収益ぜんぶ解決／

『Diver』の初期設定（基本カスタマイズ）の方法

私はWordPressを始めた当初からCocoonを使用していました。なので今回テーマをCocoonからDiverへ変更しました。

かなりガラリをWordPressの管理画面の使用感が変わったので、多少戸惑っていたのですがそこはさすがDiver、すぐに設定方法が分かりました。

体系的にわかってきたので、初期設定の方法、僕なりのオススメの設定をご紹介します。

インストール後に最初に入れておくべきプラグイン

Diverは目次表示機能を持っていません。

なので、目次を表示させるためのプラグインを入れておきましょう。

Table of Contents Plus

プラグインを検索すればすぐに出てきますので、目次表示をしたい場合はインストールしましょう。

インストール後に最初に確認するべき箇所

Diverをインストールし有効化すると、管理画面の左サイドバーに以下のような「Diverオプション」項目が出現します。

Diver特有の設定は基本的にこちらで可能です。

こちらの設定を変更していきましょう。各項目、主に設定する項目だけを抜粋して説明していきます。

基本設定

メイン設定

記事のサムネイルの設定がない場合のサムネイル代替画像を設定します。

また、サムネイル画像遅延処理はチェックを入れておきましょう。サイトスピードの向上につながります。

ヘッダーメッセージ

ヘッダーの下の目立つ場所にテキスト＋リンクを貼り付けることができます。（Cocoonでいう通知設定）と同様です。

サイトの上部でどのページを訪れても基本は目立つので、ホットな記事の内部リンクを貼るとかアフィリエイトリンクを貼っておきましょう。

表示させるのは、全ページ、トップページのみ、投稿ページのみ、から指定することが可能です。

Google Analytics設定

こちらにアナリティクスのトラッキングIDを入力しましょう。

トラッキングIDは「UA-xxxxxxxxx-1」とかです。以下の手順で確認したパラメータの「UA」から始まる文字列のものです。

自分のブログに自分が訪れたアクセスをカウントしてもあまり意味ないので、管理者は除外するにチェックを入れています。

こちらの設定箇所にトラッキングIDを入力するだけでアクセス解析ができるようになります。

下記項目の「アクセス解析」にアナリティクスのコードを埋め込まないように注意しましょう。

2重にカウントされてしまいPV数が爆伸びします。

その下のAnalytics API設定は、特に必要ありません。アナリティクスを解析してアクセスの多い人気記事ランキングを作成したいときに活用します。

詳しくは、デモサイトにて確認してください。

公式サイト最新SEO対策済み!WordPressテーマ「Diver」

アクセス解析

上述の項目「Google Analytics設定」でトラッキングコードを入力している場合は、こちらの設定は不要です。

もしアナリティクス以外のアクセス解析を使用したい場合は、こちらに入力します。

もちろん、ここの設定の意図はアクセス解析だけでなく『</head>タグの直前：』『</body>タグの直前：』に何かしらのコードを埋めることができるという意図なのでアクセス解析以外のコードも貼り付け可能です。

広告設定

アドセンス広告を手動で挿入したい場合はこちらから設定します。

広告コードの例（ディスプレイ広告）を示しておきます。

このうち、赤文字で示した箇所「data-ad-client」のca-pub-から始まる文字列と、「data-ad-slot」に記載の文字列を入力しておきます。

その後、広告表示箇所を設定しましょう。

設定箇所は以下から選択が可能です。

• 投稿内上部
• 最初のH2の直前
• 2番目のH2の直前
• 3番目のH2の直前
• 投稿内下部
• moreタグ

上記で入力したdata-ad-clientとdata-ad-slotに合致した１つの広告が、全ての箇所で使えるので、

それぞれの箇所にウィジェットで広告挿入しなくても一括で設定が可能です。初心者にとっては非常に効率化できるのではないでしょうか。

一つの広告コードを使いまわしたくない場合は、下部の「広告個別設定」にて挿入したい場所に広告コードを入力します。

記事一覧インフィード広告についても細かく設定が可能です。

名称のとおり、トップ画面の記事一覧の中に広告を挿入します。

デスクトップ版のトップページですが、記事一覧の3つ目に広告が挿入されているの分かりますか？記事一覧に紛れているので、気づきにくいです。

Diverではトップページの記事一覧の形式は、以下より選択が可能です。

そのため、上記のうち自身が設定している表示方法で、インフィード広告を作成しましょう。

その後、適切な位置に広告タグを貼り付けます。

私の場合、記事一覧はリスト形式で表示させているので「インフィード広告タグ（リスト）」の箇所に広告タグを貼り付けました。

また、モバイル版はデスクトップの広告タグと分けることが可能なので、新たにインフィード広告を作成してタグを貼り付けてください。

これでデスクトップ版にもモバイル版にも、それぞれ適切な形の広告が貼り付けられます。

※モバイル版でもグリッド表示などがありますが、横幅が250px以下だと広告自体が表示されないようです。

投稿設定

表示設定

アイキャッチ関係

アイキャッチ関係の設定をしておきましょう。

見た目を意識するのであれば、投稿記事の上部にサムネイル画像が表示されるようにチェックを入れておきましょう。

その他はデフォルト値で構いません。

段落スペースと行間

段落スペースと行間については、好みの問題でもあるので、スマートフォンからの閲覧が非常に多いので、

デスクトップ版よりモバイル版の表示を考慮して設定しましょう。

その他の項目

画像遅延処理は、サイトスピードのためにチェック入れておきましょう。

その他は好みで良いです。

SNS設定

基本設定

Facebook、Twitter、instagramのURLを登録できます。

ここに入力すると、各SNSが次の記事、前の記事のすぐ下にフォローボタンが表示されます。

SNSボタン設定

投稿上部と投稿下部のソーシャルボタンの大きさと数を設定できます。

大きいと幅いっぱいに表示、小さいと中心に表示となります。

私の場合は、「小さい」にしています。

SEO設定

基本設定

基本的には、Diverのテーマを利用するだけで、内部SEO対策はほぼ完ぺきなのでデフォルトの状態で問題ありません。

もし詳細に設定したい場合は、デモサイトより確認ください。

DiverのSEO設定について

meta robots設定

こちらも基本的にはデフォルト値で問題ありません。

カテゴリーページやタグページなども検索結果に表示させたい場合は、noindexのチェックを外しておきましょう。

（あまり推奨されるものではありません。）

OGP設定

OGPというのは、Open Graph ProtocolといってSNS等でURLが共有された場合に表示されるタイトルやサムネイルのことだと思えばよいです。

ここでの設定が反映されるため、WEBページのタイトルやイメージ画像を正確に伝えることが可能になります。

FacebookやTwitterでの表示方法を選択します。

私はこのように設定したところ、Twitterでは以下のように表示されました。

ただしく反映されていることが確認できました。特にこだわりが無ければ、表示スタイルはsummary_large_imageで良いと思います。

入力補助設定

ここでは入力補助で使用する会話挿入時の画像の登録をあらかじめ行っておきましょう。

上記以外の、見出し、ボタン、バッジ、囲い枠、に関してはデフォルト値で構いません。

しいて言うなら、初期設定の色の位置を変えておけば、色を変更するためにポチポチする手間が省けます。

私の場合、バッジは「緑」を初期設定値にしています。なぜかというと、

参考【図解】WordPress有料テーマ『Diver』の使い方や初期設定を解説します

↑このようにリンクを挿入する際に緑を多用するからです。

色変更の手間が省けるのは地味にありがたいですよね。

※ファーストビューやフッターCTAは省略させていただきます。

ヘッダーボタン

ヘッダーボタンは４つ指定することが可能です。

ヘッダーボタンとは、モバイル版ならタイトルの下に表示される４つのアイコンを挿しています。

サイトの道しるべになるので、初期段階では代表的な４つのカテゴリを登録しておくと良いでしょう。

※2020年末に「わいろぐ」から「僕らの格安SIM」にサイト名を変更しました。

フッターメニュー

スマホの下部にメニューを表示させることが可能です。

背景色や文字色の設定は「外観→カスタマイズ」で行うことが可能です。

私のブログでは固定ヘッダを使用しているため、上下に出てくると鬱陶しいかなと思い、現状では使用していません。

↑変更し、固定ヘッダをなくして下部のメニューを配置しています。

人気記事【DIVER】ヘッダにメニューと検索アイコンを設定する方法（WordPressテーマ）

まとめ｜Diverの初期設定はこれでOK！

まずはこのあたりの設定さえ行っておけば、使える形にはなると思います。

私も最初はどこを変更したら何が変わるのかがさっぱりわからなかったので、これからDiverを使用する方に役立てればと思い、ざっと作成させていただきました。

初期設定さえ行っておけば、徐々に空いた時間でもう一歩踏み込んで、サイトカラーや見出しの形等を設定していけると思います。

「外観→カスタマイズ」へ進みましょう。サイトカラーが変わればさらに個性がでてき、愛着がわくと思います。

公式サイト最新SEO対策済み!WordPressテーマ「Diver」

人気記事WordPressテーマをCocoonからDIVERに変更してPV数が劇的にアップした

人気記事【Diver】やってみると簡単！CTAの作り方