カテゴリー
CSS PHP Twenty Twenty Webサイト作成 WordPress

Twenty Twenty子テーマ作成

「Local by Flywheelでのローカルサイト作成」でも記載した通りこのサイトはWordPressの新デフォルトテーマ”Twenty Twenty”を使っています。

Twenty Twentyに手を加えていくにあたり子テーマを作ってみたので、その手順の備忘録を残します。

WordPressのテーマに追加・修正を行う場合は、functions.phpなどのPHPファイルやスタイルシート(style.css)を修正しますが、そのテーマ(親テーマ)自体のファイルを修正するのではなく、子テーマを作って子テーマフォルダ内のファイルを修正します。

これは、親テーマのファイルはテーマのアップデート時に新しいファイルに置き換えられ、修正内容が消えてしまう可能性があるためです。

1. 子テーマ用フォルダを作成する。

Local by Flywheelでローカルサーバー環境を構築している場合、テーマフォルダは下記になります。”username”は適宜置き換えてください。

  • C:\Users\username\Local Sites\memorandum\app\public\wp-content\themes

このテーマフォルダ内に子テーマ用フォルダを作成します。ここではフォルダ名を”twentytwenty_ch”とします。

2. twentytwenty_chフォルダに下記の2ファイルを作成する。

第1段階としてfunctions.phpとstyle.cssを作成します。

functions.php

下記のように親テーマのstyle.css、子テーマのstyle.cssを読み込むためのコードを記載します。

<?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
    function theme_enqueue_styles() {
	wp_dequeue_style( 'twentytwenty-style' );
  	wp_enqueue_style( 
            'parent-style', 
  	    get_template_directory_uri() . '/style.css',
  	    array(),
  	    wp_get_theme()->get( 'Version' ) 
  	);
  	wp_enqueue_style( 
  	    'child-style', 
  	    get_stylesheet_directory_uri() . '/style.css', 
  	    array( 'parent-style' ), 
  	    filemtime( get_theme_file_path( 'style.css' ) )
  	);
    }
?>

以下、各コードについて説明します。

  • add_action()：’wp_enqueue_scripts’アクションフック(後述)にtheme_enqueue_styles()を登録する。親テーマより後で実行されるよう、優先度に11を設定する(初期値は10で、小さい方が先に実行される)。
  • wp_dequeue_style()：親テーマから読み込んだstyle.cssのを一旦削除する。引数は親テーマのstyle.cssのハンドル名(Twenty Twentyの場合は’twentytwenty-style’)。
  • wp_enqueue_style()：親テーマのstyle.css、子テーマのstyle.cssの順に読み込む。
  • get_template_directory_uri()：親テーマのディレクトリのURLを取得する。
  • wp_get_theme()->get(‘Version’)：親テーマのバージョンを取得する。
  • get_stylesheet_directory_uri()：子テーマのディレクトリのURLを取得する。
  • array(‘parent-style’)：親テーマのstyle.cssの後に子テーマのstyle.cssを読み込むよう依存関係を設定する。
  • filemtime( get_theme_file_path(‘style.css’) )：style.cssの更新時刻を取得する(ブラウザのキャッシュ対策)。ファイルはURLではなくパスで指定する。
  • get_theme_file_path(‘style.css’)：style.cssが子テーマに存在すればそのパスを、子テーマにstyle.cssが存在しなければ親テーマのstyle.cssのパスを取得する。

WordPressでは、プラグインのロード後やテーマ設定の初期化後のような内部処理の途中で関数を実行することができます。この仕組みをアクションフックと呼びます。

‘wp_enqueue_scripts’もアクションフックの一つでスタイルシートやJavaScriptの登録時を示します。

add_action()でアクションフックに処理を追加登録します。

いきなりたくさんの関数が出てきて一気に難易度が上がったような気がします。特にstyle.cssに対して親テーマのディレクトリのURLを取得したり、子テーマのディレクトリのURLを取得したり、URLではなくパスを取得したりと非常にややこしい…

style.css

独自のスタイルを設定する場合は、子テーマのstyle.cssに設定を追記していきますが、まずは子テーマの情報のみを記載したstyle.cssを用意します。

/*
Theme Name: Twenty Twenty child
Theme URI:
Description: WordPressテーマ「twentytwenty」の自作子テーマです。
Template: twentytwenty
Author: My Name
Author URI:
Version: 1.1
*/

各行の意味は下記の通りです。

  • Theme Name：子テーマのテーマ名
  • Theme URI：子テーマのURL。空欄でもOK。
  • Description：子テーマの説明
  • Template：親テーマのフォルダ名。親テーマとの連携に必須。
  • Author：テーマの作成者名。”My Name”は適宜置き換えてください。
  • Author URI：テーマ作成者のURL
  • Version：子テーマのバージョン。親テーマと同一のバージョンを記載する(記事作成時点では1.1)。

3. 以上で下図のように子テーマが使えるようになる。

4. 子テーマを有効化する。

5. サイトの初期画面

はい、「Local by Flywheelでのローカルサイト作成」と同じ初期画面が表示されました。

この後固定ページや投稿ページを追加していきますが、その際functions.phpやstyle.cssへの追加・変更が必要になった場合は、今回作成した子テーマのファイルを修正することになります。

最後までお読みいただきありがとうございました。