AFFINGER6 デザイン済みデータ(スキン)|おしゃれなサイトを瞬時に作成

PR

本ページはプロモーションが含まれています。

AFFINGER(アフィンガー)に着せ替え

AFFINGER6(アフィンガー)への着せ替え、ワクワクしますね!高機能ゆえに設定項目が多いテーマですが、手順さえ間違えなければスムーズに移行できます。

失敗しないためのステップを分かりやすく解説します。

1. 事前準備(超重要)

既存のサイトからテーマを変更する場合、以下の2点は必ず行ってください。

  • バックアップを取る: 万が一の表示崩れに備え、プラグイン(UpdraftPlusなど)でバックアップを保存してください。
  • 旧テーマ独自のコードをメモ: Googleアナリティクスの計測コードや、テーマの独自設定(カスタマイザーの内容)は消えてしまうため、あらかじめメモしておきましょう。

2. AFFINGERのインストール手順

購入サイト(STINGER STORE)からダウンロードしたZIPファイルを準備してください。

  1. WordPress管理画面 > 外観 > テーマ を開く。
  2. 新規追加 > テーマのアップロード をクリック。
  3. 親テーマ(affinger.zipなど)を選択してインストール(※まだ有効化しません)。
  4. 続けて、子テーマ(affinger-child.zipなど)をアップロードしてインストール。
  5. 「子テーマ(WING-AFFINGER6 Childなど)」の方を有効化する。

[!IMPORTANT] なぜ子テーマを有効化するの? > 親テーマを直接カスタマイズすると、テーマのアップデート時に修正内容がすべて消えてしまうためです。必ず子テーマを使いましょう。

3. 初期設定とプラグインの導入

有効化した直後はデザインが真っさらな状態です。まずは土台を整えます。

保存ボタンの「儀式」

AFFINGERを有効化したら、まずは一度設定を保存する必要があります。

  • AFFINGER管理 > 保存 をクリック(何も変更せず、ただ保存ボタンを押すだけでOKです。これで内部のプログラムが正しく読み込まれます)。

専用プラグインの導入

AFFINGER専用のプラグイン(Gutenberg用ブロックプラグインなど)が同梱されている場合は、プラグイン > 新規追加 からインストールしておきましょう。

4. デザイン済みデータの活用(おすすめ)

「公式サイトのような綺麗なデザインにすぐしたい!」という場合は、公式が提供している「デザイン済みデータ」をインポートするのが一番近道です。

  1. 公式の「デザイン済みデータ配布ページ」から好きなデザインをダウンロード。
  2. 「データ引継ぎプラグイン」などを使ってインポートを実行。

5. 注意点:ウィジェットとメニューの再設定

テーマを変えると、サイドバーやメニューの配置がリセットされます。

  • 外観 > メニュー:メニューの表示位置を「ヘッダー」などに再チェック。
  • 外観 > ウィジェット:以前使っていたパーツが「使用停止中のウィジェット」に移動していることがあるので、配置し直してください。

Googleアナリティクスやサーチコンソールの再設定方法

AFFINGERはテーマの管理画面内に設定箇所が用意されているため、プラグインを使わずに簡単に連携できるのが強みです。

以下の手順で進めていきましょう。

Googleアナリティクス(GA4)の設定

現在は「GA4」が主流ですので、測定ID(G-から始まるコード)を使用します。

  1. 測定IDをコピー:
    • Googleアナリティクスにログイン。
    • 管理(歯車アイコン) > データストリーム > 自分のサイトを選択。
    • 右上にある「測定ID」(G-XXXXXXXXXX)をコピーします。
  2. AFFINGERに貼り付け:
    • WordPress管理画面の AFFINGER管理 > Google連携 / 広告 を開く。
    • 「Googleアナリティクス設定」の項目にある GA4測定ID の欄に貼り付けます。
  3. 保存:
    • 下にある 保存 ボタンをクリックして完了です。

Googleサーチコンソールの設定

サーチコンソールの設定は「HTMLタグ(metaタグ)」を使用する方法が最も簡単です。

  1. 所有権確認用コードを取得:
    • サーチコンソールにログイン。
    • 設定 > 所有権の確認 > HTMLタグ を選択。
    • <meta name="google-site-verification" content="文字列" /> というコードが表示されるので、content= の後ろの「”文字列”」部分だけをコピーします。
  2. AFFINGERに貼り付け:
    • AFFINGER管理 > Google連携 / 広告 を開く。
    • 「サーチコンソール設定」の項目にある サーチコンソールHTMLタグの表示(content=”…”) の欄に貼り付けます。
  3. 保存:
    • 保存 ボタンをクリック。
  4. 確認ボタンを押す:
    • サーチコンソールの画面に戻り、「確認」ボタンを押して「所有権を証明しました」と出れば成功です。

注意:以前のプラグインを停止する

以前のテーマで 「All in One SEO」 や 「Site Kit by Google」 などのプラグインを使って計測していた場合、設定が重複して二重計測(データが不正確になる)の原因になります。

[!TIP] AFFINGER側で設定が完了したら、重複している計測用プラグインは「無効化」することをおすすめします。サイトの読み込み速度向上にも繋がります。

正常に動いているか確認する方法

設定後、正しく反映されているか不安な場合は以下の方法でチェックしてください。

  • アナリティクス: 自分のサイトをスマホなどで開きながら、GA4の「リアルタイム」レポートを見て、ユーザー数が「1」以上になればOKです。
  • サーチコンソール: 反映までに数日かかることがありますが、「所有権を確認しました」と出ていれば設定自体は完了しています。

GA4で自分のアクセスを除外する方法

AFFINGER(アフィンガー)を使っていて、自分のアクセスがPV数やデータに混ざってしまうのは避けたいですよね。正確な分析をするための第一歩です。

GA4(Google アナリティクス 4)で自分のアクセスを除外するには、大きく分けて「GA4側の設定」と「ブラウザ拡張機能を使う方法」の2つがあります。

1. GA4の管理画面でIPアドレスを除外する

特定の場所(自宅やオフィス)から固定のWi-Fiを使っている場合に最も有効な方法です。

手順A:内部トラフィックの定義

  1. GA4の「管理(歯車アイコン)」→「データ収集と修正」→「データストリーム」を選択。
  2. 該当するサイトを選択し、「タグ設定を行う」をクリック。
  3. 「設定」セクションの「すべて表示」をクリックし、「内部トラフィックの定義」を選択。
  4. 「作成」ボタンを押し、以下の内容を入力します。
    • ルール名: 「自分のアクセス」など任意
    • traffic_type の値: internal(デフォルトのままでOK)
    • マッチタイプ: IPアドレスが次と等しい
    • 値: 自分の現在のIPアドレスを入力(CMANなどのサイトで確認できます)
  5. 「作成」をクリック。

手順B:フィルタを有効にする

定義しただけでは除外されません。

  1. 「管理」→「データ収集と修正」→「データフィルタ」を選択。
  2. 「Internal Traffic」というフィルタが「テスト中」になっているので、クリックして「有効」に変更して保存します。

2. ブラウザ拡張機能を使う(おすすめ)

「IPアドレスが変動する」「スマホ回線やカフェのWi-Fiも使う」という方は、こちらのほうが確実で簡単です。

Google アナリティクス オプトアウト アドオン

Googleが公式に提供しているChrome拡張機能です。これをブラウザに入れるだけで、そのブラウザからのアクセスは一切計測されなくなります。

  • メリット: 設定が数秒で終わる。IPアドレスを気にする必要がない。
  • デメリット: インストールしたブラウザにしか適用されない(スマホからの確認は除外されません)。

3. AFFINGER独自の「管理者除外」について

AFFINGERのテーマ管理設定に「管理者を除外する」といった項目を探される方も多いですが、基本的にはGA4側の設定や上記のアドオンが優先されます。

もしプラグインの「All in One SEO」などを使っている場合は、そのプラグインの設定内に「管理者のアクセスをトラッキングしない」というチェックボックスがあるため、併せて確認しておくとより安心です。

注意点:反映の確認

設定後、GA4の「リアルタイム」レポートを見て、自分のアクセスが消えているか確認してください。反映には少し時間がかかる場合があります。

補足: スマホからのアクセスも除外したい場合は、特定のIPアドレス(Wi-Fi)をGA4で除外するか、広告ブロックアプリ(AdGuardなど)で自分のトラッキングをブロックする設定が必要です。