Affinger

CocoonからAFFINGER5への移行手順【ダウンロードから記事修正まで】

スポンサーリンク

どうも。まっきー(@makky_study)です!

先日、毎日更新3ヶ月突破記念ということで有料テーマのAFFINGER5を導入しました。

Cocoonからの移行ということで色々調べてたのですが、あまり良い記事が見つからずかなり苦戦しました。

この経験をもとに、AFFINGER5導入にあたって、必要な設定をまとめましたので参考にしてみてください!(12月現在も移行作業中ですので随時追加していきます)

本記事の対象読者は以下の方です。

  • Cocoon を使用していてAFFINGER5に変えることをほぼ決定している方
  • もしくはすでに変更した方

 

本記事を読んでわかること

  • AFFINGER5のインストール手順
  • CocoonからAFFINGER5に移行する際の注意点・やるべきこと
まっきー

AFFINGER5のインストールから記事執筆まで、Cocoonから完全に移行できるよう行うべきことを説明します!

メモ

ブロックエディタ(Gutenberg)を使用しており、デザインはAFFINGER 5のテンプレを使用します。

では早速、AFFINGER5のインストール方法から説明します。

(購入済みの人は飛ばしてください)

AFFINGER 5インストール手順

インストールはめちゃくちゃ簡単です。

まず、万が一に備えてCocoonのバックアップを取っておきましょう。

バックアップが完了したらAFFINGER5の公式サイトに移動します

AFFINGER5購入はこちらから!

「ご購入はこちら」をクリック

支払い等の各種手続きをします。

注文履歴→ダウンロードへと進みます

ダウンロードしたzipフォルダを解凍(開く)し、以下のようなフォルダがあることを確認

WordPressの画面で、「外観」→「テーマ」→「テーマのアップロード」と進む

「親テーマ」ー>「子テーマ(child)」の順にアップロード

外観にWINGが追加されているはずです

子テーマ(Child)を「有効」にしたら完了です!

お疲れ様でした。

CocoonからAFFINGER 5への移行手順

ここからは、移行するにあたって必要な初期設定を行っていきます!

やることはざっくり以下の通り。

順番に解説していきますね♪

ToDo

  • 初期設定(パーマリンク等)
  • Googleアナリティクス、サーチコンソールの設定
  • 必要なプラグインのインストール
  • テンプレデザインのインストール

初期設定

初期設定は以下の二つ

  • AFFINGER5管理の設定更新
  • パーマリンクの設定

AFFINGER5管理の設定更新

AFFINGER5管理をクリックし「保存」を1回クリック。

パーマリンクの設定

WordPressの管理画面で「設定」->「パーマリンク」->「変更を保存」をクリック。

Googleアナリティクス、サーチコンソールの設定

GoogleAnalyticsやサーチコンソールを再度設定する必要があります。

以下の記事に詳しく説明してあります。参考にしてください。

【AFFINGER5】Googleアナリティクス・サーチコンソール設定方法

続きを見る

必要なプラグインのインストール

  • Gutenberg用プラグイン
  • STINGERタグ管理(購入特典)必須ではない
  • TinyMCE Advance
  • CustomizerExport/import
  • Widget importer & Exporter
  • Classic Editer(必要な方のみ)

最低限これだけあれば十分です。

それぞれインストールして、有効化してください。

  1. GutenbergとSTINGERタグ管理(購入特典)はzipファイルからのインストール
  2. その他はプラグイン検索からのインストール

となっています。①のみ解説します。

WordPress側:「プラグイン」->「新規追加」->「プラグインのアップロード」へと進む

AFFINGER5購入時にダウンロードしたフォルダへ移動ー>「Gutenberg用プラグイン」へ進む

st-blocks.zip」をドラッグ&ドロップー>「有効化」

ブロックエディタに以下のような項目が追加されればOKです。(下の方にある)

STINGERタグ管理プラグインは「特典」に入っています。

同様に.zipファイルをアップロードして、有効化してください。

とりあえず今はこれだけあれば十分です。

テンプレデザインのインストール

デザインを一から考えるのは面倒なので、テンプレを使いましょう。

公式サイトへ移動し、気に入ったデザインをダウンロードしましょう。

私は、以下のデザインをダウンロードしました。

ダウンロードしたファイルを解凍すると以下のようなフォルダがあります。

WordPressの管理画面へ移動します。

「ツール」->「Widget importer & Exporter」へ移動(さっきインストールしたプラグイン)

ウィジェット用というフォルダに入っている「wing-wp.com-sample21-widgets.wie」を選択して、「ウィジェットをインポート」をクリック

※できなかったらコピペしてください。

「外観」ー>「カスタマイズ」へ進みます

「エクスポート/インポート」をクリック。

ダウンロードしたフォルダの中にある「カスタマイザー用」を開く。

中にある「.dat」拡張子のファイルを選択ー>インポート

以上でテンプレデザインのインストールは完了です。

※テンプレデザインを使用したからと言って、見本のようなサイトにはなりません。実際は下記の写真のようになります。

これで準備は完了です!

ここから長い長い記事修正の旅が始まります。

詳しく解説していきます!

記事修正

テーマを変更すると、Cocoonで使用できていた吹き出し等のデザインが崩れます。(というよりほとんどのデザインは消えます....)

これらを全記事、修正する作業に入ります。

以下、2種類に分けて解説していきます。

  • 記事修正の際につまづいたポイント
  • AFFINGER5の機能を活用した新しい設定

それぞれリンクをつけておくので、必要に応じて使ってください!

かなり分量が多くなるので、設定方法や対処方法は別の記事で紹介することがあります。

最初に以下の点を頭に入れておくと、つまづいた時に対処しやすいと思います。

頭に入れておいてほしいこと

全体のデザイン(色など)に関する問題は、下記二つのどちらかで基本的に解決します。

  • AFFINGER5管理画面
  • カスタマイズ

ふきだしの使い方

吹き出しの設定方法、デザインのかえ方など、以下の記事にまとめてあります。

Affinger5 会話風吹き出しの使い方とカスタマイズ方法

続きを見る

ボックスの使い方

AFFINGER5でのボックス表示方法は2種類あります。

使い方、ボックスの見本を下記の記事にまとめてあります。

【AFFINGER5】ボックスの使い方とボックス一覧(ブロックエディタ対応)

続きを見る

ブログカード作成方法

AFFINGER5のブログカード作り方、カスタマイズ方法を解説

続きを見る

プロフィール再設定

プロフィールが下記のようになっていると思いますので、プロフィールカードに変更する方法をご紹介します。

WordPressの管理画面から「ユーザー」->「プロフィール」へ進みます。

プロフィール情報、プロフィール写真を追加し「プロフィールを更新」をクリック。

外観」->「カスタマイズ」へと進みます。

オプションカラー」ー>「サイト管理者紹介」->プロフィールカードに変更に✔をいれます

以上でプロフィールカードへの変更が完了しました!

「もう少し作りこみたい」という方は、WINGマニュアルに細かな設定が載っていますので、参考にしてください。

サイドバーの再設定

サイドバーもおかしな感じになっていると思いますので、修正方法を紹介します。

WordPressの管理画面から、「外観」->「カスタマイズ」へと進みます。

ウィジェット」->「サイドバーウィジェット」をクリックして、並べたい順番に並べなおしてください。

カエレバ・ヨメレバのCSS再記述

カエレバ・ヨメレバを使っていた方は、CSSの設定が消えています。

再度CSSを記入しなおしましょう。

WordPressの管理画面から、「外観」->「カスタマイズ」へと進みます。

「追加CSS」をクリックし、「CSSコピペでOK!カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]」に記載されているCSSコードをコピペしましょう!

目次の作成

Cocoonでは自動で目次が設定できましたが、AFFINGER5ではプラグインを使用します。

詳しい設定・カスタマイズ方法は、下記の記事を参考にしてください。

AFFINGER5 目次の作り方、カスタマイズ方法を解説

続きを見る

【SEO】メタディスクリプション・タイトルの書きなおし

AFFINGER5は内部SEO対策がされているため、プラグイン「All in One SEO Pack」を使っていた方は、有効化を解除する必要があります。

その前に、メタディスクリプションを書きなおす作業が必要になります。(メタディスクリプションが消えてしまうため)

全てのタイトル・メタディスクリプションを変更するまで、All in one SEO Packプラグインは消さないようにしましょう。

AFFINGER5のメタディスクリプション等

AFFINGER5の方にメタディスクリプションを書き写したら消す。という方法で行いました。

ひたすら手作業で書き換えました。

もっと効率の良い方法があれば、教えてください!

Googleアドセンスのリンク貼り直し

Googleアドセンスの広告を掲載していた方は、再度貼りなおす必要があります。

【AFFINGER5】アフィンガー5でのGoogle AdSenseの最適な貼り方!場所によって収益が変わります。」というサイトでわかりやすく紹介されています。

参考にしてください。

ボタンリンクの作成方法

【AFFINGER5】1分でできる!光るボタンの使い方を解説します

続きを見る

アフィリエイトリンクの貼り方

アフィリでボタンリンクを使う方法をまとめてあるので、良かったら参考にしてください!

【AFFINGER5】ボタンを使ってアフィリエイトリンクを作成する方法

続きを見る

ブログデザインの変更

トップページを見ていただければわかるのですが、少しブログデザインを変更しました。

Tuszukiさんの「アフィンガーのおすすめカスタマイズ法を解説【Tsuzuki Blog風デザイン】」をベースに変更しました。

大変参考になるので、興味のある方は是非見てみてください!

新着記事を消す方法

何もせっていしないと、下図のように「新着記事」が無駄に表示されてしまいます。

この表示を無くす方法を紹介します。

①「AFFINGER5管理」ー>「トップページ」ー>「記事一覧」をクリック

②非表示にしたいところにチェックを入れてください。

③「save」を忘れずにクリックしましょう。

以上です。

終わりに

AFFINGER5は超高性能の有料テーマです。

ですが、その分設定が細かいので初心者には大変だと思います。

本記事が、少しでも役に立てばと思います。

他にも気づいたことがあったら随時修正していきます。

スポンサーリンク

-Affinger

© 2021 まきろぐ Powered by AFFINGER5