テーマ初期設定 設定マニュアル

【AFFINGER5】ゼロからやるべき初期設定手順を分かりやすく解説

更新日:

このページにたどり着いたってことは、当サイトと同じWordPressテーマ「AFFINGER5」ユーザーですよね!きっと。

 

WordPressテーマ「AFFINGER5」の魅力のひとつに、テーマ全体の詳細設定が集約している管理画面「AFFINGER5 管理」がありますよね。ここで、ほぼ9割近くの設定は完結できてしまう優れものテーマです。

 

今回、AFFINGER5のテーマ設定情報を公式サイトやWebサイトでかき集めて、試行錯誤しながら実践した初期設定を備忘録として書き記しておきたいと同時に、これからAFFINGER5愛用していくあなたに共有できたらと執筆しています。

 

記事を書き始めるまでの初期設定を段落ごとでまとめているので、ぜひ参考にしてください。

こんな方におすすめな記事

  • WordPressテーマ「AFFINGER5」をアップロードする段階から初期設定を知りたい!
  • 一緒に「これは入れておくべき!おすすめWPプラグイン」も解説付きで知りたい!
  • ザックリ「最低限これはやるべき初期設定」だけを知りたい!

 

Ⅰ.環境設定

AFFINGER5を購入後にダウンロードできる「AFFINGER5」と「AFFINGER5子テーマ」を、WordPressにアップロードしていきます。

AFFINGER5

 

WordPressへAFFINGER5をアップロード

 

step
1
WordPressダッシュボードから「外観」>「テーマ」に進み、「新規追加」をクリックします。

AFFINGER5,初期設定1

 

step
2
「テーマのアップロード」をクリックして、ZIPファイルの「AFFINGER5」と「AFFINGER5 Child」をアップロードします。

AFFINGER5,初期設定2

 

テーマを有効化する

 

step
3
2つのテーマをアップロードできたら「AFFINGER5 Child」のテーマを「有効化」しましょう。

AFFINGER5,初期設定3

 

このステップで、WordPressにAFFINGER5子テーマが実装されました。

では早速、AFFINGER5管理設定をしていきましょう。

 

注意ポイント

この記事を公開してから1ヶ月経ち、より使いやすく見やすいユーザービリティーを考え、収益化も設定改善しています。当初の設定以上にリライトしていますので、ぜひ参考になさってみてください。

Ⅱ.AFFINGER5管理設定

僕がデフォルト設定をより使いやすく、見やすく、ユーザビリティを考えたカスタマイズを説明していきます。

タイトル冒頭に絶対やっておきたい設定は「◎」、おすすめしたい設定は「〇」、後でも良い設定は「△」で記しています。ぜひ参考にしてみてください。

 

WordPressダッシュボードより、「AFFINGER5 管理」というメニューをクリックして設定に入ります。

 

はじめに

◎1.WorpPressプラグイン「Classic Editor」をインストールして有効化する

AFFINGER5設定はじめ

 

WordPressはver5.0から「何者…ですか!?」というくらい大変貌してしまいました…。未だに僕も旧verを使っていますが、AFFINGER5も旧verのみ対応しているので、このプラグインをインストールしないと始まりません・・。

AFFINGER5はじめに2

SHIN
WordPressダッシュボードから「プラグイン」>「新規追加」をクリックして、キーワードに「Classic Editor」と入力後、「インストール」>「有効化」してください。

 

◎2.「保存」を1回クリック

AFFINGER5はじめに1

SHIN
「保存」を1回クリックすることで初期値設定してくれるので、まずは初期値に設定しましょう。

 

〇3.AFFINGER5公式マニュアルサイトの確認

AFFINGER5管理はじめに2

SHIN
いろんなテーマを使ってきた僕ですが、ここまで細かく設定マニュアルサイトがあるテーマは初めて。非常に親切です!マニュアルサイトに入るにはパスワードが必要ですけど、AFFINGER5管理画面に載っています

AFFINGER5公式マニュアルサイト

 

△4.Twitter「@WPSTINGERさんをフォロー」

すでにTwitterアカウントを持っているなら、ぜひフォローしておきましょう。

テーマやプラグインの更新情報をリアルタイムでTwitterタイムラインにツイートしてくれます。もちろん僕もフォロー済みです。

 

デザイン

〇1.PC閲覧時のサイトの幅

AFFINGER5デザイン

SHIN
デフォルトは1060pxでしたが、僕は「1114px」にして横幅を広げています。理由は投稿記事終わりに「Googleアドセンスを横並びに表示させる最適な横幅」であるから。

AFINGER5では、Googleアドセンス広告を横並びに表示させる簡単な方法があるので、また別の記事でお話しますね。

 

△2.サムネイル画像設定

AFFINGER5管理デザイン1

SHIN
このサムネイル画像設定は、ハッキリ言って「好み」ですよね。僕はサムネイル画像を丸くしたデザインが、単純に好きだったことと、オリジナル感も出るので丸く設定しています。

 

◎3.フォントのサイズ

AFFINGER5デザイン1

SHIN
フォントサイズは重要な設定ですね。訪問ユーザーに読みやすく、ストレスを与えない非常に大切なファクターなので。特に「スマホビューで読みやすい」を基準に設定していきましょう。

ちなみに、現在このサイトのフォント設定は画像の通りです。読みやすさを追求した設定にしましょう。

 

△4.フォントの種類

AFFINGER5デザイン

SHIN
続いてフォント種類。ここはあまりこだわらなくて良いと思ってます。「ゴジック」か「メイリオ」でも十分ですし。唯一僕が設定しているのは、h2~3・ウィジェットボタン箇所の「Noto Sans」。

ちなみに、表示速度が遅くなる要因でGoogleフォントは使っていないです。

 

トップページ

◎1.記事一覧

AFFINGER5トップページ

SHIN
デフォルトでサイドバーに「新着記事」が表示される設定になっているので、僕は「非表示」にしています。ただ、この設定をしても表示されることがあるようで・・。確実に非表示させるなら、この記事を参考にしてください。
AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

 

投稿・固定記事

◎1.アイキャッチ設定

AFFINGER5投稿・固定記事

SHIN
ここで「アイキャッチ画像を全記事有効」「アイキャッチをタイトル下表示」の2つにチェックを入れています。アイキャッチは大事なので、フル活用しましょう。

 

○2.この記事を書いた人

AFFINGER5投稿・固定記事1

SHIN
この記事を書いた人=サイト管理人として紹介した方が、訪問者は覚えてくれるので表示した方が良いです。僕は表示プラス「最新記事」も別タブで見えるように設定しています。

 

ヘッダー

◎1.ヘッダー設定

AFFINGER5ヘッダー

SHIN
このヘッダー設定では、トップページh1タグを「サイトタイトル」にするようにしています。h1はサイト名で設定するというのは、トップページをSEO最適化にするための1つの重要な設定ですね。

 

SNS設定

○1.OGP設定&Twitter設定

SHIN
SNS設定でアカウント登録できるのは「Facebook」と「Twitter」。すでにアカウントがあれば、Facebookは「fd:admins」、Twitterは「@以降のID」を入力すれば、簡単にアカウント登録ができます。ここでアカウントがないなら、必須ではないので後で設定しましょう。
Facebook登録ページ Twitter登録ページ

 

◎Google連携/広告

AFFINGER5Google連携広告

SHIN
解析ツール「Googleアナリティクス」「サーチコンソール」をサイトに連携させる設定です。この2つはサイト解析では必須ツールなので、この段階で連携させておくことをおすすめします。

そこで、Googleアカウントを取得して2つともにアカウントを作っておく必要があるので、解説サイトを参考に進めてくださいね。

 

会話・ファビコン等

△1.会話風アイコン

AFFINGER5会話風アイコン

SHIN
会話記事は、僕も多様していますけどアクセントにすごく便利。アイコンは8種類登録できます。まだ画像が用意ができていなければ、後で設定すれば良いので飛ばして次に行きましょう。

 

その他

○テーマのアップデート更新通知(β)

AFFINGER5テーマのアップデート更新通知

SHIN
AFFINGER5は、機能追加であったり修正などで都度進化してくれます。アップデートは常に最新にすることをおすすめします。そこで、アップデート通知を「有効化」するために、一度購入ユーザーページに記載しているパスワードをここで入力していきましょう。

他には、公式Twitterアカウント「@WPSTINGER」でも告知してくれます。

 

 

Ⅲ.WPプラグインインストール

記事をより書きやすく効率化したり、SEO最適化、スパム対策、表示速度アップなどまず入れておきたいプラグインの紹介です。

 

まず入れておきたいプラグイン8選

AddQuicktag

AddQuicktag

ポイント

  • 蛍光ペンやボックス、枠などの装飾をボタン一つで呼び出せる
  • 会話ボックスで、Aさん⇔Bさん、Bさん⇔Cさんなど複数パターンもボタン一つで呼び出せる
  • 指定した広告(アフィリエイト広告やアドセンス広告)もボタン一つで呼び出せる

WordPressでHTMLタグ直接記事に入力する場合、わざわざテキストモードに切り替えなきゃいけないですよね・・・。

しかも、HTMLコードはたいてい「長い」ですよね。コピペですら面倒・・入力なんてもっての外!です。

 

このプラグインは、長いHTMLコードに分かりやすく名前(ラベル名)を付けておき、投稿画面のテキストエディタから瞬時に呼び出せる。つまり3倍~5倍近くの作業時短になるし、いちいちテキストへHTMLコードをコピペするようなストレスもなくなります。

参考にしたい記事

 

 

Akismet Anti-Spam(デフォルトインストール済)

Akismet Anti-Spam

ポイント

  • スパムとされるコメントを自動的に判別分類してくれる

僕もそうですけど問い合わせフォームを開放している場合が要注意。記事が増えてサイト規模が大きくなってくると、一日数十通、下手したら数百規模のスパムメールがサイトを攻撃してきます・・・。

このプラグインはデフォルトで入っているのですけど、有効化していないときに大変なスパムメールに悩まされた記憶があります。

 

またスパムであるか無いかの判断不明の場合は、サイト管理者の最終チェックを求めてくれるので安心。

参考にしたい記事

 

 

All In One SEO Pack

All In One SEO Pack

ポイント

  • 簡単な設定で内部SEO対策ができる
  • 解析サイト「Googleアナリティクス」「サーチコンソール」と連携可能

このAll In One SEO Packは、WordPressの「設定」にある項目まですべてになってくれる本当に「All In One」なプラグイン。

ですが、AFFINGER5管理でも「Googleアナリティクス」や「SNS」などの設定ができるので、こういった重複した設定はAFFINGER5で設定していきます。

 

ただ内部SEO対策の部分では、本当に細かく最適化できるので重宝するプラグインです。

参考にしたい記事

 

 

Broken Link Checker

Broken Link Checker

ポイント

  • 外部サイトのリンク切れを自動検知してお知らせしてくれる

サイト閉鎖などはごく稀ですけど、コンテンツ紹介や動画貼り付けなどで記事を書くことは多々ありますよね。まさにこの記事もそう。

そこで、この紹介記事や動画などのリンクが突然切れてしまうことってあります。そんなときにこのプラグイン。リンク切れを決まったサイクルでサイト内を巡回~検知して、サイト管理者へお知らせしてくれます。

 

たくさんある記事一つひとつリンク切れチェックなんて・・・不可能ですよね。絶対入れておきたいプラグインです。

こちらを参考にどうぞ♪

 

 

TinyMCE Advanced

TinyMCE Advanced

ポイント

  • WordPress投稿画面のビジュアルエディタを拡張してくれる

WordPressの投稿画面上にズラーっと並んだメニューやボタンが増えて、主に「文字色やサイズ」「リンク挿入」「フォント変更」などたくさんエディットできるようになります。

このプラグインは無いと話にならないくらい重宝しますので、絶対入れておきたいプラグインです。

参考にしたい記事

 

 

Google XML Sitemaps

Google XML Sitemaps

ポイント

  • サイトマップを自動生成して検索エンジンへこちらから通知してくれる
  • クローラーへ通知するURLに優先順位をつけて送信できる

通常は記事を書いて公開してから、検索エンジンクローラー(GoogleやYahoo!など)が定期的に巡回してくれるまでウェブ上で認識してくれません。つまり検索エンジンにも表示されないってことです・・・。

ですがこのプラグインは、記事を公開すると同時に「こちらから検索エンジンへ自動的に通知をする」ので、おのずとウェブ上に記事が表示されるスピードが速いわけです。

 

またサイトマップに載せるページも指定できるので、サイト内の重要なページのみを集中してクローリングしてもらうこともできます=無駄なクロールを減らしつつ、評価して欲しいページを推すことができるということ。非常に便利です。

参考にしたい記事

 

 

Jetpack by WordPress.com

Jetpack

ポイント

  • スパム防止、表示高速化、ページダウン通知などたくさんの機能が設定できる
  • 瞬時に解析表示をしてくれる(アクセス、コンテンツ別アクセス、外部リンクアクセス、リファラ)

All In One SEO Packのように、たくさん充実した機能を設定できるプラグインです。

ただ注意して欲しいのは、必要な機能のみ設定するようにしましょう。AFFINGER5でできる機能と重複するものを設定しても、動作が遅くなるデメリットになるので。

 

簡易的に表示してくれる解析は非常に助かりますね。確かにGoogleアナリティクス、サーチコンソールの方が解析レベルは上ですけど、単純にアクセスやアクセス元、どのリンクを踏んだのかがすぐ分かるのは便利ですよ。

参考にしたい記事

 

 

EWWW Image Optimizer

EWWW Image Optimizer

ポイント

  • 画像ファイルを画質を落とさずに自動で圧縮して最適化してくれる

画像はアイキャッチ、プロフィール、記事などたくさん利用しますよね。そこでこのプラグインが本領発揮。

プラグインを有効化しておくだけで、メディアに取り込んだ画像ファイルを何もすることなく自動的に圧縮してファイル容量を軽くしてくれます♪

 

画像容量が軽くなることで、ページ表示速度が速くなり、ユーザービリティ向上に繋がる。離脱率、回遊率が上がればサイト評価も上がる。つまり間接的にSEO効果にも繋がっているわけです。僕の中では必須であるプラグインの一つですね。

参考にしたい記事

 

僕がおすすめするWordPressを立ち上げたら、まず入れておきたいプラグイン8選でした。

ここで一つ注意して欲しいのは、「コレはいい!」と何でもインストールしないことですね。

プラグイン容量でサーバに付加がかかれば、それだけ転送時間もかかり、表示速度にも影響してしまうので必要なプラグインだけをインストールするというのは、この先も念頭に入れておいてね♪

 

 

まとめ

AFFINGER5の管理設定は、細部まで細かく設定できるので時間はかかります。ただ、最初に一度きちんと設定を決めてしまえば、その後は大きく変更することも少ないので、記事執筆に集中できますからね。

 

ぜひ快適で楽しいAFFINGER5生活を、僕とともに送っていきましょう♪

何か不明点やご意見があれば、気軽にコメントお待ちしています。

ではまた(*´▽`*)ゞ

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-テーマ初期設定, 設定マニュアル
-

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.