[WordPress] Simplicityのメジャーアップグレードで困った4つのポイント

このブログのテーマは長いあいだSimplicityの1.xでしたが、先日、2.xにアップグレードしました。新実装の「最近のコメント」ウィジェットを利用したかったのです。

私は時間が掛かってしまいましたが、本来ならアップグレードは簡単にです！
困ったポイントを解説しながら、子テーマ利用を前提に紹介します。

今の「テーマの編集」を確認しておこう

アップグレード前に、カスタマイズしたCSSが、ちゃんとSimplicity Childにあるか確認しておきましょう。

「テーマの編集」でSimplicity Childを選択して、カスタマイズしたCSSが表示されていれば、大丈夫です。

＜困ったポイント１＞

わたしの場合、なぜだか「テーマの編集」ではなく「CSS編集」にカスタマイズしたCSSがありました。

子テーマを有効にしていても、これでは意味がありませんよね。
(ホント何やってんだろう、オレ orz)

「CSS編集」にあっても、普段はちゃんと反映されるので問題ないのですが、テーマを変更すると、悪いことに、内容がガッツリ上書きされてしまいます。

ホント、これには焦りました。

CSS変更履歴から、以前のリビジョンに戻せたので何とかなりましたが、カスタマイズしたコードを、あらかじめ「テーマの編集」の「Simplicity Child」に退避してから、作業を始めた方が安心ですね。

ウィジェットの設定場所を控えておこう

外観 > ウィジェット から、スクリーンショットなどを撮っておきましょう。テーマを変更した時に、ウィジェット自体は無くなりませんが、配置が解除されまてしまいます。

＜困ったポイント２＞

Adsenceの広告や最新記事などのウィジェットが「あれ、コレどこに配置してたっけ？」って状態になってしまいます。

記憶だけを頼りに戻すのは、結構ツラい作業になります。完全にもとの状態に戻したいのであれば、元の状態を控えておきましょう。

Simplicity2 と子テーマのダウンロード

公式サイトから「Simplicity2」と「Simplicity2 child」をダウンロードします。何れアップされるのかも知れませんが、WordPressのテーマ検索では見つからなかったです。

テーマのインストール

公式サイトにもありますが、「Simplicity」と「Simplicity2」は別物なのです。

＜困ったポイント３＞

なので、公式サイトで紹介されている「Simplicityを新しいバージョンにアップデートする方法2通り」は、SimplicityからSimplicity2への変更では関係無かったりします。

わたしはこの記事の通りにやろうとして、途中、行き詰まってから、関係が無いことに気づきました。

わかりやすく言えば、まったく別物として「インストールして乗り換える感覚」で良いのです。

外観 > テーマ > 新規追加 から、さきほどダウンロードしておいたファイルを、「Simplicity2」「Simplicity2 child」の順にアップロードして、「Simplicity2 child」を有効にすれば、インストール終了です。

「Simplicity」と「Simplicity child」は、しばらく削除せずに、置いておきましょう。

設定値を移行したり、おかしな箇所が見つかった時のため、絶対あった方がいいです！

テーマの編集を移行

基本的には、「テーマの編集」から、先ほどの「Simplicity child」のカスタマイズしたCSS部分を、「Simplicity2 child」にコピペすればOKです。

参考までに、このブログの子テーマで使用している今のスタイルシートを貼っておきます。

ちょっとフォントのサイズなどに手を入れています。

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20151225
*/

/* Simplicity子テーマ用のスタイルを書く */

/*
メインページの見出しを変更
*/
.entry h2 a {
    font-size: 20px;
}

/*
サイドバーの見出しを変更
*/
#sidebar h3 {
    font-size: 18px;
    border-bottom: 5px solid #FF837B;
    padding: 10px 0;
}

/*
個別の記事ページの見出しフォントサイズを変更
*/
.type-post .article h1 {
    font-size: 26px;
}

.type-post .article h2 {
    font-size: 24px;
}

.type-post .article h3 {
    font-size: 22px;
}

.type-post .article h4 {
    font-size: 20px;
}

/*
コメント数を括弧で囲む
*/
.comment-count::before {
    content: "(";
}
.comment-count::after {
    content: ")";
}

＜困ったポイント４＞

公式サイトにもちゃんと説明があるのですが、

1系の子テーマなどで施したCSSカスタマイズが反映されない可能性がある。

のです。

ぼくの場合、サイドバーの見出し(1系では「h4」)のフォントサイズを変更したり、ボーダーを引いたりしていたのですが、2系では「h3」に変更する必要がありました。

テーマのカスタマイズを移行

これが手作業なので、ちょっと時間がかかります。

ブラウザの別タブで、もとの「Simplicity child」のカスタマイズを表示して、一つ一つ比較しながら設定値を移行していきます。

「Simplicity child」のカスタマイズを表示するには、そのためだけに、一旦「Simplicity child」を有効に戻す必要があります。

すべての移行が終わったら、色々なページを表示して「意図した通りの表示になっているか」を確認しましょう。タブレットやスマートフォンでの表示も、忘れずに確認が必要です。

後から設定モレが見つかった場合のために、以前のテーマ「Simplicity」と「Simplicity child」は削除せずに置いておいた方が無難です。

では、楽しいブログライフを！！