アフィンガー5から6へアップデート[画像解説付き完全版]

FuwaFuwaShoChan BLOGの運営はアフィンガー5というテーマを使用しています（有料）。

プロブロガー？（要はアフィリエイトで生活できるレベルの人？）は良く利用されている、あれです。さりとて、キチンと運営していくためには、定期的なメンテナンスは欠かせません。（とて、子供のメンテで精いっぱいなんじゃがの…）

ということで今回は、ずっと放置プレイだったアフィンガー6へのアップデートを画像付きで解説していきます（「画像付きで解説」これよくマネするやつね）
とて、「アフィンガーええやん」とわたくしのサイトから購入していただけると、特典かどうかはさておき、わからない箇所とか、DMいただけると時間はかかりますが、わかる範囲でお答えさせていただきます。

自分の環境の場合、AWSでブログやポートフォリオを運営しているので、バックアップは容易です。
以下、アフィンガー6アプデの全体の作業のおおまかな流れです。

アフィンガー6アップデートやること

という感じでOKかと思います（もうちょっとまとまらんか・・）

アフィンガーのアップデートとはいえ、単に「ダウンロード！インストールぅ！」で全然終わりません。
ですので、初心者の方にはちと厳しいかもしれないので、作業の流れの議事録を残しておきます。（バックアップはAWSで、あまり用途がないかもしれませんが...）

 

アフィンガー6にアップデートすることで最低限抑えておくこと

アフィンガー6のアップデートの際、最低限抑えておきたい項目は以下になります。

辺りを抑えておけば、一通り、運用中のサイトの再現は可能になると思います。（アフィンガー6の新たなテーマによってデザインの多少の差異は出ます）

また、本記事でもプラグインなどの対応も紹介しますが、アップデートの際はダウンロードしたりとかでアフィンガー公式サイトに行くと思うので、説明も一通り目を通すことをオススメします。

バックアップ

ガチ運用では、ルーチン的にバックアップは取っておくべきですが、メジャーバージョンアップの際には不具合が発生する可能性が高くなるので必ずバックアップは取るようにしましょう。

ここは、レンタルサーバー屋の違いもありますし、環境によって方法も違います。僕のブログの環境はAWSを利用していますので、そこでのバックアップ方法の記事リンクを貼っておきます。

[AWS]WordPressとアフィンガー6アプデ前にバックアップ

続きを見る

 

WordPress6へアップデート

アフィンガー6はWordPress6に正式に対応しているとのこと。であればWordPressもアップデートしない理由はありません。バックアップ済みのはずなので、メジャーアップデートを実行しましょう。

ここであえて言う必要はないかもしれませんが、WordPress管理画面より、「ダッシュボート」→「更新」メニューでWordPressのアップデートを行うことができます。

 

カスタマイザーバックアップについて

アフィンガー6にアップデートすることで、カスタマイザーが初期化されてしまいます。なので、できるだけ手作業はイージーミスにもつながるのでインポート/エクスポートができればベストです。

そこで「Customizer Export/Import」を利用してみましたが、どうやらアフィンガー5と6の互換性はない模様です。なのでここは「へーそうなんかー」で次にいきましょう。

※カスタマイザーは手作業になるので、多少手間がかかります。

 

アフィンガー6ダウンロードとインストール

さて、アフィンガー6テーマが無ければ始まりませんので、ダウンロードとインストールをしたいと思います。

※アフィンガー公式サイトでログインされていることが前提です。

ログイン後、ホーム画面で「購入ユーザー限定」リンクをクリックします。

購入ユーザーページへ遷移されると思います。

購入ユーザーページ内を少しスクロールすると、「商品ページ」セクションの「AFFINGER6」のリンクがあります。

リンク先に遷移後、「ACTIONに関するご了承事項」セクションの下あたりに「AFFINGER6版」と「子テーマ-ACTION（AFFINGER6）」の両方をダウンロードします。

AFFINGER6をダウンロードした後は、自分のWordPress管理画面でインストール作業をします。

「外観」→「新規追加」をクリックします。

「テーマのアップロード」をクリックすると、「ファイルを選択」が表示されますので、先ほどダウンロードした「AFFINGER6」と「子テーマ」をファイル選択します。

「今すぐインストール」で各インストール後、テーマ一覧にて、「AFFINGER6」と「子テーマ」が表示されるはずです。

これで、インストール自体は完了です。

 

ライブプレビューでカスタマイザー作業

アフィンガー6のインストール後は、すぐに有効化してしまうと、レイアウト崩れが起きた状態になってしまいます。「じゃあどうすんねん？」ということですが、テーマ画面からの「ライブプレビュ－」を開きつつ、現行のアフィンガー5のカスタマイザー値を見ながら、同じ値を手作業でしていく必要があります。（カスタム数が多ければちょっと手間。実際に手間だった・・）

「ライブプレビュー」はクリックする時「Ctrl」ボタンを押しながら、別タブで開くことができます。（※デフォルト別タグかもですが。Ctrl押しながらは確実）

その後、アフィンガー5でのカスタマイザー値を確認しつつ、別タブで開いたアフィンガー6とのカスタマイザー値の整合性を合わせる様に各項目ごとに確認していき、調整してください。

※下記画像はAFFINGERの親を選択してもーてますが、「CHILD」（子テーマ）の方のライブプレビューで作業を行ってください！！（スクショ間違いごめんなさい！）

各カスタマイザーで調整を行った後、ほぼ、現在進行中のデザインに寄せることができると思います（よほど複雑なことをしていなければですが）。

リアルタイムでサイトのレイアウトを確認しながら作業ができるので、「これで一旦大丈夫かな」と思う所で「有効化して公開」でアフィンガー6のテーマに切り替えます。

テーマを有効化した後に、「外観」でテーマ一覧を確認します。「AFFINGER Child」が有効になっていればOKです。

ウィジェット作業

カスタマイザーである程度レイアウトが整ったら、テーマを有効化させるので、実質的には本番環境でアフィンガー6としてアップデートされた状態になります。

余談ですが、ウィジェット機能はアフィンガー5とWordPress5.9辺りからエラーが起きていて、ウィジェット機能が使えない状態でした。

カスタマイザー作業が終了すれば、ほぼ、サイトとしてのレイアウトを元に戻すことができているはずなので、アフィンガー6テーマを有効化した後は、ウィジェットで初期化されている箇所がないか、また微妙にレイアウトが変わっている箇所がないか確認し、もし、気になる所があれば、その辺りの調整が必要になります。

また、下記のアフィンガー6の対応状況も、この辺りは気にしておいた方が良いかと思います。

ウィジェットブロックエディター及びメニューブロックエディター、テンプレートエディター機能には非対応です（対応予定は未定です。）

ウィジェットのスクショはありませんが、僕の場合、プロフィールの画像とか、プロフィールリンクボタンが消去されている状態だったので、アフィンガー6版のプロフィールリンクガジェットを設置し、結果として同じ導線の形にしてみました。

アフィンガー6にアップデートしたからといって、以前と全く同じ状態にするというより、進化させる意味合いとして、デザイン調整する形もアリだと思います。

 

カスタムCSSとカスタムメソッド実装

カスタムCSSとカスタムfunctionについてもアフィンガー6を有効化した後は、初期化されています。
事前にテキストなどでソースコードをバックアップしておいて、再度、定義するような形でやればすんなりクリアできると思います。

この例はカスタムfunctionですが、google-recatchaをお問い合わせページだけ有効にする形をアフィンガー6アップデート後に再定義しました。

不要プラグイン無効

今回のアフィンガー6へのアップデートで不要になるプラグインや最新版へのアップデートが必要な模様です。※詳しくは公式マニュアルで。

自分は特にオプションでそれらのプラグインは購入していない（むしろ不要かな）ので、クレジット削除プラグインとタグ管理マネージャー3を無効化しました。

 

最後に

アフィンガー5からアフィンガー6のメジャーアップデート、不慣れな方がやろうとすると、中々骨の折れる作業かなと思いました。

サイト運営をしていくためには、こうしたメンテナンス作業も必須になってくると思うので、是非参考にしてみてください。（環境は多少違うと思うけども）

ちなみにアフィンガー6のオプション販売は必要ないと思います。（テーマさえ手に入れれば良いと思うので）