コピペで出来る!WordPress Twenty Twentyの子テーマ作成

ワードプレスには子テーマというシステムがあります。

テーマをカスタマイズするときにとても便利なものです。

…と言うより、子テーマを使わないと、カスタマイズは難しいです。

子テーマを使わないと、テーマアップデート時に大惨事になります

ワードプレスのテーマは、意外とアップデート頻度が高いです。

Twenty Twenty など、WordPress デフォルトテーマは、アップデートの頻度が高いです。

アップデートの頻度が高いことは、本来は喜ばしいことです。

常にテーマが改善されている、ということですからね。

しかし、テーマファイルを直接編集している場合、アップデートが来ると困ります。

テーマファイルを直接カスタマイズすると、アップデート時に、今までのカスタマイズが水泡に帰してしまいます。

テーマファイルを直接改変するようなカスタマイズをするなら、子テーマを作ってカスタマイズするようにしましょう。

子テーマ作りの準備

子テーマを作る!!と考えている人には馬耳東風かも知れませんが。

子テーマを作る作業には、FTPソフトが欠かせません。

次のようなFTPソフトを導入しておいて下さい。

以下、FTPソフトを使ってアップロードするくらいは朝飯前だという皆様向けに説明いたします。

子テーマを作る

子テーマの作り方は、子テーマ – WordPress Codex 日本語版 に詳しく書かれています。

私もこれを見て子テーマを作りました。しかし、詳しすぎてわかりにくいとはこの事かも知れません。結構、苦労しました。

Twenty Twenty をこれからカスタマイズする方のために、先輩としてなるべく分かりやすく説明します。

子テーマフォルダを作る

まずは、wp-content/themes/直下に子テーマのフォルダを作ります。テーマフォルダー名は何でもいいです。

テーマフォルダーには、取り敢えずは、次の2つのファイルのみを作ります。

  • style.css
  • functions.php

それぞれのファイルに書き込む内容は次のとおりです。

style.css

子テーマのstyle.css には、次の4行を書けば十分です。

/*
Template:(親テーマ名)
Theme Name:(子テーマ名)
*/

WordPressの公式テーマ Twenty Twenty の子テーマとして child-01を作るとすれば次のように書きます。

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

functions.php

functions.php は、次のように書いて下さい。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}

ファイルの最後がPHPで終了するので、閉じタグ?>は省略します。

と言うより、省略しないと、不具合のもとを自分で作り出す感じになります。

このことは、以下などに詳しく書かれています。

子テーマフォルダをサーバーにアップロード

子テーマ内に style.css・functions.php を作ったら、 FTPソフトで /wp-content/themes の直下に 子テーマフォルダごとアップロードしましょう。

次に、WordPress管理画面→外観→テーマ で、子テーマ有効化します。

カスタマイズの考え方

子テーマを作って有効化したら、いよいよカスタマイズに着手します。

カスタマイズは全て、子テーマフォルダ内のファイルを編集して行います。

style.css・functions.php のカスタマイズ

子テーマのstyle.css・functions.php は、親テーマのstyle.css・functions.php 末尾に付加されます。

それを前提として、子テーマのstyle.css・functions.php を、適宜編集しましょう。

その他のファイルのカスタマイズ

style.css・functions.php 以外のファイルは、子テーマ内に親テーマと同名のファイルがあれば、子テーマのファイルが親テーマのファイルを上書きします。

style.css・functions.php 以外でカスタマイズしたいファイルがあるなら、 まず、それをコピーして子テーマフォルダ内に貼り付けましょう。

そして、子テーマ内のファイルを、適宜変更してカスタマイズします。

カスタマイズ準備完了!!

これでカスタマイズ準備完了です。

少しずつカスタマイズしていこうと思います。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: