【14個の手順】JINからSWELLへテーマ変更（移行・乗り換え）のやり方

悩む人

WordPressテーマJINからSWELLに変更する手順ややり方を詳しく知りたいです。

不安で仕方ないです。。

今回は、上記のお悩みに答えていきます。

SWELL導入する前に、バックアップをとること、現状サイトのメモを取ることは必須。

検討中の人は下記の記事もおすすめです。

必読：【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】

あいうえおLIFE

合計4時間は確保していくのがオススメ。

焦ってしまって、ブログ辞めたくなるレベルで取り返しつかないよりマシですね笑

作業は大変ですが、SWELLerへの道を丁寧に進んでいきましょう。

今日はどうぞ、最後までお読みくださいね。

＼ 乗り換えプラグイン完備 ／

SWELL公式サイトを見る

ブロックエディタでの書きやすさNo.1

1：SWELLの導入

STEP

SWELLのダウンロード

上記もしくは、購入確認メールのリンクからSWELLのダウンロード

STEP

SWELLの子テーマのダウンロード

＞https://swell-theme.com/download/swell-child/

SWELLの子テーマ

STEP

デモサイト一覧から、気にいったデザインを選ぶ

＞https://swell-theme.com/demos/

当サイトは、SWELL DEMO 05を選びました

STEP

SWELLERS'のマイページにログインして、デモサイトデータと乗り換えサポート用プラグインをダウンロードする。

＞https://u.swell-theme.com/mypage/

JINからSWELLへの乗り換えサポートプラグインを選びます

下準備が必要なければ、一気に手順の4：乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストールへ。

2：引き継ぐ追加CSSを修正

あわせて読みたい

【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】

上記の記事で、バックアップのためにメモしたCSSを修正します。

以下は、ぼくの備忘録となります（ご参考までに）。

もしもアフィリのボタンのアイコンを変更

もしもアフィリエイトの簡単リンクで、商品紹介をしていました。

JINのオリジナルアイコンで、「＞（矢印）」を入れていたので、下記に修正予定。

/*fontawesomeを文字の前に*/
  .easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    padding-right: 3px;
  }

上記の記事が、fontawesomeの使い方の説明がわかりやすいです。

ボックスナビの修正

ボックスナビを上記に入れてみる。

JINオリジナルアイコン→Fontawesomeに変更（下記は変更例）。

[jin_icon_academic]→<i class="fas fa-heartbeat"></i>

3：ヘッダーロゴ画像作成＆プラグインの見直し

ロゴ画像はCANVAで、1200×360（png）で作成しておく。

背景透過とPNG

上記の記事で、CANVAでロゴ画像を作成する方法が紹介されています。

ロゴサイズの修正【追記：2021/09/21】

記事内で、ヘッダーのサイズを1,200✖️360で作成したと書いた。

けど、1,200✖️180がちょうどよかったというオチ笑笑😂 pic.twitter.com/6OFZU5JFOW

— あいうえおLIFE@登録販売者✖︎ ︎WordPress ✖︎動画編集 (@pledge17uchs) September 20, 2021

上記のツイートのとおり、CANVAで「1,200×180」で作り直しました。

プラグインの修正

上記の公式マニュアルで、削除（停止）するプラグインと、導入するプラグインを決めます。

4：乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストール

jin-to-swell-1-1-1というzipファイルを、下記の手順で。

WordPress管理画面のプラグイン→新規追加→プラグインのアップロード→ファイルを選択。

Customizer Export/Importの着せ替えプラグインは、検索窓から。

5：SWELLテーマを２種インストールをして、有効化前に必要プラグイン導入と削除（または停止）

購入した本体テーマと、子テーマを外観→テーマ→新規追加から、インストール。

テーマを有効化する前に、下記を削除（停止）。

ewww、サイトガード、WordPress Popular Posts、Autoptimize、Contact Form 7、プラグイン「CARAT」、RTOC、native lazy load、ZEBLINE

テーマ有効化前に、下記のプラグインを「有効化」しておきます。

Highlighting Code Block、seoシンプルパック、Invisible reCaptcha for WordPress、Contact Form by WPForms、Wordfence Security、Imagify（2021.7追記）

注意：seoシンプルパックは、記事のディスクリプションを引き継いでくれるので、導入お忘れなく！

6：SWELL Childの有効化後、外観→カスタマイズで着せ替えデータインストール

あいうえおLIFE

SWELL Childの有効化をすると、いよいよJINからSWELLに切り替わります！

すっぴん状態のテーマ有効化状態は下記画像の通り。

SWELLになった嬉しさたっぷりですよね。

下記から、デザインを着せ替え。

デモサイトの着せ替えデータは、ZIPファイルを解凍→datファイルにする。

WordPress管理画面→外観→カスタマイズ→エクスポート / インポートのファイルを選択。

画像ファイルをダウンロードしてインポートしますか ?に✔️を入れて、datファイルをインポート。

7：SWELLでの各設定

あいうえおLIFE

WordPress管理画面から、外観→カスタマイズ、へ移動して設定します。

8：SWELL設定【管理画面】

SWELL独自の内部SEO対策が豊富すぎます（開発者様ありがとう）。

[SWELL設定]

• 高速化
• 構造化データ
• jQuery
• Font Awesome→CSSで読み込む
• 機能停止
• 広告コード→記事内広告"ad"と目次広告と自動広告（導入して、Advanced Adsを停止）を設定
• [ads.txt]google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0→Googleアドセンスの[アカウント]→[アカウント情報]→[パブリッシャーID]を記入

[SWELLERS' 設定]

• SWELLERS' IDを設定する（SWELLEERのマイページ）

9：ウィジェット

外観→ウィジェットへ移動。

• スマホ開閉メニュー下にナビゲーションメニュー（JINオリジナルアイコンから変更する）
• CTAウィジェットに、SWELLプロモーションバナー設置
• メニュー：グローバルメニューの設定、フッターメニューの設定、スマホ開閉メニューの設定（カテゴリページ設定すると、説明文も入るのでここで削除しておく）

10：プラグイン修正と追加

SWELLの推奨プラグインに適正化しましょう。

• Contact Form 7削除→WPForms Lite導入
• 固定ページ【お問い合わせ】WP Formsで作成したショートコードに差し替え（3分）
• Invisible reCaptchaの設定（GoogleアカウントでreCaptchaV3の設定）　＞https://korenasorena.com/wordpress-recaptchav3/
• WP Formsにrecaptcav3のサイトキーと、シークレットキーを入力して紐付け　＞https://re-start78.com/recaptchav3/
• Wordfence Security導入　＞https://excesssecurity.com/wordfence-settings/
  →XO Securityに変更（20210625〜）理由：wordfenceだとSWELL設定の変更でブロックが起きてしまう　＞https://oinavi.net/security/
• Imagify（2021.7追記）導入して画像圧縮　＞https://naoto-biz.com/imagify/

11：ユーザー

あいうえおLIFE

下記は実際に、当サイトで設定しているプロフィール。

プロフィール情報入力

広島在住 / 医薬品登録販売者として、【お薬・漢方・サプリメント】をお届けする営業パーソン / 衣食住のライフスタイルやメンタルヘルスのケアをしています / 配置薬10年・WordPress1年半・動画編集1年 / 依存しない自立した生き方のマインドや他者貢献の姿勢・日常の切り抜きを発信中 / 人生より良くしたい人好き

12：SEOパック

主にやることは、Googleアナリティクス、サーチコンソール、OGP設定を行います。

OGP設定をしておくことで、サイトをシェアされたときのサムネイルがきちんと表示。

13：CSSカスタマイズ

CSSカスタマイズは、おまけ。

基本は何もせずOK

読みやすいサイト作りに、自己満足込めてカスタマイズします。

①目次ハイライト

＞参考：https://www.cg-method.com/side-job/wordpress-swell-customize/

追加CSSに記入

/*目次ハイライト*/
a.p-toc__link.mkj-active {
background-color: #F8FFB9;
}
li.mkj-marker::before {
background-color: #F8FFB9;
}

記入して、＋function.phpに参考サイトのコード記入。

参考サイトに、目次下にプロフィールウィジェットをつくるphpコードもあるので、導入。

②余白

＞参考：https://shindy-style.com/swell-customize-margin

追加CSSに記入

/*行間*/
	.post_content{
	line-height: 1.8;
	}
/*ブロック間*/
	.post_content > *{
	margin-bottom: 5.5em;
	}
/*SWELLステップブロック行間*/
	.swell-block-step__body{
	line-height: 2.0;
	}
/*ステップブロックブロック間*/
	.swell-block-step__body> *{
	margin-bottom: 3.0em;
	}
/*ステップブロックタイトル余白*/
	.swell-block-step__title {
	margin: 3em 0 2em;
	}

③もしもアフィリのボタンのアイコンを変更

下記のコードは、そのままコピペできます。

 /*もしもアフィリかんたんリンクCSS--------- */
  div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
  margin-bottom: 1.5em!important;/*簡単リンク枠下と文字の空白つける*/
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
  border-radius: 20px;/*角を丸く*/
  }
  /*Amazon楽天Yahoo幅揃えて見やすく*/
  .easyLink-info-btn a{
  margin: 1px 1px 5px 0!important;
  padding: 0 12px!important;
    line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
  font-size: 0.7em!important;
  }
  /* --- 商品リンク タイトル --- */
  p.easyLink-info-name a {
    color: #1111cc !important; /* 文字色 */}
  /* --------- 各ボタン色 --------- */
  a.easyLink-info-btn-amazon {
    background: #f6a306 !important; /* 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
  }
  a.easyLink-info-btn-rakuten {
    background: #cf4944 !important; /* 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
  }
  a.easyLink-info-btn-yahoo {
    background: #51a7e8 !important; /* 背景色 */
    border: 2px solid #51a7e8 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
  }
  /* --- マウスオーバー時のボタン色 --- */
  a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
  }
  a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
  }
  a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
  }
  /*fontawesomeを文字の前に*/
  .easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    padding-right: 3px;
  }
  /* --- PC以外の時の設定--- */
  @media screen and (max-width: 480px){ 
  div.easyLink-box div.easyLink-info p.easyLink-info-btn a { 	
    width: 100%!important; 	
      position: relative; 	} 	
  .easyLink-info-btn a:before { 		padding-right: 5px; 
    right: 5px; 	
  position: absolute;		 
  } }
  @media screen and (max-width: 480px){
  div.easyLink-box.easyLink-size-s {
  max-width: 340px !important;
  }}
 

「2：追加CSSの修正」内容を上記のように、JINオリジナルアイコンからFontawesomeに修正。

14：リライトとおまけ

• 人気記事ランキング：ポピュラーポストのショートコード削除して、SWELLの「投稿リスト機能」で人気記事表示

こんな感じにできます。

• 投稿ページのリライト
• Useful Blocks有料買って、CVボックスをグレードアップして、ブログパーツ化して、ウィジェットとして、CTAゾーンへ

ブログパーツとは？：https://swell-theme.com/function/1740/

これがCTA。

• ブロックエディタ完全対応！
• 他テーマからの移行プラグイン完備！
• マニュアル公式サイト＋フォーラムで安心サポート！

最強買い切りで複数サイトで利用可

¥17,600（税込）
カスタマイズ簡単で時短可能

ブログパーツで、カテゴリごとの記事ページへ飛ぶバナー作成

＞https://www.kurasitotonoe.com/entry/swell-blogparts/

スマホメニュー内に運営者情報のブログパーツ

＞https://sorairolog.com/swell_reliability_part/

目次下にプロフィール

＞https://www.cg-method.com/side-job/wordpress-swell-customize/

投稿・固定ページ→記事下エリア→著者情報エリアの設定→ 著者情報を表示をOFF

ウィジェットで、テキストにブログパーツIDを貼る

＞https://swell-theme.com/function/2565/

フッター直前に各カテゴリ別新着記事ブログパーツ

＞https://www.kurasitotonoe.com/entry/swell-blogparts/#index_id3

まとめ | バックアップ後は14の手順でSWELLを軌道に

今回は、「JINからSWELLを導入したいけど、バックアップ取った後は、どうしたらいい？」というお悩み解答しました。

SWELLには、独自の「乗り換えサポートプラグイン」があるので、活用するべし。

下記の⑤でテーマ有効化する前に、プラグインの調整。

上記のメリットは下記。

SWELLの良さは下記の記事でおすすめしています。

それでは、今日はここまで読んでいただきありがとうございます！

あわせて読みたい

【評判に忖度なし】SWELLはおすすめ過ぎて使わないともったいない【レビュー】