WordPressのテーマをカスタマイズするために、子テーマを作成する | もやしほーむ WordPressのテーマをカスタマイズするために、子テーマを作成する | もやしほーむ

もやしほーむ

作成したプログラムの紹介や、日々の徒然について更新

WordPressのテーマをカスタマイズするために、子テーマを作成する

time 2022/06/22

WordPressのテーマをカスタマイズするために、子テーマを作成する

WordPressのインストールが終わったら、次に重要となるのがテーマです。僕の場合は、今はマテリアルというテーマを使用しています。このテーマを直接編集してしまうと、テーマのバージョンアップのたびに設定をし直さなくてはならなくなります。そこで、子テーマというものを作成し、更新毎にテーマの再設定を行わなくても良いようにする方法があるのです。

sponsored link

はじめに

WordPressにはテーマと呼ばれるCSSなどの設定ファイルのテンプレートが存在します。

これをうまく活用することで、ブログ形式のサイトとして、ニュースサイトとして、ショッピングサイトとして(最近はEC-CUBEが有名ですが)、各種用途に合った特色を全面に押し出したサイト作りが簡単に行えるようになります。

テーマの設定は、このようにサイト作成において最も重要視すべき点であり、一番最初にサイト立ち上げの意味を考えさせられる点でもあります。

どのようなサイトにするかという明確なビジョンを考えていなかった場合は、ここで行き詰まることになります。

しかし、まだ最初の最初の段階なので、ここはじっくりと時間をかけて良いと思います。

テーマが決まったら、次に子テーマというものを作成することをオススメします。

これは、テーマの内容を引き継ぎつつ、オリジナルとは違う個別設定を行いたいときに必要な方法です。

子テーマを作っておくことで、元のテーマに更新がかかったときも安心してアップデートすることが可能となりますので、是非この機会にやり方を学んでみてください。

ちなみに、マテリアルには元から子テーマが用意されています!チャレンジということで、子テーマ作りを行っております。

子テーマ作成にあたり、次のサイトなどを参考にしました。

wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順

http://viral-community.com/wordpress/wp-child-theme-5818/

アップデートしても大丈夫!WordPressの子テーマでデザインのカスタマイズをする方法

http://liginc.co.jp/web/wp/customize/147844

【注意】子テーマ作成でトラブルが起きたら…子テーマをつくってのカスタマイズ方法 -functions.php編

http://presentnote.com/child-theme-customaize-functions-php/

子テーマの作成

子テーマの作成手順としては、子テーマ用のフォルダの作成、style.cssの作成、各phpファイルの作成・設定・ftpでファイルをアップロード、子テーマの有効化といった内容になります。

子テーマ用のフォルダを作成する

テーマはWordpressのフォルダに格納されています。

場所は以下のところにあります。

例)
C:\(Wordpress格納場所)\wp-content\themes\

このフォルダ下にメインテーマに沿った名前の子テーマフォルダを作成します。

一般的に子テーマのフォルダ名は「テーマ名」+「-child」という形にすることが推奨されています。僕の場合はテーマ「マテリアル」を使用しているので、「マテリアル-child」という名前の子テーマ用フォルダを作ることになります。

C:\(Wordpress格納場所)\wp-content\themes\マテリアル-child

これで準備は整いました。次は中身の設定をしていきます。

style.cssの作成

先ほど作成したフォルダ下に「style.css」という名前でファイルを作成します。そして、「style.css」の設定を行います。

まず、

/*
Template: マテリアル
Theme Name: マテリアル-child
Theme URI:
Description: sydneyの子テーマです
Author: 白川秋
Version: 1.0
*/

という記述をします。各項目の説明は次の通りです。

Template親テーマのディレクトリ名(※必須)
Theme Name子テーマの名前(※必須)
Theme URI子テーマのURI(元となるソースがある場合は設定します)
Description子テーマの説明
Author子テーマの作者
Version子テーマのバージョン

シンプルに必須科目だけを設定しても構いません。

これに、親テーマを読み込む記述を加えます。

@import url('../マテリアル/style.css');

最近では、「functions.php」ファイルを作成して、そこに次のように記述する方法もあるようです。

<?php
function load_parent_css(){
    wp_enqueue_style( "parent_style", get_template_directory_uri()."/style.css", false );
}
add_action('wp_enqueue_scripts', 'load_parent_css');

これで基本的な設定は終了です。

各phpファイルの設定方法

次に各テンプレートファイル(header.phpやfooter.php、single.phpなど)の設定方法を説明します。

単一記事の投稿(single.php)部分にgoogleアナリティクストラッキングコードを埋め込みたいというときなど、個別に設定を行いたい場合があると思います。

そのような場合、元の親テーマの各phpファイルを子フォルダにコピー&ペーストしてから内容を編集してください。

functions.phpについて

このfunctions.phpだけは特殊で、他のphpファイルのように単純に上書きをするという動作をせず、「子テーマ→親テーマ」という順番で読み込まれるため、関数の追加を行うことだけしかできません。

厳密に言うと、関数の上書きをする手段はありますが、その場合、次の手順を子テーマで定義する必要があります。

  • 親テーマの変更したい関数を削除(remove)する
  • 削除した関数を新たに追加(add)する

ちょっと面倒くさいですよね。詳しくは下記のサイトで解説がされていますので、興味のある方は参考にされてみてはいかがでしょうか?

WordPress子テーマを作成し任意のphpをカスタマイズする方法

http://ceatant.com/blog/tech/wordpress%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E4%BB%BB%E6%84%8F%E3%81%AEphp%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B/

アップロード

以上の編集がひと通り終わったら、FTP通信を行い、サーバー上にファイルをアップロードします。

子テーマを有効化する

「外観」→「テーマ」を押すと、作成した子テーマが追加されていますので、「テーマを有効化」して作業は終了です。

簡単でしたよね?

ね?ね?

まとめ

子テーマを利用するとテーマの更新の際も安心して親テーマのアップデートを行うことができます。そして子テーマに個別に設定を行うことで、より自由度の高いカスタマイズを行うことができると思います。

最後まで読んでいただき有り難うございました。

ご意見ご感想ございましたら、ひとこと書き込みをしていただけると励みになります。

sponsored link

down

コメントする

コメントは日本語で入力してください。(スパム対策)




もやしほーむ

白川秋

白川秋

こんにちは。各種プラットフォームでのWordpress、EC-CUBEの使い方や、PHPプログラミングについて書いています。よろしくお願いいたします。



sponsored link

カテゴリー

表示できるコメントはありません。
2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930