「WP・テーマ」Simplicity1系からSimplicity2へ移行してみた

simple

当ブログはSimplicityというテーマを現在使用しています。以前はSTINGER5をSimplicityを使用している間もあれやこれはと探していましたが結局はこのテーマに落ち着いています。

現在はSimplicity1.9.1を使用していますが、知らない間に1.9.3が安定版として出ているじゃないですか。またSimplicity2も出ているようです。半年位前に出ています。

1.9.3へのアップグレードでもよかったのですが、この際なので2にしようという事で、Simplicity1 → 2 に移行する事に決めたのでした!

SPONSORED LINK

photo by Jimee, Jackie, Tom & Asha

▼この記事の目次

  1. 「Simplicity2」ダウンロード
  2. カスタマイザー・ウィジェットの設定確認
  3. スマホ表示が崩れた
  4. 1系の子テーマをそのまま使う場合
  5. まとめ

「Simplicity2」ダウンロード

simplicity3

Simplicity2のダウンロード」ページにアクセスします。今のところ「Simplicity 2.1 安定版」とベータ版だと思われる「Simplicity2.2 開発版」の2種類あるようです。

最初は開発版を選びましたが、思っていたよりレイアウトが崩れてしまったので無難な安定板を選び直しました。

Simplicity2用の子テーマ

simplicity4

Simplicity2の子テーマ。2用の子テーマもダウンロードしました。

インストールからの「Theme Test Drive」で確認

ダウンロードした2のファイルをWordPressのダッシュボードからインストールします。2用の子テーマもインストールしておきましょうか。

2をインストールしたら有効化をせずに、「Theme Test Drive」というプラグインを使いテーマの動作確認をします。

「Theme Test Drive」を有効にして確認してみるとこのような感じに。思っていたよりは変化がなく安心です。
simplicity6

Googleアドセンスやロゴ、などのウィジェットやカスタマイザー機能で設定した項目が反映されていないようですね。Googleアナリティクスも再設定が必要でしょう。

カスタマイザー・ウィジェットの設定確認

Simplicityは「外観」→「カスタマイズ」からphpファイルを直接編集しなくてもカスタマイズできるという機能があります。初心者でも使いやすいというと、ブログ執筆に集中できるというのもあります。
この機能を使用すると便利なので僕はできる事はカスタマイズ機能で設定しています。そんな便利な面ばかりのカスタマイザー機能ですが、今回のようにテーマを変更する場合にカスタマイザーで設定した項目を新テーマでも再設定しなければいけないという面もあります。

まずこのカスタマイザーと後述するウィジェットの設定内容を1系→2に移行するという作業が必要です。
このように1系と2のカスタマイザーを2つひらきます。1系のテーマを有効させた状態でカスタマイザー画面を開き、別のタブで2のテーマを有効にしてカスタマイザー画面を開きます。
simplicity7

左右に設定項目を見比べながら修正していくとやりやすいかもです。この画面からウィジェットの設定もできます!

一つ気を付けなければいけないのがカスタマイザーでSEO設定をしている場合です。検索結果に影響してくるようなメタディスクプリションや検索結果にサイト名を含めるかという設定項目があるので、1系でそちらを設定している場合はすぐに2でも同じ設定にした方がいいでしょう。

スマホ表示が崩れた

simplicity8

パソコンはうまく表示が移行されましたが、スマホ表示が崩れてしまいました。おそらくパソコンの記事幅を広げる指定をしているからでしょう。Viewportの問題なのかと思いましたが、違ったようで前からのCSSを消したら戻りました。

1系の子テーマをそのまま使う場合

Simplicity1 → 2 に移行する場合は、ダウンロードしてインストールするだけではスムーズにいかないみたいです。

テーマフォルダ名が変更されるので、子テーマでカスタマイズしている場合はある程度の修正が必要です。こちらの記事を参考にしました。

FTPソフトを使い、子テーマのフォルダをローカルに移します。子テーマのフォルダ名を変更して下さい。

▼「Simplicity-child」→「Simplicity2-child」
simplicity2

次に修正した子テーマの「style.css」を開きこの部分を変更します。Versionは修正・2への変更を行った日です。

//変更前
/*
Theme Name: Simplicity child
Template: simplicity
Version: リリース日
*/

//変更後
/*
Theme Name: Simplicity2 child
Template: simplicity2
Version: 20160618
*/

「@import」を削除する

@importを削除します。2のパフォーマンス向上のために行うようです。

▼style.css
@import url(“../simplicity/style.css”);
▼mobile.css
@import url(“../simplicity/mobile.css”);
▼responsive.css
@import url(“../simplicity/responsive.css”);

まとめ

子テーマの内容が思ったように反映されず困りました。レイアウト崩れやホワイトアウトまでしてしまったので、僕の場合はまた新しい子テーマを作る事にしました。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!