MENU

WordPressの子テーマ化という方法でテンプレートをカスタマイズする

2016.1.5 WordPress全般

WordPressのテーマ作成には二つの方法があります

ゼロからテーマを作る方法と、既存のテーマを「子テーマ化」という形でカスタマイズする方法です。

今回は、子テーマ化という方法で、既存のテーマをカスタマイズする方法を書きます。

カスタマイズするのは、WordPressをインストールした時に自動的に設定されるTwenty Sixteenです。

子テーマ化のメリットは、アップデートに対応できることです

子テーマ化をすることで、オリジナルのテーマに手を加えることなく、カスタマイズすることができます。

子テーマ化することにより、カスタマイズした部分はそのまま残しつつ、オリジナルテーマ本体は常に最新版にしておくことが可能になります。

では、作ってみましょう

まずは、フォルダを作成します。名前は半角英数小文字でスペースを入れずに作ります。今回は「child_twentysixteen」にしました。

img

次にstyle.cssを保存します。

img

style.cssには以下の記述をします。

「外観 > テーマ」を見ると、先ほど作った子テーマができています。

img

テーマを有効化しましょう。するとこのような表示になります。

img

スタイルシートが効いた状態にするのは、以下の手順です。

先ほど作った、style.cssに、twentysixteenフォルダのstyle.cssの内容を丸ごとコピーします。
(先ほど記述したTemplate:twentysixteenなどの部分は消さないように注意)

または、

以下のように、@importでtwentysixteenのstyle.cssの内容を読み込みます。

子テーマ化とはどういう仕組みなのか

「Template:twentysixteenの内容を、Theme Name:child_twentysixteenで上書きする。」という仕組みです。

最初に子テーマを有効化した時、スタイルシートが効かない状態になったのは、子テーマのstyle.cssが、twentysixteenフォルダ内のstyle.cssを上書きした状態になったからです。

子テーマ化では、上書きしたいファイルだけを、親テーマから子テーマフォルダにコピペして、カスタマイズしていきます。
(functions.phpだけは上書きが使えないので注意です。functions.phpを変更したい場合は、子テーマ化という方法を使わないのが無難です。)

ヘッダー画像とメニューの位置を入れ替えます

img

twentysixteenフォルダのheader.phpをコピーして、child_twentysixteenフォルダにペーストします。
img

child_twentysixteenフォルダのheader.phpをエディタで開いたら、44行目から73行目をカットして、95行目にペーストします。

メニューの位置が変わりましたね。
img

ということで、頑張ってください。

手に負えなくなったらご連絡ください。

コメントを残す

*