【2021年前半】おすすめノートPC3選

THE SONICへのテーマ替え・移行方法メモ

4 min
THE SONICへのテーマ替え・移行方法メモ

WordPressのテーマをSimplicity2(Cocoonの1世代前)からTHE SONIC(ザ・ソニック)に変更しました。

きっとこの記事を読まれている方は、以下のような悩みをお持ちだと思います。

どうやってTHE SONICにテーマ変更したらいいのかわからない。まずバックアップ・・・?

知人

知人

SEパパ

SEパパ

ざっくりいうと、以下の流れで移行するよ!

  1. 現状のバックアップ
  2. SONICインストール
  3. 事前レイアウト調整
  4. テーマ切替後の設定
  5. 過去記事修正

同じようにTHE SONICへの移行を考えている方向けに、実際に筆者が実施した内容を紹介しますね!

スポンサーリンク

THE SONICテーマ変更前の切り替え準備

プライグイン(BackWPup)でバックアップ

バックアップの仕方はネット上に山ほど情報があふれかえっているため、そのうちの1つを参考にしてWordPressをバックアップしましょう!

※2020年12月時点で1位表示された「バズ部」さんの記事をリンクしておきます。

THE SONICと子テーマをインストール

まず、THE SONICの公式ページ(上リンク)から本体を「購入・ダウンロード」します。

次に、公式ページ(上リンク)から子テーマをダウンロードしてインストールします。

WordPressを最新版(5.3以上)に更新

製品名THE SONIC
WordPress5.3〜
PHP7.2〜
ブラウザOSChrome/Safari/FireFox
IE11〜
iOS11〜
Android 4.4〜
上記バージョン以下では確認を行っておりません。
THE SONIC動作環境(引用元:https://the-sonic.jp/download/

当ブログでWordPressバージョン4.9のまま、THE SONICのプレビューを表示してみたところ、真っ白画面になって何も表示されませんでした。

※WordPressを5.5.1aにバージョンアップ→プレビューで正常表示、必ず5.3以上にあげましょう。

THE SONICのレイアウトをプレビューで確認&調整

Simplicity2の装飾をstyle.cssとfanction.phpで復元

THE SONICをインストールした直後は、プレビュー表示してもレイアウト崩れまくり状態ですので、style.cssとfanction.phpに必要コードを追記、この2つのファイルをFTPを使って「THE SONIC child」フォルダにアップロードする必要があります。

ここがポイント

  • THE SONICで表示できないSimplicity2の装飾系は、style.cssとfanction.phpへのコード追記のみでほぼ復元可能
  • 装飾系の復元メリットは過去記事のレイアウト崩れを防げること、テーマ移行後にゆっくりリライトできておすすめ

THE SONICへ移行後にまずすべき初期設定

このリンクからTHE SONICの設定マニュアルページに飛べますので、基本的にこの内容を実施すればOKです。この記事では筆者が少しつまづいた箇所を中心に紹介します。

不要なプラグイン無効化(必須)

筆者が実際に無効化したプラグイン

  • Autoptimize
  • Category Order and Taxonomy Terms Order
  • Classic Editor
  • Disable Google Fonts
  • Newpost Catch
  • Page Builder by SiteOrigin
  • Remove Query Strings From Static Resources
  • Speed Up – JavaScript To Footer
  • Table of Contents Plus
  • WordPress Popular Posts
  • TinyMCE Advanced
  • BJ Lazy Load(※)
  • OnePress Image Elevator(※)

特に(※)をつけたプラグインは必ず無効化しておきましょう!THE SONICのレイアウトやエディターの動作に悪影響を及ぼします。

ここがポイント

BJ Lazy Loadを無効化しないとサムネイル画像が表示されませんでした。また、OnePress Image Elevatorはクラシックで作成した記事を編集するときに文章のコピペができない問題が発生しましたので、特にこの2つのプラグインには要注意です。

投稿ページの「PV数」「書いた人」の表示設定

この設定は完全に好みです。筆者は以下の2つにチェックを入れました。

  •   PV数を非表示にする
  •   この記事を書いた人(記事上)を非表示にする

ここがポイント

PV数表示はライバルに知られるとリスクがあるため迷うようなら非表示に、記事を書いた人は記事上もしくは記事下のどちらかのみ表示しましょう。

「THE SONIC書いた人」をトップページに表示

このページ内の「書いた人ウィジェットを表示したい」に表示方法の詳しい説明がありますので、参考にして設定してみてください。

ここがポイント

WordPress画面左の「ユーザー」→「プロフィール」に必要情報を追記して、サイドバーウィジェットに「THE SONIC書いた人」を追加するだけでは、記事内でしか表示されずトップページやカテゴリページには表示されないので要注意です。

THE SONICへ移行後の過去記事修正

崩れたレイアウトなどを修正

テーブルレイアウトが崩れた!装飾のdiv style の前後余白が崩れた!などの場合は、「Search Regex」プラグインを利用して、対象箇所を一括検索&一括置換しましょう!

※例えば、TinyMCE Advancedで作ったテーブルは、”table”で検索すれば対象記事を特定できます。

THE SONICの機能でリライト

前項のレイアウト調整で、過去記事の装飾系もきれいに表示されるようになるため、過去記事修正は必須ではありません。

しかし、THE SONICに搭載されている便利な装飾系を使えば、読みやすく質の良い記事にリライトできますので、重要な記事だけでも修正することをおすすめします。

今ままで、クラシックエディタでしか記事を書いたことがないんだけど、どうしたらよいの・・・?

知人

知人

SEパパ

SEパパ

クラシックエディタで書かれた記事は、以下の手順でリライトしよう!

  1. STEP

    クラシックエディタで書かれた記事を開く

    投稿画面から今まで通りリライトしたい記事の編集ボタンをクリックします。編集画面を開くと、記事本文の一番上に「クラシック」と表示されます。

    本文の一番上に表示される
  2. STEP

    ブロック変換を実行

    クラシック → 縦向の三連点 → ブロックへ変換 を順番にクリックすると、本文全体がブロックに分割されます。

  3. STEP

    記事をリライト・修正

    これで、Gutenberg(グーテンベルク)で記事を書く準備が整いましたので、THE SONICの機能をふんだんに活用して記事をレベルアップ(リライト)しましょう!

THE SONICへの切り替え・移行方法まとめ

今回は、Simplicity2(Cocoonの1世代前)からTHE SONIC(ザ・ソニック)への変更メモを紹介しました。

テーマ移行自体は思っていたよりはスムーズに完了しましたので、THE SONICへのテーマ移行を検討中の方はぜひチャレンジしてみてくださいね!

THE SONICへテーマ移行して感じたメリット3つ

  • トップページをサイト風に改修できて回遊率向上!
  • THE SONICエディタで記事の質・執筆速度が向上!
  • COPIAで物販アフィリエイト収益向上!

サクッとTHE SONICにテーマ移行して、もっとブログを楽しみましょう!

スポンサーリンク
SEパパ

SEパパ

外資系IT企業SE職で2児の父ちゃん!職業柄かリサーチ&問題解決が好き。

幅広いジャンルで「お悩み解決」記事を執筆中。月間最高24万PV。雑誌掲載。

読者様に役立つ情報提供を心がけています。

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA