- 最近オススメされている『SWELL』テーマを使ってみたい！
- でもテーマの乗り換えって難しそう…
- どのくらい時間がかかるんだろう？
初めてWordPressテーマを乗り換える時は、不安なことばかりです。
「ダイビングが好きだから」という理由で『DIVER』テーマを使っていた私も、ちょうど１年前に『SWELL』に乗り換えをしました。
実際にやってみると、想像よりもずっと簡単な作業でしたのでご安心ください(^^)
今回はこれから『DIVER』から『SWELL』テーマに乗り換えをするあなたに向けて、手順を画像つきでご紹介します。
DIVERからSWELLへ乗り換える時に必要な作業
テーマの変更には、ざっくりと分けて５つのステップがあります。
- バックアップをとる
- SWELLテーマをインストールする
- SWELLテーマを有効化する
- SWELLの基本設定をする
- 記事の装飾を修正する
一見するとやることが多いようにも見えますが、１つ１つの作業はボタンを押すだけだったりと、見よう見まねでできます♪
私の時は①～④までの作業は40分で終わりました。
⑤の作業は１記事ずつ修正する方法をとったので、丸一日かかりました！
当時の私のブログの変更前と後を共有しておきますね。
| 変更前 | 変更後 | |
|---|---|---|
| テーマ | DIVER | SWELL |
| SEOツール | All in seo pack | SEO SIMPLE PACK |
| エディタ | クラシックエディタ （旧エディタ） | ブロックエディタ |
見事に総入れ替え状態でした！
初めて立ち上げたブログであまり深く考えずに進めていたツケが回ってきたのですね…。
変更する時にはテーマ→エディタ→SEOプラグインの順番で進めました。
私と同じようにテーマ・SEOツール・エディタを変更しようと思っている方はいますか？(^^)
下の記事で詳しく手順を解説していますので、あわせてご覧ください。
それでは、テーマの乗り換え前に知っておきたい注意点と、テーマの乗り換えの手順の順に解説していきます。
テーマ乗り換えの前に知っておきたい注意点！
DIVERからSWELLにテーマを乗り換えると、一部のデザインの表示が崩れてしまいます。
COCOONやJINなど、テーマによっては『乗り換えサポートプラグイン』もありますが、DIVERは『乗り換えサポートプラグイン』がないので自分で修正していく必要があります…！
テーマを乗り換える時、旧テーマの独自機能で文章の装飾などを使っていると 過去記事のデザインが一気に崩れてしまいます。
つまりテーマを途中で乗り換える場合、
引用元：SWELL公式サイト
①過去記事を全てリライトして整えるか、
②ショートコードやCSSデータなどを自分で新テーマに移行させる
という作業が必要になってきてしまいます。
なので、テーマを乗り換える前に、記事のデザインが崩れる場所と崩れない場所を知っておきましょう！
サイドバー・ウィジェット・プラグインの設定、メディアのAltタグなど、基本上記で紹介した記事装飾以外の基本設定は全て引き継がれます。
デザインの表示が崩れる場所
デザインの表示が崩れる場所は６箇所です。
下の表にまとめてみました↓
| 該当部分 | 表記崩れ | 事前の対策 |
|---|---|---|
| 吹き出しのアイコン画像 | 画像サイズが巨大化する | アイコン画像を削除する |
| DIVER入力補助「囲い枠」 | ・コード表記になる ・枠が消える | 囲い枠を外しておくか、タイトル内のアイコンをなくす |
| 動くラインマーカー | ・マーカーの色が消える ・太文字から普通サイズの文字になる | 赤文字＋太文字にする |
| マーカー | マーカーの色が消える | 赤文字＋太文字にする |
| カテゴリーカラー | デフォルト設定に戻る | カテゴリーで設定したカラーコードをメモしておく |
| Font Awesomeアイコン | コード表記になる | Font Awesomeアイコンではなく「・」にしておく |
記事数が30記事以内で少ない場合は、テーマを乗り換える前に事前対策を打っておくと楽です。
私のように記事数が300記事と多い方にオススメなのは、
- PV数が多いパワー記事は事前に修正しておく
- それ以外の記事はテーマ乗り換え後にPV数が多い記事から順番に修正する
この方法が一番効率がよかったです。
最初は事前に修正していたのですが、記事が多くてなかなかテーマ乗り換えに進まなかったので途中で諦めました^^;
ちなみに、テーマを乗り換えた後の記事修正は、本気で集中すれば１日で終わりました！
CSSを書き換えると一発で済むのですが、私の場合はクラシックエディタをブロックエディタに変更しないといけなかったので、
ついで、という形で記事のデザインも修正していきました。
デザインの表示が崩れない場所
続いて、デザインの表示が崩れない５つの場所もまとめました↓
| 該当部分 | 備考 |
|---|---|
| 引用ボックス | そのまま引き継がれる。 |
| 赤文字 | そのまま引き継がれる。 |
| 太文字 | そのまま引き継がれる。 |
| 表 | 表に設定したカラーも引き継がれる。 |
| メディア（画像） | 配置（中央揃えなど）の設定も引き継がれる。 |
こうしてみると、ちょっとバリエーションが少ない気もしますよね^^;
ここまで読むと「記事修正の手間がかかるなら、DIVERのままでいいかも？」と思うかもしれません。
でも、長い目で見た時にSWELLに変えた方がいいと思います。
実際にテーマを乗り換えてみて感じたオススメする理由は、少し長くなるので別の記事にまとめますね！
今、テーマを乗り換えようか迷っている方は、ぜひ読んでみてください。
【画像あり】DIVERからSWELLへ乗り換える時の手順
お待たせしました！
それではDIVERからSWELLへテーマを乗り換える手順をご紹介します。
- バックアップをとる
- SWELLテーマをインストールする
- SWELLテーマを有効化する
- SWELLの基本設定をする
- 記事の装飾を修正する
↑こちらの順番で進めていきますよ～！
①バックアップをとる
テーマの乗り換えが失敗してサイトが真っ白になった時のために、必ずバックアップを取っておきます。
今回は『UpdraftPlus バックアップ』というプラグインのケースでご紹介します。
他のバックアップアプリを使っている方は、そのプラグインを選択してバックアップを取得すればOKです！
（１）WordPressの管理画面にログインして、ダッシュボードの『設定』＞『UpdraftPlus バックアップ』を選択する。
（２）「今すぐバックアップ」を選択する。
（３）次の３つにチェックが入っていることを確認して、「今すぐバックアップ」を選択する。
- バックアップにデータベースを含める
- バックアップ内のすべてのファイルを含める
- このバックアップをリモートストレージに送信
（４）「バックアップは成功し完了しました」のメッセージが表示されたらOK！
保存場所は最初に設定した場所（Drop box、Google driveなど）になります。
今回の場合ですと、Google driveマークが表示されているので、Google driveのフォルダ内に保存されている形ですね！！
万が一バックアップを取り忘れていた場合でも、諦めなくてOKですよ(^^)
サーバー側でバックアップを取っていることが多いので、一度サーバーを確認してみましょう。
以上で、バックアップをとる作業は完了です。
②SWELLテーマをインストールする
続いて、SWELLテーマをWordPressにインストールしていきます。
（１）下記のページからSWELLとSWELL子テーマのzipファイルをダウンロードする。
まだお済みでない方は、下記のSWELL公式マイページにログインするとダウンロードをすることができます。
▼SWELL製品のダウンロードページ▼
SWELLに登録した時のメールアドレス・パスワードを入力して、CAPTCHAコードを入力したら「ログイン」を選択します。
マイページの中段に「SWELL製品ダウンロード」があるので、SWELL本体最新版と子テーマの両方をダウンロードします。
（２）ダッシュボード＞外観＞「テーマ」を選択する。
（３）テーマの画像が開いたら「新しいテーマを追加」を選択する。
（４）「テーマのアップロード」を選択して、「ファイルを選択」をクリックする。
（５）SWELL本体のzipファイルを選択して、「今すぐインストール」をクリックする。
下のように「テーマのインストールが完了しました」というメッセージが表示されればOKです！
「テーマページへ移動」をクリックして、子テーマのアップロードに移ります。
（６）子テーマzipファイルをアップロードする。
今と同じ手順で、SWELLの子テーマzipファイルをアップロードします。
下の「テーマ追加画面」に戻って、「今すぐインストール」を選択します。
「swell_child」のzipファイルを選択しましょう。
下の画面に移行するので、「テーマのインストールが完了しました」とメッセージが表示されればOKです！
「テーマページへ移動」をクリックしましょう。
これでテーマのアップロードの作業は完了です！
③SWELLテーマを有効化する
続いて、今アップロードしたSWELLテーマをWordPress上で有効化していきます。
SWELLはDIVERとは少し違って、SWELLのマイページ上で認証した後にWordPressで「有効化」の設定ができるようになります。
（１）「SWELLのユーザー認証」をする。
外観＞テーマの画面に戻ると、ポップアップが表示されています。
「SWELLユーザー認証」のリンクをクリックしましょう。
ユーザー認証のページが開くので、SWELLで登録したメールアドレスを入力してから「認証リクエストを送信」を選択します。
入力したメールアドレス宛にメールが届くので、確認します。
下記のタイトルでメールが届いているので、ワンタイムURLをクリックします。
URLをクリックすると、SWELL会員ページにジャンプして「”あなたのHPアドレス”の認証が完了しました。」とポップが表示します。
「自分のサイトに戻る」をクリックしてWordPressの管理画面に戻ったら、「アクティベートを完了」をクリックします。
下のように「認証完了」のメッセージが表示されればOKです！
（２）WordPress上でテーマの「有効化」をする。
WordPressの外観＞テーマの画面を開いて、SWELL子テーマの「有効化」をクリックします。
これで、あなたのブログのWordPressでSWELLテーマが実装（適用）されました！
④SWELLの基本設定をする
続いて、SWELLテーマの基本設定をしていきます。
SWELLの基本設定はとてもシンプルです！
DIVERで基本設定をしたことがある方なら簡単にできるので、一緒に進めていきましょう。
▼文量が長くなってしまうので、下記の記事で動画付きで解説しています▼
⑤記事の装飾を修正する
最後は崩れてしまった記事装飾を修正していきます。
| 該当部分 | 表記崩れ | 事前の対策 |
|---|---|---|
| 吹き出しのアイコン画像 | 画像サイズが巨大化する | アイコン画像を削除する |
| DIVER入力補助「囲い枠」 | ・コード表記になる ・枠が消える | 囲い枠を外しておくか、タイトル内のアイコンをなくす |
| 動くラインマーカー | ・マーカーの色が消える ・太文字から普通サイズの文字になる | 赤文字＋太文字にする |
| マーカー | マーカーの色が消える | 赤文字＋太文字にする |
| カテゴリーカラー | デフォルト設定に戻る | カテゴリーで設定したカラーコードをメモしておく |
| Font Awesomeアイコン | コード表記になる | Font Awesomeアイコンではなく「・」にしておく |
CSSを設定して一発で修正する方法もありますが、初心者さんにはコードを追加したり修正するのは怖いと思います…！
ちょっとでも不安な方は、記事を１つずつ修正していく方法がオススメです(^^)
記事の修正が終われば、テーマの乗り換え作業は全て終了です！
お疲れさまでした♪
まとめ
ここまでWordPressテーマを「DIVER」から「SWELL」に乗り換えする手順をご紹介しました。
最後の記事修正が一番時間がかかりますが、そこを乗り越えてでもテーマを乗り換える価値は十二分にあると思います。
分からないことがありましたら、お気軽に聞いてくださいね(^^)
今日もお疲れ様でした！
