AFFINGER 副業ブログ

Cocoonからアフィンガー6へ移行してみた!

Cocoonからアフィンガー6移行イメージ

無料のワードプレステーマ「Cocoon(コクーン)」から「AFFINGER6(アフィンガー6)」に移行したいけど、移行して本当に大丈夫?

という声をけっこう聞くので、ここは一つやってみようと思い立ち、自分で試してみました!

「Cocoon(コクーン)」から「AFFINGER6(アフィンガー6)」移行前にやっておいた方が良いこと、移行の仕方、移行後の一連の作業を記事にしました。

参考にどうぞ。

エックスサーバー経由でCocoonを使用している方へ

エックスサーバー経由で「Cocoon(コクーン)」を使用している方も、今回記事の移行方法で「AFFINGER6(アフィンガー6)」に問題なく移行できます。

 

CocoonからAFFINGER6の移行が不安だ・・・。

事前にやっておく事と、移行後の作業内容が分かっていれば問題なし!

 

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行して気づいた事

実際に自分で、Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行して気づいた点です。

Cocoon→AFFINGER6に移行して気づいた点

  1. 各記事のメタディスクリプションが消えた(→事前にコピー)
  2. メニューが表示されなくなった(→修正簡単)
  3. 余計なウィジットがでてくる(→修正簡単)
  4. プロファール画像がなくなった(→修正簡単)
  5. 各記事のTOP画像がなくなった(→修正簡単)
  6. Cocoonパーツがなくなった(→AFFINGER6パーツを試しながら修正)

面倒だわ〜。と思いました?

書き出すと結構あるように思えますが、事前の準備と軽度の修正で移行できます。

では、早速移行していきます。

 

CocoonからAFFINGER6に移行する前の準備

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行後ビックリしたのは、メタディスクリプションが消えることです。

(※メタディスクリプションとは・・・google検索時タイトルの下にでてくる文章のことです。)

 

各記事、メタディスクリプションをメモやワードなどにコピペしておきます。

CocoonからAFFINGER6に移行した後、メタディスクリプションをコピペしておくと、復帰が簡単にできるので作業をすることをオススメします。

 

CocoonからAFFINGER6に移行する

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行に移行します。

やり方は簡単。

Cocoon→AFFINGER6へ移行ステップ

  1. 「外観」→「テーマ」からテーマを追加する
  2. パーマリンクを更新

です。

ワードプレス内「外観」タグからテーマを追加する

まずは、AFFINGER6のテーマを追加します。

AFFINGERテーマを入れるイメージ

「外観」→「テーマ」→「テーマ」タグ内の「新規追加」→「テーマのアップロード」ボタンから、AFFINGERのテーマを選択してインストール。

(※子テーマも同じようにインストールして、子テーマを有効化します。)

 

パーマリンクを更新

パーマリンク画面

AFFINGER6のテーマとAFFINGER6の子テーマをインストールしたら、パーマーリンクを更新。

 

これで、AFFINGERテーマは導入できました。

 

AFFINGER6の購入の仕方〜導入の詳しい方法はコチラをみてね。

AFFINGER6(アフィンガー6)導入詳細記事↓

ワードプレステーマAFFINGER6(アフィンガー6)[購入〜設定方法]

続きを見る

ワードプレステーマAFFINGER6(アフィンガー6)[購入〜設定方法]

 

AFFINGER6のデザイン済みデータを導入

AFFINGER6に移行するだけだと、レイアウトを作り込むのにちょっと手間がかかるので、AFFINGER6デザイン済みデータ(フォーマット)を導入します。

AFFINGER6デザイン済みデータ(フォーマット)を導入すれば、すぐにデザインが整います。

(AFFINGER6用)のデザイン済みデータをダウンロード

まずは、AFFINGER6用のデザイン済みデータをダウンロードします。

公式デザイン済みデータの種類

AFFINGER6で使用できる、公式AFFINGER6デザイン済みデータ(フォーマット)
SIMPLE START、Tidy2、MUKU、cloud、Study Bear

AFFINGERデザインテンプレート-SIMPLE START

AFFINGERデザインテンプレート-Tidy2

AFFINGERデザインテンプレート-MUKU

AFFINGERデザインテンプレート-cloud

AFFINGERデザインテンプレート-Study Bear

今回は、「cloud」を使用してみました!

まずは、公式HPよりデザイン済みデータページへ。

デザイン済みデータ配布ページ(β)

arrow_downward

ダウンロード画面

注意事項を読んで3ヶ所チェック。

arrow_downward

AFFINGER公式デザインフォーマット

好みのテンプレートをダウンロードします。

 

AFFINGER6のデザイン済みデータ(フォーマット)の詳しい設定方法はコチラをみてね。

AFFINGER6(アフィンガー6)のデザイン済みデータの導入方法↓

10分で分かる!「アフィンガー6」デザインテンプレートの設定方法[簡易編]

続きを見る

10分で分かる!「アフィンガー6」デザインテンプレートの設定方法[簡易編]

 

インポート用プラグインをインストール

無料・購入プラグインを合計3個インストールします。

必要なプラグインを入れるステップ

  1. 「カスタマイザー」「ウィジェット」反映用無料プラグインは2個インストール。
  2. テーマ管理をインストールするのには公式プラグイン「データ引継ぎプラグイン」を購入(2980円)して1個インストール。

「カスタマイザー」「ウィジェット」反映用無料プラグインは「プラグイン」→「新規追加」から追加をします。

  1. 「カスタマイザー」反映プラグイン→ Customizer Export/Import(無料)
  2. 「ウィジェット」反映プラグイン→ Widget Importer & Exporter(無料)

AFFINGER公式有料データ引き継ぎプラグインはコチラからインストールします。

データ引き継ぎプラグイン(2980円)→データ引継ぎプラグイン

 

先ほど入れたプラグインを使って、デザイン済みデータを反映させる

先ほど無料・購入プラグインを使って、3ヶ所のデータをインポートすれば完成です。

インポートするデータ場所は3ヶ所

  1. カスタマイズ
  2. ウィジット
  3. AFFINGER管理

カスタマイズデータを反映する

カスタマイズインポート画面

「外観」→「カスタマイズ」をクリック。

一番下にでてくる「エクスポート/インポート」をクリック。

インポート項目で、さきほどダウンロードした、デザイン済みデータを選択。

「インポート」ボタンをクリック。

 

ウィジットデータを反映する

ウィジットインポート画面

「ツール」→「Widget Importer&Exporter」をクリック。

Widget Importer&Exporter画面で、さきほどダウンロードした、デザイン済みデータを選択。

「ウィジットのインポート」ボタンをクリック。

 

AFFINGER管理データを反映する

AFFINGERデータ引き継ぎ画面

「AFFINGER管理」→「データの引き継ぎ」をクリック。

arrow_downward

これで、デザイン済みデータ(フォーマット)は反映されました。

 

設定詳細記事はこちらを見てね。

AFFINGER6(アフィンガー6)デザイン済みデータ導入記事↓

10分で分かる!「アフィンガー6」デザインテンプレートの設定方法[簡易編]

続きを見る

10分で分かる!「アフィンガー6」デザインテンプレートの設定方法[簡易編]

 

CocoonからAFFINGER6に移行後の修正をする

修正前と修正後

では、AFFINGER6移行後のデータを修正していきます。

今回は公式AFFINGERデザイン済みデータ「cloud」を反映させてみました!

本体の修正

本体を修正する箇所

  1. 余計なウィジットを削除する
  2. メニューの表示を直す
  3. プロファール画像を再度設定する

余計なウィジットを削除する

要らないウィジットを削除していきます。

(※ウィジットとは、「検索窓」「プロファールカード」などのパーツのことをいいます。)

ウィジット画面

「外観」→「ウィジット」ページに。

「ウィジット」ページの上にでてくる「ライブプレビューで管理」ボタンをクリック。

arrow_downward

ウィジットの要らない削除

要らないウィジット(大体要らないウィジットはサイドバーにあります。)の箇所を選びながら、「shift」+右クリックをクリック。

左メニューにウィジット一覧が表示されるので、要らないウィジットを削除。(大体要らないウィジットはblockという名前で表示されます。)

 

メニューの表示を直す

メニューの表示を修正します。

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行後、メニュー自体は移行していますが、メニューの位置を再度指定する必要があります。

メニュー設定画面

「外観」→「メニュー」でメニューページを表示。

編集する「メニュー」を選択し「選択」ボタンをクリック。(フッターメニューなどなければ、新しくつくります。)

arrow_downward

もうすでに、メニュー内容は決まっていると思いますので、メニュー設定箇所の「メニューの位置」を選択します。

ヘッダーメニューであれば、「ヘッダーメニュー(現在の設定)」にチェックを入れて、「メニューを保存」ボタンをクリック。

(※同じように、フッターメニュー、スマホハンバーガーメニューも設定していきます。)

これで、メニューが表示されます。

 

プロファール画像を再度設定する

プロファール画像を再度設定していきます。

プロファールカード設定画面

「外観」→「カスタマイズ」をクリック。

「オプション(その他)」→「プロファールカード」をクリック。

arrow_downward

プロファールカードの選択画面で、アバター画像(150×150px以上)の画像を設定。

ついでに画像の上に設定できるヘッダー画像も設定していきます。

ブログイメージ・ご自身のイメージにあう、横長の写真を選択します。

最後に右上にでてくる「公開」ボタンをクリック。

これで設定できました。

その他

タブ式メニュー修正

AFFINGER公式デザイン済みデータ(フォーマット)は、タブ式メニューをおおく使用しているので、こちらも修正していきます。

タブカテゴリー画面

「AFFINGER管理」→「トップページ」をクリック。

トップページの設定ページで「タブ式 カテゴリー記事一覧」項目があるので、記事カテゴリーIDを入れて「save」ボタンをクリック。

(※ちなみにですが、記事カテゴリーIDは、「投稿」→「カテゴリー」でカテゴリーページでIDの数字が分かります。)

流れるお知らせの削除・変更

挿入コンテンツ設定画面

「AFFINGER管理」→「トップページ」をクリック。

トップページの設定ページで「挿入コンテンツ」項目で文章削除、もしくは文章修正します。

修正が終わったら「save」ボタンをクリック。

 

これで、本体の修正は完了です。

ここからは、各記事の修正内容です。

各記事の修正

各記事の修正箇所

  1. ディスクリプションを再度設定
  2. 各記事にTOP画像を入れる
  3. AFFINGER6のお好みのパーツを入れる

メタディスクリプションを再度設定する

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行後は、なぜかCocoonで設定していた、メタディスクリプションが消えます。

先に各記事に設定していたメタディスクリプションのコピーを、AFFINGER6(アフィンガー6)に移行後各記事にメタディスクリプションに設定していきます。

メタディスクリプション画面

記事の下の方に「メタディスクリプション」という項目があります。

こちらに、コピーしておいたメタディスクリプションをペーストして、各記事更新してください。

(※120文字以内が推薦されています。)

 

各記事のTOPにアイキャッチ画像が入るように設定をする

各記事のTOPにアイキャッチ画像が入るように設定をしていきます。

各記事の右メニューの「アイキャッチ関連」項目の「写真クレジットにサイトURLを使用」にチェック。

「設定に関わらずアイキャッチ挿入」にチェックを入れます。

 

また記事に入れるのは、自動で入るアイキャッチ画像ではなく、ご自身の好きな画像を配置する場合は「アイキャッチ関連」箇所にはチェックを入れないで、お好みの画像を手動で配置します。

 

AFFINGER6のお好みのパーツを入れる

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行後、段落(h2、h3・・・)、文章、画像、余白は問題なく移行されました。(文字のボールド(太文字)とかも、そのまま移行されます。)

ただ、コクーンで設定していたスタイルパーツは残念ながら移行されませんでしたので、再設定が必要です。(Cocoonのタグの2カラム設定なども外れます。)

 

Cocoonは、他のテーマと構造が違うから移行は難しいと聞いたことはありますが、自分でやってみて、スタイルパーツは無くなってしまいましたが、意外とうまく移行できたように思います。

 

AFFINGER6は、ブロックエディター派でも、クラシックエディター派でも、それぞれに十分なパーツがそろってます。

AFFINGER6で、色々なパーツを楽しんで設定してみてください。

 

AFFINGER6(アフィンガー6)のブロックエディターパーツ↓

AFFINGER6ブロックエディタで使えるパーツ
AFFINGER6ブロックエディタで簡易設定できるパーツ

続きを見る

AFFINGER6(アフィンガー6)のブロックエディターパーツ

 

AFFINGER6(アフィンガー6)のクラシックエディターパーツ↓

AFFINGER6記事作成パーツ一覧まとめ-クラシックエディタ編
AFFINGER6記事作成パーツ一覧まとめ[クラシックエディタ(ブロック)バージョン]

続きを見る

AFFINGER6(アフィンガー6)のクラシックエディターパーツ

 

まとめ

Cocoon(コクーン)からAFFINGER6(アフィンガー6)に移行は、Cocoonが他のテーマと内部構造が違うから面倒と聞いていましたが、結構すんなり移行できました。

ただ、Cocoon専用のスタイルパーツは、無効になってしまうので再設定が必要です。

とはいえ、AFFINGER6のパーツは、ブロックエディターでもクラシックエディターでも、使い切れないほどあるので、楽しんで再設定してみてください!

 

関連記事
アフィンガーを使った感想
「アフィンガー6はできることがおおい?」3年間使った感想のまとめ[特典付き]

続きを見る

ワードプレステーマAFFINGER6(アフィンガー6)[購入〜設定方法]

続きを見る

AFFINGER6は初心者には難しいのか?
AFFINGER6は初心者には難しいといわれるが本当か?

続きを見る

 

TOPページに戻る

 

-AFFINGER, 副業ブログ

error: このコンテンツのコピーは禁止されています。