WordPress

WordPressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

WordPress

WordPressの子テーマの作成方法をまとめておきます。覚書をかねています。

style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。

style.cssのWordpressの子テーマの作成

必要最低限のコードは次のような感じです。 Template-childというフォルダを作り、その中にstyle.cssをいれてアップロードします。 Templateは子テーマにしたいテーマ名に置き換えてください。

/*
Theme Name: Template-child
Template: Template
*/

@import url('../Template/style.css');

Theme Nameは管理画面に表示される名前です。

あとは追記していけばいいだけです。

かぶった指定は上書きされます。 ただ、テーマによってはコードの都合により!importantで優先度を書き換える必要がありそうです。

スポンサーリンク

header.php、footer.php、single.phpのWordpressの子テーマの作り方

header.php、footer.php、single.phpは丸々コピーするだけです。 親テーマより子テーマの方が優先されて丸々上書きされます。

手順は次のような感じでもいいかもしれません。

  1. FTP上で親テーマのファイルを複製します。copyとついたファイルができあがる
  2. ドラックアンドドロップで子テーマのフォルダにファイルを移動。名前のあとについたcopyなどを取る。
  3. テーマの編集から必要なコードを追記します

これだけでOKです。header.php、footer.phpの利用用途は、アクセス解析のコードなどでしょうか。 single.phpは記事上や記事下のSNSやアドセンスなどの広告を追加できます。

昔は記事上や記事下にウィジェットを追加して広告などのコードを追加していました。 しかし、子テーマは安易に上書きすることがないため直接書いてます。 わざわざテーマの編集とウィジェットの両方を見る必要がなく、 ひとつの項目だけで完結するため作業がスマートになりました。

search.phpなどの他のファイルもこの方法でできます。複雑なテーマの場合、親テーマがフォルダ内にphpファイルを入れて階層をほっている場合があります。その際は子テーマ側にもフォルダを追加する必要があります。

スポンサーリンク

functions.phpのWordpressの子テーマの作り方

functions.phpの場合、最初の中身は下記のような感じでOKでしょう。 ファイルの上書きではなく、「子テーマ」を読みこんだのち、「親テーマ」を読みます。

<?php

/* ここに新しく追記 */

?>
スポンサーリンク

子テーマのアップロードと有効化

子テーマのフォルダは親テーマとは別フォルダで、themeフォルダにアップロードすればいいだけです。子テーマに切り替えるには親テーマではなく、子テーマを選び有効にすればいいだけです。ファイルをアップロードすれば、子テーマが増えています。

スポンサーリンク

子テーマの管理画面の画像はscreenshot.pngを用意

子テーマの管理画面の画像を表示したい場合、screenshot.pngというファイルをフォルダ名にいれてアップロードすればいいだけです。サイズは880px×660pxのようです。

スポンサーリンク

テーマ内にファイルを生成するプラグインの対応

yarpp(関連記事を表示するプラグイン)などテーマ内にファイルを生成するプラグインのファイルは親テーマから子テーマにファイルを移動しましょう。でないと機能しません。

わりと簡単だったため、もっと昔から使っていればよかったですね。

simplecityやcocoonなどの一部のテーマは親切に子テーマをダウンロードできるようにしていますが、大抵はないため自作することになりそうです。

cocoonについてはこちらの記事をみてください。

Cocoon(コクーン)のfunctions.phpカスタマイズ!
スポンサーリンク

追記:子テーマを作成するプラグイン

子テーマを作成するプラグインもでていますね。1回自作(自作というほど大変なものでもないですけど)するとほぼコピペで慣れてしまったため^^;、使っていませんが、参考までに紹介だけしておきます。

Child Theme Creator by Orbisius

不明点はプログラミングの質問掲示板なども利用するといいかも。

【有料9選】プログラミング質問サイト/質問し放題【無料15選】

コメント

タイトルとURLをコピーしました