こんな方におすすめ
- ワードプレスで色々な機能が欲しくなってきた
- 集客・マネタライズにも力を入れたい
- サイトの訪問者がどのような行動をとっているか見て修正を加えていきたい
- HTMLやCSSの知識はまだまだだけど、ストークでワードプレスの使い方はマスターしたし、ある程度の知識もついてきた
- 次のステップに挑戦したい
ワードプレスのテーマを変更したいけど、テーマ変更に慣れていないから不安！
このような方のために、STORK(ストーク)からAffinger5WINGへの移行方法と経過をわかりやすくまとめていきます。
ストークを約1年間利用してきましたが、物足りなくなってきた点が出てきたので、Affinger5 WINGに移行することにしました。
ストークからAffinger5WINGへの移行をした理由
-
【感想】ワードプレステーマ ストークから複数サイト可に変更！
続きを見る
Contents
1 バックアップを取る
BackWpupまたは、UpdraftPlus Backupsなどのプラグインを使ってでサイトのバックアップを取ります。
テーマ変更で今まで作ってきたサイトになにかあっては大変なこと！
BackWpupは（私には）複雑で難解だったため、UpdraftPlus Backupsを選びました。
UpdraftPlus Backupsはとても簡単で使いやすくオススメです。
UpdraftPlus Backupsでバックアップを取る時に参考にしたサイト。
プラグインの設定方法まで詳しく書かれています。
エックスサーバーを使用している場合
バックアップがサーバー側でされていますが、ファイルのデーター取得は有料です。
詳しくはこちらから。
２ アフィンガー５WINGを購入
アフィンガー５に心を決めたら、いざ購入！
私はお得な「Affinger5 WING Pack３」を購入しました。
クレジットカードかペイパルでお支払いです。
３ アフィンガー５WINGを導入
ダウンロードしたファイルを開けて確認
テーマ購入後、登録したメールアドレスにメールがすぐ届くので、そこからダウンロードします。
（ダウンロードは１，２分くらい）
ダウンロードしたファイル「affinger_pack3.wing」の中にある、「Wordpress」と書いたファイルを開きます。
（かなり文字化けしていますが、Wordpressだけはわかります。）
このワードプレスのファイルには、ZIPファイル（affinger5.zipとaffinger5-child.zip)が2つとテキストファイルの3つが入っています。
（Zipファイルは解凍せずそのままで）
導入したいウェブサイトのテーマに追加する
アフィンガー５（affinger5.zip)と子テーマ(affinger5-child.zip)、どちらが先でもいいので外観→テーマからファイルをアップロードします。（Zipファイルは解凍せずに！）
両方アップロードできたら、子テーマのみ「有効化」します。
（この画面「新規追加」からアップロード）
子テーマを有効化して、ホームページを見てみると、もうAffinger5の初期画面になっているはず！
ポイント
有効化ボタンを押す前に、隣のライブレビューボタンをポチッとすると、テーマを変更した時の見え方を確認したり、有効化する前にヘッダー画面やウィジェットを変更することができます。
良ければ「有効化して公開」しましょう。
初期の色で黒と灰色のみですが、ストークでアップロードしていたサムネイルや画像の表示も問題なし。
CSSなどを大幅に変えず、ほとんどそのままストークを使っていたので、サイトの乱れはありませんでした。
文章も問題なく読めます。
スマホはどうでしょうか。
シンプルですが、サイトの崩れはありません。
アフィンガー５WING導入後、やっておきたい基本のカスタマイズ
新しいワードプレステーマ を導入したけど、この後どうすればいいのか不安！
１パーマリンクの確認
テーマやカテゴリー変更後、エラーがでてしまわないように、パーマリンクの設定は確認しておきましょう。
このサイトがわかりやすく説明しているので参考にしてください。
２ サイトのカラーなど選択
「Affinger５管理」という項目がWordpress管理画面トップの左下にあります。
「はじめに」のトップにすることが丁寧に書かれています。
・キャッシュの削除
・パーマリンクの更新
はマストです。
基本的にAffinger5 WINGの外観を整える時は、「Affinger5管理」と「外観」にある機能を利用し、カラーやサイズ、ヘッダーの設定、サイドバーの管理、メニューなどを配置・調整などを行います。
Affinger5 WINGの記事制作もクラッシックで対応する必要があります。
このAffinger5管理の機能に目を通して、どんなことが可能なのか一つずつ見て行きましょう。
３ デザインを自分で考えるのが面倒！サンプルを使う場合
デザインに時間をかけたくない！という場合は、アフィンガー５の「デザインサンプル」の利用がオススメです。
デザインサンプルには以下があります。
affinger5およびEX版専用
Note, Pinky, Happy Diary, Lupine, Youtuber, Youtuber 2, Tidy
Affinger5EX版専用
mocha, Inazuma, Start Up
全てのWING（Affinger5)のサンプルの確認はこちらからどうぞ。
注意ポイント
サンプルダウンロード前：下準備
アフィンガー５のデザインサンプルを使うには、以下のプラグインが必要です。
・Customizer Export / Import （datファイル用のプラグイン）
・Widget Importer & Exporter（ウィジェット用のプラグイン）
この二つのプラグインをプラグインの新規追加からアップロードしておきましょう。
いよいよスティンガーストアからお好きなサンプルを選び、利用規約にチェックを入れて、ダウンロードします。
私の場合は、Tidy をダウンロードしました。
Tidyを選んだ理由
・サンプルサイトを触ってみた感じわかりやすかった
・ブログをカテゴライズして見やすくするためには、Tidyのサンプルが一番合っているようだった
色々な記事を書くブログには、このTidyは名前の如く、綺麗に記事を整理整頓して見せてくれるようです。
選んだサンプルをダウンロードすると、
・カスタマイザー用
・ウィジェット用
・テーマ管理用
この３つのフォルダーと、ご利用前に必ずお読み下さい.txtが入っています。
（フォルダー名が文字化けしても、開けてみたら一目瞭然。）
カスタマイズ用ファイル ／ Customizer Export/Import
カスタマイズ用ファイルを開くと上の写真のように「affinger5-child-export.dat」が入っています。
このファイルをワードプレスにインポートします。
そして、外観 → カスタマイズ画面に「エクスポート／インポート」が追加されているのを確認。
「ファイルを選択」にて「カスタマイザー用」フォルダ内にある「affinger5-child-export.dat」をインポートします。
ウィジェット用ファイル ／ Widget Importer&Exporter
次に、ウィジェット用のファイルを開くと、「wing-wp.com-sample-3-widgets.wie」があります。
これをダッシュボード画面のツールからWidget Importer&Exporterでファイルを選択し、ウィジェットをインポート(Import Widget)」しましょう。
サンプルサイト表示
これであなたのサイトには、Wingのサンプルが反映されます。
私の場合はTidyを選んだので、ピンクが基調になりました。
（後で好きな色に調整可能です）
４ 初期設定：サイトの細々な調整は後にして、優先してやること！
さあ、Affinger5WINGにテーマも変更できましたが、これからやることがいっぱいです。
デザインよりもまず優先して済ませないといけないことは、
１ Affinger5管理 → Google連携／広告を設定
・アナリティクスコード（トラッキングID）
・サーチコンソールHTMLタグ
を記入します。
以下の参考サイトも大変わかりやすいです。
２ カテゴリーを再整理 （必要な場合のみ）
ある分野に特化したサイトを作っていきたい方、綺麗にカテゴリー分けをしておきたい方は、まずサイトの構成を整理しておきましょう。
３ メニュー再設定（必要な場合のみ）
メニューもわかりやすいように整理しましょう。
すでに整理されている方はスッキプして下さい。
４ 記事のリライトとチェック
記事の見え方をチェックし、必要なら訂正・リライト・追加をします。
アクセスの多い記事から整えていきます。
トップページよりも、読者が読む記事ページを優先して修正していきます。
広告も修正の必要があるか確認しましょう。
トップページの外観は時間があるときに徐々に整えていきます。
まとめ
・ストークからAffinger5 WINGの移行の仕方
・デザインサンプルの使い方
・優先すべき初期設定、優先順位
を見ていきました。
Affinger5 WINGの購入を決心するまで、
「ワードプレステーマを変えるべきか？どのテワードプレステーマ にするべき？！」
たくさんの時間リサーチをして悩みましたが、結果は大満足です。
ストークから移行する方、他のワードプレステーマ からAffinger5への移行を考えている方、さらに初めての有料ワードプレステーマ でAffinger5に挑戦される方。
ブログ歴が1年でプログラミングも全然わからない私でも使えますので、挑戦してみて下さいね！
私はお得な「Affinger5 WING Pack３」を購入しました。
