当サイト使用テーマ:「SWELL」を見てみる >>

【完全ガイド】WordPressテーマSWELLへの移行方法と初期設定|テスト環境でデザイン崩れの心配なし!

URLをコピーする
URLをコピーしました!
  • SWELLに移行したいけど手順がよくわからない!
  • 初期設定で失敗したくない!
  • SWELLの購入から初期設定まですべて教えてほしい!
  • 少しでもデザインを崩したくない

テーマを移行するときに必要な初期設定の忘れ記事が壊れてしまわないかが不安な方は多いと思います。

シバ犬

うっかりミスしたらどうしよう…

この記事ではSWELLを移行する際の手順を画像をふんだんに使ってわかりやすく解説しています。

この記事で解説する方法ならデザインを崩した状態で公開することなくテーマを移行できますよ。

しばゆー

やることは多いですが、1個ずつクリアすればむずかしくありません!

この記事でわかること
  • SWELLの購入・ダウンロード・アカウント登録方法
  • SWELLのインストール〜有効化の手順
  • SWELL移行後の各種初期設定

筆者は実際にこの記事で解説する方法でJINからSWELLへの移行を行っています。

この記事を読めば、どんな方でもSWELLへの移行を失敗することなく行うことができます。

※このブログ内の画像はタップorクリックで拡大できます。

記事の内容

WordPressテーマ【SWELL】を購入・ダウンロード・アカウント登録

まずはSWELLの公式サイトからWordPressテーマSWELLを購入します。

サブドメインにテストサイトを作成する

デザインが崩れた状態で公開したくない方は、テストサイトを作成しましょう。

デザインが多少崩れても構わないという方はこの項を飛ばしてもらっても大丈夫です。

テストサイト内で乗り換え後に本番サイトに載せ替えることで、ゆっくり乗り換え作業を行うことができます。

テストサイトは以下の2つを作成するようにしましょう。

  • 現在のサイトのバックアップ用
  • SWELLに乗り換えるための編集用

WordPressテーマ【SWELL】|インストールから有効化までの手順

SWELLのインストールから有効化までの手順は以下のとおりです。

インストール〜有効化の手順
  1. WordPressテーマ【SWELL】のインストール
  2. 乗り換えサポートプラグインをダウンロード
  3. 乗り換えサポートプラグインのインストール・有効化
  4. SWELL CHILD(子テーマ)の有効化

①WordPressテーマ【SWELL】のインストール

前項でダウンロードしたSWELLの親テーマと子テーマを、WordPressにインストールします。

この時点ではインストールだけです。

デザイン崩れは起きませんので安心してください。

先に親テーマをインストールしてから子テーマをインストールしてください。

両方とも手順は同じです。

STEP
外観ーテーマをクリック

WordPress管理画面の左側メニュー内の外観テーマをクリックしてください。

外観ーテーマをクリック
STEP
新規追加をクリック

画面上部の新規追加をクリックしてください。

STEP
テーマをアップロードをクリック

画面上部のテーマをアップロードをクリックしてください。

STEP
ドラッグ&ドロップまたはファイルを選択しインストール

ドラッグ&ドロップまたはファイルを選択でテーマをインストールしてください。

以下の画面が表示されれば完了です。

②SWELLへの乗り換えサポートプラグインをダウンロード

SWELLへの乗り換えサポートプラグインをインストールしましょう。

以下のテーマには乗り換えサポートプラグインが用意されています。

  • AFFINGER5
  • Cocoon
  • SANGO
  • STORK
  • THE THOR

SWELLを購入されている方であれば、SWELLERS’のマイページからダウンロードできます。

上記のテーマ以外の方はデザインが大きく崩れる可能性がありますが、テスト環境内で行えば公開される恐れは無いため、問題ありません。

STEP
マイページに移動

まずはマイページに移動しログインください。

>>SWELLERS’マイページ

STEP
SWELL製品ページへをクリック

下にスクロールしSWELL製品ページへをクリックしてください。

STEP
現在使用中のテーマの乗り換えサポートプラグインをクリック

現在使用中のテーマの乗り換えプラグインをクリックしてください。

これでPCのダウンロードフォルダに乗り換えサポートプラグインがダウンロードされます。

③SWELLへの乗り換えサポートプラグインのインストール・有効化

SWELLへの乗り換えサポートプラグインをインストール・有効化してください。

STEP
プラグインー新規追加をクリック

WordPress管理画面の左側メニュー内のプラグイン新規追加クリックしてください。

STEP
プラグインのアップロードをクリック

画面上部のプラグインのアップロードクリックしてください。

STEP
乗り換えサポートプラグインをインストール

ドラッグ&ドロップまたはファイルを選択から乗り換えサポートプラグインをインストールしてください。

STEP
プラグインの有効化

プラグインの有効化をクリックしてください。

④SWELL CHILD(子テーマ)の有効化

SWELL CHILD(子テーマ)を有効化しましょう。

前項でテスト環境を作られた方はテスト環境内で行ってください。

STEP
外観ーテーマをクリック

WordPress管理画面の左側メニュー内の外観テーマクリックしてください。

STEP
SWELL CHILD(子テーマ)を有効化

SWELL CHILD(子テーマ)を有効化してください。

必ずSWELL CHILD(子テーマ)であることを確認してください。

以上でSWELL CHILD(子テーマ)の有効化が完了しました。

SWELLの有効化後に必ずやっておくべき初期設定

SWELL有効化後に必ずやっておくべき初期設定は以下のとおりです。

SWELLの初期設定
  1. SEO SIMPLE PACKのインストール・有効化
  2. その他プラグイン(推奨・非推奨)の整理
  3. Googleアナリティクス、SearchConsoleの設定
  4. 外観のカスタマイズ
  5. 記事内装飾の修正
  6. SEO設定の引継ぎ
  7. Googleアドセンスの再設定
  8. アフィリエイトプログラムの設定

①SEO SIMPLE PACKのインストール・有効化

プラグインSEO SIMPLE PACKインストール・有効化します。

SWELLはSEO設定(SEOタイトルやメタディスクリプション)をプラグインで行います。

通常はテーマの中に機能が備わっていることが多いのですが、SWELLにはその機能が備わっていません。

SWELLから別テーマに移行したときに設定が消えないようにするため。

そのため、SWELLの開発者が開発しているSEO SIMPLE PACKを導入する必要があります。

導入方法は以下のとおりです。

STEP
プラグインー新規追加をクリック

WordPress管理画面の左側メニュー内プラグイン新規追加クリックしてください。

STEP
SEO SIMPLE PACKを検索

SEO SIMPLE PACK検索してください。

STEP
SEO SIMPLE PACKをインストール

今すぐインストールクリックしてください。

以下のプラグインですので間違えないようにしてください。

STEP
SEO SIMPLE PACKを有効化

有効化クリックしてください。

以上でSEO SIMPLE PACKの導入が完了しました。

SEO SIMPLE PACKでやっておくべき設定は後述します。

②その他プラグイン(推奨・非推奨)の整理

テーマによって相性の良いプラグインと悪いプラグインがあります。

もちろんSWELLも同様です。

非推奨なプラグインは極力使用しないことをおすすめします。

非推奨プラグインについては自己責任で使用してください。

③Googleアナリティクス、SearchConsoleの設定

GoogleアナリティクスとSearch Consoleの再設定を行いましょう。

④外観のカスタマイズを行う

次に外観のカスタマイズを行いましょう。

SWELLにはデモサイトが用意されており、着せかえデータも配布されています。

着せかえデータはSWELLを購入されている方であればだれでもダウンロードできます。

以下の公式ページにダウンロード方法データの反映方法が記載されているため、参考にしてみてください。

>>SWELLデモサイトのデザイン着せ替えファイル

その他細かな外観のカスタマイズ方法についてはSWELLの解説記事一覧ページ内で詳しく解説されています。

>>SWELLの解説記事一覧ページ

⑤記事内装飾の修正を行う

記事内装飾の修正を行ってください。

乗り換えプラグインのおかげである程度デザインを保つことができていますが、細かい部分でデザイン崩れが出ている場合があります。

JINからSWELLに乗り換えをした経験から、特に以下の装飾は注意したほうがいいと思います。

  • 空白
  • ふきだし
  • ボックス(枠)

乗り換えプラグインを無効化すると元テーマ専用の装飾が崩れてしまいます。

すぐでなくてもいいので、全記事をチェックして元テーマ専用の装飾SWELLで使用できる装飾に修正しておくのがオススメです。

⑥SEO設定の引継ぎを行う

SEO設定(タイトル・メタディスクリプション)の引き継ぎ設定をしましょう。

SEO設定の引継ぎについてパターン別に解説します。

  • テーマ側で設定していた場合
  • All in One SEOを使っていた場合

テーマ側で設定していた場合

テーマ側で設定していた場合は以下の方法で引き継ぎができます。

SEO設定の引継方法(テーマ)
  1. 乗り換えプラグインの機能を使う
  2. 手動で移し替える
  3. phpに引き継ぎコードを入力
乗り換えプラグインの機能を使う

乗り換えプラグインを有効化することでテーマ側で設定したSEO設定をSEO SIMPLE PACK側で出力されるようになっています。

乗り換えプラグインを有効化しておけば常にSEO設定を引き継いでいる状態になります。

プラグインを有効化しておくとページスピードが遅くなるため、いずれは手動またはコードでの設定に切り替えるのがおすすめです。

手動で移し替える

個人的にはこの方法が一番おすすめです。

記事の装飾を修正するときに一緒に変更するのが楽かと思います。

しばゆー

筆者自身も手動で行いました!

phpに引き継ぎコードを入力
シバ犬

乗り換えプラグインは無効化したい!
でも手動で変更はめんどくさい!

上記のような方にはphpに引継コードを追加する方法がおすすめです。

phpへのコード追加方法はSWELL公式の解説記事で詳しく説明されています。

>>テーマ乗り換え時にSEO設定を引き継ぐ方法

プラグイン「All in One SEO」を使っていた場合

プラグインAll in One SEOで設定していた場合は以下の方法でSEO設定の引き継ぎができます。

SEO設定の引継方法(プラグイン)
  1. phpに引継コードを入力

⑦Googleアドセンスの再設定

テーマを変更した場合、Googleアドセンスの再設定が必要です。

⑧アフィリエイトプログラムの設定

SWELLでは購入者限定でアフィリエイトプログラムを利用できます。

あなたのリンクを経由して購入されるだけで3,300円の報酬が支払われます。

忘れずに設定しておきましょう。

テストサイトから本番サイトにデータを移行

これまでテストサイトで行った編集内容を本番サイトに反映させましょう。

テストサイトを作成せずに行った方はこの項を飛ばしてもらってもOKです。

まとめ|SWELLを使いこなして楽しい記事執筆を!

以上がSWELLを移行する場合購入〜初期設定方法になります。

その他の細かい設定方法はSWELLの公式ページで解説されています。

ご自身調べながらカスタマイズしていってくださいね。

>>SWELLの解説記事一覧ページ

しばゆー

SWELLは記事執筆が楽しくなるWordPressテーマです!
よいSWELLライフを!

「ここがわからない!」という部分があればいつでもTwitter:しばゆー@shibayu_blogまで連絡してきてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

CAPTCHA


記事の内容
閉じる