WordPress のテーマの編集 [技術]

こことは別にやっているブログで WordPress をつかっており、テーマとして Twenty Twelve を採用しているのですが、Twenty Twelve はそもそもシンプルなテーマなのでおおむねいじるところはないとは言えど、細かいところで「ここは気に入らないな」という部分はやっぱりある。それで、そういう「ここは気に入らないな」という細かい部分をいままでは style.css なり *.php なりをちょくせついじることによって修正していたのですが、テーマの更新があるとそのたびにそれまで修正していた箇所をまた一から修正し直さなければならず、これがびみょうに手間なので、これまで「何かめんどくせえな」と敬遠していた子テーマに手を出すことにしました。以下、子テーマを作成するうえでの自分用メモです。

まず、子テーマをいじるには、themes 直下に子テーマのディレクトリを作成する必要があります。（ぼくの場合、Twenty Twelve の子テーマをいじりたいので、twentytwelve_child というディレクトリを作りました）

つぎに、その子テーマのディレクトリに、親テーマの style.css をコピーします。そして、style.css の最初のコメント部の "Theme Name: ..." の、親テーマの名前が既定で入っている "..." の部分を子テーマ名（いま例にしている場合で言うと "twentytwelve_child"）で置き換え、その次の行に "Template: 親テーマのディレクトリ名" という記述を追加し、さらに、最初のコメント部のあとに "@import url('../親テーマのディレクトリ名/style.css');" として親テーマをテンプレートとして指定します。最後に、"Reset" とあるコメント以降をばっさり削除。これで、style.css にかんしては準備完了です。参考のため、ぼくの style.css の上に述べた変更を施した部分の抜粋を以下に例示します。

/*
Theme Name: twentytwelve_child
Template: twentytwelve
（中略）
*/
@import url('../twentytwelve/style.css');
（後略）

それから、冒頭に "<?php" だけを記述した functions.php を新たに作り、子テーマ・ディレクトリにアップしておく。そうすると、ブログの編集画面のテーマ・メニューにいま作った子テーマが利用可能なものとして列挙されるので、それを有効化します。

さて、上の準備をしたうえで、子テーマ・ディレクトリの style.css なり functions.php なりをいじることでカスタマイズをしていくわけですが、大ざっぱな原則として次のことが言えると思います。

• スタイルだけをいじりたい場合、つまり、表示内容そのものを変えるのではなくその見せ方を変えたいという場合や、あるいは、ある表示を非表示にするという場合は style.css をいじる。
• 表示そのものを変えたい場合、つまり、表示の形式ではなく内容を変えたい場合は functions.php をいじる。

だいたいは上の原則にしたがってカスタマイズができると思いますが、場合によっては個々の *.php ファイルをどうにかする（つまりは、子テーマをいじるのではなく、親テーマのファイルそのものをいじる）必要が出てくるかもしれません。（さいわいにして、あまり複雑なことをしようとしていないためか、ぼくはそういう必要に迫られていない）

ぼくは、冒頭でも言った通り、基本となるテーマにそもそもシンプルな Twenty Twelve を使っているので、必要最小限のカスタマイズしかしていませんが、カスタマイズしている箇所を例として掲げておきます。

・記事のタイトルのすぐ下に表示される「コメントをどうぞ」という記述を非表示にする。

style.css に

.comments-link {
    display: none;
}

と記述。

・ブログ・タイトルのすぐ下に表示されるサイト・ナビゲーションを非表示にする。
style.css に

.main-navigation {
    display: none;
}

と記述。

・WordPress では複数人ブログ投稿者がいないと個々の記事に投稿者名が表示されないので、それをシングル・ユーザーでも表示させるようにする。
style.css に

.single-author .entry-meta .by-author {
    display: inline;
}

と記述。

・記事の末尾に表示されるカテゴリー、タグ、投稿日、投稿者などの表示を変える。
子テーマの functions.php に親テーマの functions.php から twentytwelve_entry_meta 函数をコピーしてきて、そのなかの $utility_text の記述をいじる。

最初は、どこをどういじっていいのかよく分からないと思いますが、とりあえずはブログの HTML ソースを見て、「ここは変えたいな」という要素のクラス名で元の style.cssあるいは functions.php を grep して、そこで見つかった属性定義なり函数定義なりをいじってちょっと試行錯誤すれば、すぐに分かるようになります。（はじめから親テーマのディレクトリにたいして一括 grep すればいいような気もするけど、そうするのは style.css あるいは functions.php をいじってみてどうにもならなかった場合の奥の手とするべきだと思う）