このブログのテーマは長いあいだ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」は削除せずに置いておいた方が無難です。
では、楽しいブログライフを！！