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

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

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

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

知人

SEパパ

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

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

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

クリックできる目次

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

プライグイン（BackWPup）でバックアップ

参考

BackWPUpで確実にWordPressのバックアップを取る方法

バズ部

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

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

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

参考

あなたのサイトを1UPさせるWordPressテーマ

the-sonic.jp

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

参考

子テーマをインストールする

the-sonic.jp

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

WordPressを最新版（5.3以上）に更新

製品名	THE SONIC
WordPress	5.3〜
PHP	7.2〜
ブラウザOS	Chrome/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へ移行後にまずすべき初期設定

参考

あなたのサイトを1UPさせるWordPressテーマ

the-sonic.jp

このリンクから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書いた人」をトップページに表示

参考

よくある質問

the-sonic.jp

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

ここがポイント

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

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

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

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

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

THE SONICの機能でリライト

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

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

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

知人

SEパパ

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

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

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

本文の一番上に表示される
STEP
ブロック変換を実行

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

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