Twenty Elevenのアップデートでやっちまった

当サイトは、2013年9月4日現在、WordPress標準でついてくるテーマ「Twenty Eleven」を少しだけ修正して使っているのですが、最初は基本機能だけで使うつもりだったので、Themeのアップデートの影響を受けないから大丈夫だろうと、Twenty ElevenのCSSを少しだけ修正して使っていました。

ところが、先日、WordPress 3.6へのアップデートと相まって、TwentyシリーズのThemeのアップデートが表示された際、うっかりこれを実行してしまいました。CSSは一応分けておいたから大丈夫だろうとたかをくくっていたのですが、どうやらアップデーターがThemeフォルダごと削除して書き換えてしまったらしく、追加しておいたオリジナルCSSファイルは無くなっていました。CSSで微調整した部分は全てリセットです・・トホホ

CSSファイルを修正する必要性が出来た時点で、親テーマ（Twenty Eleven）から継承して、子テーマ（Twenty S-Factory）てな感じにしておかなきゃいけないなとは思っていたのですが、ついつい後回しにしてしまっていたツケが返ってきました。

仕方ないので、もう二度と同じ失敗は勘弁なので、テーマを親から継承して子テーマで定義し直すことにしました。とは言っても難しい作業では無いです。FTPにアクセスできれば容易です。

とりあえずヘッダーの画像は確保して置きましょう。「cropped-xxxx.jpg」という感じのファイル名でuploadフォルダに保存されていました。Twenty Elevenの標準機能にある、ヘッダー画像を任意にアップロード出来る機能から登録するとこのファイル名になるのを改めて確認しました。

後は、FTPでWordPressのディレクトリにアクセスして、Themeフォルダから任意のテーマをごっそりとローカルにコピーして来ます。この中で必要なファイルは、

• screenshot.png
• style.css
• readme.txt（無くても良いかな）

これだけです。

screenshot.pngは、テーマ選択画面に表示されるテーマのサムネイル画像なので、デザインを修正した後から差し替えると良いですね。とりあえずはTwenty Elevenのをそのまま残しました。別にこの画像ファイルは無くてもエラーにはならない様で、サムネイルが表示されないだけです。

さて、本題はstyle.cssが肝となります。このstyle.cssファイルの冒頭部分の記述で、親となるテーマをそのままインクルードして来ることが出来ます。

/*
Theme Name: Twenty Eleven S-Factory Version
Template: twentyeleven
Theme URI: https://www.s-fact.biz/
Author: shinsuke sasaki
Author URI: https://www.s-fact.biz/
Version: 1.6
*/
@import url(../twentyeleven/style.css);

これを見ていただければ解説っぽい事は不要だとは思いますが、「Template: twentyeleven」を指定しているのと、「@import url(../twentyeleven/style.css);」という記述から、twentyelevenという親テーマをテンプレートとして継承して使いますという定義をしている訳です。

たったこれだけのカスタマイズでオッケーです。

フォルダ名をtwentyeleven以外の名前にして、zipで圧縮し、WordPressのテーマインストール画面から、zipファイルをアップロードしてテーマを追加します。その後アップロードしたこのテーマを有効にすれば、親－子の依存関係を持たせた状態で、Twenty Elevenから派生したテーマをオリジナルとしてカスタマイズして行ける訳です。もちろんこのままだとTwenty Elevenと見た目何も変わりません。まだ何もカスタマイズしてませんからね。

さて、確保しておいたヘッダー画像をアップロドします。Twenty Elevenはヘッダー画像をアップロードして、範囲選択で切り取ることも可能なテーマです。Twenty Elevenはシンプルですがそこが結構気に入っています。

この継承の方法を使っておけば、親テーマがアップデートされて機能が追加されたり改良されたりしたらその恩恵を受けることが出来ます。まぁ想定外の弊害も起こりえるとは思いますが、その時は修正するしか無いですね。

いずれにしても、これでWordPress標準テーマをそのまま使っているリスクは回避出来る訳です。この仕組は知っていたのでとっととやっておけば良かったと思います。人間痛い目を見ないと学習しないというのを改めて再認識した次第です。お客さんの仕事だときっちりやるけど、自分の事だとつい横着してしまうのは反省点だなと思った次第です。

最終的にstyle.cssを下記のように修正しました。ページの頭部分の隙間が気になるのと、サイドに配置したSNSバッヂの囲み線を定義しただけですけどね。あと何かやってた気がするんですが思い出せないので、きづいたらstyle.cssに追記していくだけです。

/*
Theme Name: Twenty Eleven S-Factory Version
Template: twentyeleven
Theme URI: https://www.s-fact.biz/
Author: shinsuke sasaki
Author URI: https://www.s-fact.biz/
Description:
*/
@import url(../twentyeleven/style.css);
#page {
margin-top: 2px;
}
.top-column-sidelist {
border-style: solid;
border-width: 1px;
border-color: #000080;
padding: 10px 10px 0px 10px;
margin-top: 3px;
}

CSSは後から読み込まれる方が優位だとブラウザが判断する仕組みなので、親テーマのstyle.cssで定義されているパラメータが気に入らなければ、子テーマのstyle.cssで定義して上書きしてしまえば良いのです。微調整程度のカスタマイズでしたらこの方法で十分だと思います。少なくとも当サイトでは現状はこれで十分です。