【WordPress】 Twenty Twelveの子テーマを作る

このサイトはWordPressで作られており、現在のテーマはデフォルトの「Twenty Twelve」です。

これをカスタマイズしていくわけですが、その方法は2つあります。

  • 直接Twenty Twelveを改造する
  • 子テーマを作る

デフォルトテーマのカスタマイズ「直接Twenty Twelveを改造する」はテーマをアップデートした際に上書きされてしまうため、カスタマイズした内容が全て消えてしまう恐れがあります。
WordPress本体のアップグレードも同様です。
WordPressやテーマに脆弱性が存在する場合もあり、更新を拒み続けるのも非常に危険です。

このため「子テーマを作る」で作業を進めます。

スポンサーリンク

1. themes ディレクトリに子テーマのディレクトリを作り、style.cssを追加する。

themes_customize_01

子テーマのディレクトリ名は任意。

style.cssには以下のコードを入れる。

/*
Theme Name: Twenty Twelve Customize Theme
Description: Child theme for the Twenty Twelve
Theme URI: http://affinote.net/wp-content/themes/twentytwelve_customize
Author: ameotoko
Author URI: http://affinote.net/
Template: twentytwelve
Version: 1.00
*/

@import url(‘../twentytwelve/style.css’);

説明をすると以下のようになります。
Theme Name: 子テーマの名前・・・必須
Description: 子テーマの説明
Theme URI: 子テーマのURL
Author: 作者
Author URI: 使うサイトのURL
Template: 親となるテーマの名前・・・必須
Version: バージョン
@import url(‘../twentytwelve/style.css’); :親テーマのURL・・・必須

新しくCSSを追加する場合はこのコードの後に加えていきます。

2.同様にfunctions.phpを追加する。

themes_customize_02b

functions.phpのコードはとりあえず空にしておく。

<?php
 
/* ここに新しく追記 */
 
?>

functions.phpとは「関数ファイル」でテーマ特有の機能を読み込むためのものです。
このファイルにはサイトの表示だけでなくWordPressのダッシュボード(管理画面)への機能追加も含まれているため、万が一コードを間違えるとダッシュボードが表示されなくなるという症状を起こします。
もしダッシュボードがおかしくなった場合はfunctions.phpも疑いましょう。

また、functions.phpはstyle.cssと反映される仕組みが異なります。
style.cssの場合は同じ項目があると親テーマより子テーマが優先されますが、functions.phpの場合は同じ項目を記載することが出来ません。
同じ項目があるとエラーになるようです。

すなわち親テーマのfunctions.phpに記載されているなら親テーマを変更し、記載されていないなら小テーマのfunctions.phpに追加するということになります。
もし親テーマがアップデートされた時には親テーマで変更した内容が消滅します。
このため再度盛り込む直す必要があるということです。

少々厄介ですが親テーマのfunctions.phpで変更した内容はどこかに記録しておかないといけません。
覚えておきましょう。

【参考サイト】
【注意】子テーマ作成でトラブルが起きたら…子テーマをつくってのカスタマイズ方法-functoins.php篇(The Present Note) 

3.WordPressのダッシュボードで子テーマを有効化する。

ダッシュボードの「外観」→「テーマ」でテーマ一覧が表示されますので、追加した子テーマを有効化する。

themes_customize_03

サイトの表示やダッシュボードがおかしくないか確認しする。

以上で子テーマの作成は終了。

【参考サイト】
WordPress 子テーマ の作り方(SEI2の日記)

実際にやってみて

以前WordPressをいじったときは親テーマを直接変更し、挙句の果てはどこに手を入れたかわからなくなり問題がでても直せないということをやらかしています。
子テーマならそれも無くなりそうですね。

またfunctions.phpについては扱いが相当に厄介なことを知りました。
要注意ですね。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA