Cocoon→SWELL|WordPressテーマ変更前と後に注意すべきことは?

WordPressのテーマを変更したいけど不具合が起きないか不安だなー

はじめてWordPressのテーマを変更するとき、段取りや手順など不安ですよね。

私も最近CocoonからSWELLにテーマを変更したところですが、

下調べが甘く、SWELL変更後に各所でムダな時間を取られる事態に

「そうだったのー?!」

とならないために、この記事では

WordPressテーマCocoon→SWELLに変更する前に注意すべきこと

変更した後に注意すべきことをまとめました。

しずこ

変更した後に「IDコピペしとけばよかったー!」
「メタディスクリプション、コピペしとけばよかったー!」
という事態になった失敗をまとめました…

はむくん

ずいぶんムダな作業時間が増えちゃったんだね!!

この記事でわかること 
  • CocoonからSWELLに変更する全体の手順の流れ
  • 変更する前にやるべきこと
  • 変更した後にやるべきこと
目次

Cocoon→SWELLテーマ変更前に注意すること

見切り発車してあとでムダな作業時間をとられないためにも

まず全体の手順の流れを把握しておくのがおすすめです。

  • テーマを変更する手順を確認
  • テーマを変更するにやることの確認
  • テーマを変更したにやることの確認

テーマを変更する手順を確認

テーマを変更するとき、インストールや有効化の順番が大事なので注意です。

Cocoon→SWELL テーマ変更の手順
  1. SWELLを購入→ダウンロード ※有効化はあとで
  2. SWELL CHILD(子テーマ)をダウンロード ※有効化はあとで
  3. Cocoon用乗り換えサポートプラグインをダウンロード→インストール→有効化
  4. SWELL CHILD(テーマ)→有効化
  • 先にCocoon用乗り換えサポートプラグインをインストール、有効化してからSWELLを有効化
  • SWELLのインストールは、①親テーマ→②子テーマの順で行う
  • SWELL親テーマ、子テーマのインストールをしたら、子テーマの方を有効化

続いて、テーマ変更後に再設定が必要になるものを把握しておくとスムーズです。

Cocoon→SWELL変更後に再設定が必要なものを確認

  • Googleアナリティクス
  • Google サーチコンソール
  • Googleアドセンス
  • メタディスクリプション、キーワードなどのSEO設定
  • HTMLサイトマップ
  • 追加CSS
  • トップページ、サイドバー、メニュー設定

(Cocoon設定を使用していた場合)

変更後の再設定のために、あらかじめ必要なものを保存して残しておきます。

これらをふまえて、変更前にやっておくことがこちら。

変更前にやること
  • アナリティクス、サーチコンソールの各IDをコピペしておく
  • SEO設定にあるメタディスクリプション、キーワード等をコピペしておく
  • 追加CSSをコピペしておく
  • バックアップをとる

ひとつずつ見ていきましょう。

アナリティクス、サーチコンソールの各IDをコピペしておく

アナリティクス、サーチコンソールの各IDをメモなどにコピペしておげば

SWELLに変更した後に再設定する時も、

いちいち各サイトまで確認しにいく必要がないので時短になります。

アナリティクストラッキングID(UAから始まる文字列)

WordPress管理メニュー →「 Cocoon設定」→「 アクセス解析・認証」 →「 Google Analytics設定」「Google Analytics トラッキングID」

サーチコンソールID

WordPress管理メニュー →「 Cocoon設定」→「 アクセス解析・認証」 → 「Search Console設定」「Google Search Console ID」

SWELL移行後にSEO SIMPLE PACKを導入してこれに各IDを入力します。

メタディスクリプション等のコピペ

Cocoonでは投稿記事の編集画面の下の方で、メタディスクリプションやキーワードなどを入力できますが

SWELLにはそういった機能は外してあるようなのでSEO SIMPLE PACKというプラグインでSEO設定をします。

移行前にあらかじめSEO設定の欄にあるタイトル、メタディスクリプション、robotsタグ、キーワードを

メモなどにコピペして保存しておくと便利です。

追加CSSをコピペ

Cocoonで入力した追加CSSも消えてしまうので

メモなどにコピペして保存しておきましょう。

バックアップをとる

バックアップは必ずをとっておきましょう。

プラグインBackWPupの手動バックアップなら簡単にバックアップが取れます。

BackWPupはSWELL公式でも推奨されている安心のプラグインですね。

ヒトデさんのブログにもBackWPupの手動バックアップのとり方について説明があります。

Cocoon→SWELLテーマ変更後に注意すること

無事にテーマの変更が完了したら、再設定が必要なものやプラグインの整理などをしていきます。

SWELLへのテーマ変更後にやることがこちら。

変更後にやること
  • プラグインSEO SIMPLE PACKを導入
  • アナリティクス、サーチコンソールの再設定
  • Googleアドセンス再設定
  • HTMLサイトマップ再設定
  • プラグインの整理
  • メタディスクリプション、キーワードなど(SEO設定)の再設定
  • 追加CSSの入力
  • トップページ、ヘッダー、サイドバーなど編集
  • レイアウト崩れの修正

プラグインSEO SIMPLE PACKを導入

SWELLのテーマ内にはSEO設定はないのでプラグインSEO SIMPLE PACKを導入します。

SEO SIMPLE PACKはSWELLと同じ開発会社によるSEO設定のプラグインで

SWELL公式でも推奨されています。

WordPress管理メニュー「SWELLのプラグイン」→「新規追加」で検索し「今すぐインストール」→「有効化」

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

テーマ変更前にあらかじめコピペしておいたアナリティクス、サーチコンソールの各IDを

アナリティクストラッキングID

WordPress管理メニュー「SEO PACK 」→「一般設定→「 Googleアナリティクス」タグ内「アナリティクストラッキングID」に入力

サーチコンソールID

WordPress管理メニュー「SEO PACK」→ 「一般設定」→「ウェブマスターツール」タグ内「サーチコンソールの認証コード」に入力

→「設定を保存する」で完了です。

Googleアドセンス再設定

Google アドセンスを利用していた方はテーマの移行後に再設定が必要です。

ここではウィジェットで好きな場所に広告ユニットを貼り付ける方法を説明します。

STEP
アドセンスをすでに利用されている場合は、アドセンスのサイトからコードをコピーします。

Googleアドセンスのサイト→「広告」「サマリー」→「広告ユニットごと」→「コードを取得」(< >マーク)→コードをコピーする

STEP
SWELLの広告用のウィジェットアイテムを利用

WordPress管理メニュー「外観」→「ウィジェット」→[SWELL]広告コード」

STEP
広告を表示させたいウィジェットエリアに、[SWELL]広告コードをドラッグ&ドロップで配置
STEP
「広告タグ」と書かれた欄にコピーしておいたアドセンスのコードを貼り付け→「保存」で完了

詳しい説明や自動広告についてはSWELL公式サイトに解説があります。

プラグインの整理

テーマによってプラグインの機能がテーマに含まれる機能と重複していたりします。

また、テーマに不具合を起こす可能性のあるプラグインもあり

逆に前のテーマに含まれていた機能がなくなって新しくプラグインを導入する必要が出たりもするので、

テーマ変更にともなってプラグインの見直しが必要です。

SWELL公式サイトで提示されている推奨プラグインと非推奨プラグインを参考に、既存のプラグインを整理していきましょう。

非推奨&不必要プラグイン

SWELLの標準機能と被る

  • 「Table of Contents Plus」などの目次生成プラグイン
  • 「Lazy Load」などの画像遅延読み込みプラグイン
  • 「Speech bubble」などのふきだしプラグイン
  • 「WordPress Popular Posts」など人気記事リスト作成プラグイン

SWELLと相性の悪い

  • 「Autoptimize」

不要

  • 「Classic Editor」

よくわからないなら使わなくていい

  • 「AddQuicktag」
  • 「TinyMCE Advanced」
  • 「WP Super Cache」
  • 「W3 Total Cache」
  • 「Jetpack」

不具合の原因になるかも?

  • 「SiteGuard WP Plugin」
  • 「EWWW Image Optimizer」

非対応

  • WooCommerceなどのEC系プラグイン
推奨プラグイン
  • SEO SIMPLE PACK (SEO)
  • Highlighting Code Block (コードブロック)
  • Useful Blocks (便利なブロック)
  • Pochipp (アフィリエイトリンク管理)
  • WP Multibyte Patch (日本語利用時の機能強化)
  • WP Revisions Control (リビジョンデータ制限)
  • Google XML Sitemaps (XMPサイトマップ生成)
  • Invisible reCaptcha for WordPress (「reCaptcha v3」導入)
  • BackWPup (バックアップ)
  • Contact Form by WPForms (コンタクトフォーム)
  • Really Simple SSL (SSL化)
  • Wordfence Security (セキュリティ強化)
  • XO Security (ログインセキュリティ強化)
  • BBQ Firewall (ファイアウォール機能追加)

SWELL公式サイトより

ログインセキュリティに関するプラグインを変更する場合は、WordPressログインアドレスのブックマークを変更するのをお忘れなく

HTMLサイトマップ再設定

Cocoon機能でサイトマップを作成していた場合、サイトマップも消えてしまいます。

改めてサイトマップページを作る必要がありますが

PS Auto Sitemapというプラグインを導入すれば簡単にサイトマップを作成できます。

STEP
プラグインPS Auto Sitemapを導入
STEP
WordPress管理メニュー「固定ページ」→「新規追加」またはCocoon時代のサイトマップページを開く
STEP
タイトル欄に「サイトマップ」などと入れる
STEP
テキスト編集モード(コードエディター)で本文に出力コードを入力する

<!– SITEMAP CONTENT REPLACE POINT –>

STEP
「公開」をクリック
STEP
WordPressの管理メニュー「固定ページ一覧」にて先程のサイトマップページの「ID」をコピーする
STEP
WordPressの管理メニュー「設定」→「PS Auto Sitemap」
STEP
「サイトマップを表示する記事」のところに先程コピーしたIDを入力する

「ホームページ出力」はチェックを外す(トップページをサイトマップに加えない場合)

STEP
「変更を保存」をクリックして完了

メタディスクリプション、キーワードなどの再設定

Cocoonで投稿記事の編集ページの下の方にあった「メタディスクリプション」や「タイトル」「キーワード」などのSEO設定項目を入力していきます。

移行前にあらかじめコピペしておいたメタディスクリプションなどを貼り付けていきましょう。

追加CSSの入力

同じく追加CSSも消えてしまっているので、レイアウト修正と並行して事前にコピペしておいたものを入力していきます。

トップページ、ヘッダー、サイドバーなどの編集

SWELLにテーマ変更すると、トップページはデフォルトのかっこいいメインビジュアルが表示されています。

サイトのイメージに合うものに編集していきましょう。とりあえず私は非表示にしました。

トップページの編集

WordPress管理メニュー「カスタマイズ」 → 「トップページ」 → 「メインビジュアル」

ヘッダーやサイドバーも改めて編集します。

プロフィールをサイドバーに表示していた場合、消えてしまっているはずなので再設定が必要です。

管理メニュー「ウィジェット」 → 「SWELLプロフィール」 → 「共通サイドバー」にドラッグ

レイアウト崩れの修正

乗り換えサポートプラグインによってレイアウト崩れした部分も、ある程度かたちを保ってくれています。

かなり時間がかかりますが、この部分を地道に修正していきます。

乗り換え用サポートプラグインを削除

レイアウト崩れの修正がすべて完了したら

乗り換え用サポートプラグインを無効化します。

無効化して問題がなさそうであればプラグインを削除します。

まとめ

CocoonからSWELLにテーマを変更するとき

下調べをしたつもりだったのですが、変更した後に「やっとけばよかったー!」という事態にならないよう

「変更前」にやっておくことと「変更後」にやっておくことについてまとめました。

それと合わせてSWELLER’S(SWELL利用者限定の会員サイト)への登録も忘れずにしておきましょう。

これからテーマを変更される方の参考になればと思います。

シェアする

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次
閉じる