ワードプレス、「子テーマ」作成


子テーマとは、公式やプロが配布しているワードプレスの「テーマ」のデザインや機能を利用しながらも、自分のカスタマイズを反映させるための仕組みです。

ワードプレスデフォルトテーマ「Twenty Twenty-Two」をインストールするにあたって、「子テーマはまだ必要なのか?」と英語で調べてみたのですが、不必要だとの記述が見つからなかったので、今年も子テーマ作成を継続することにしました。

functions.phpの作り方が、親テーマが「get_stylesheet_directory()」系なのか「get_template_directory()」系かで明確に分かれちゃっていたので、記事更新しました。

参考:Wordpress Theme Handbook、Child Themes

子テーマ作成の流れ

  1. サーバーで子テーマのフォルダを作る
  2. 「style.css」を新規作成
  3. 「functions.php」を新規作成
  4. ワードプレス管理画面で、子テーマを有効化する

「子テーマ」ディレクトリの作成

ディレクトリとは、フォルダのことです。

レンタルサーバーのコントロールパネルのファイルマネージャーに入り、

カラフルボックス、ファイルサーバー

入った先で、public_htmlから階層構造を辿って、「themes」のフォルダー上で「+New Folder」または「+フォルダー」を押す。

フォルダー名は「親テーマ名-child」と命名するのが、公式の推奨。

Siteground、子テーマフォルダー

※階層設定はサーバーで違います。

style.cssをつくる

上で作成した子テーマフォルダー内に、「style.css」という新規ファイルを作成します。

Siteground style-css 子テーマファイル

出来たファイルを「編集」で開いて、ファイルの冒頭にCSSのコメントで「子テーマの名前」と「親テーマ」のフォルダ名を入れると、テーマとして認識されます。

/*
 Theme Name:   Twenty Twenty Two Child(子テーマの名前)
 Template:     twentytwentytwo(親テーマのフォルダ名)
*/

上記2つの情報は、「最低限」なので、ホントは日本語のマニュアルを見て、ステキ情報をもりもり追加できます。

↓私が実際に使っているコード↓

/*
 Theme Name:    twentytwentytwochild
 Template:      twentytwentytwo
 Theme URI:     https://tehehet.com/wp-content/themes/twentytwentytwochild/
 Description:   twentytwentytwochild
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html     
 Text Domain:   twentytwentytwochild
/*

参考:ワードプレスCodex日本語版「子テーマの作り方

functions.phpをつくる

functions.phpは、php関数を記述するファイルです。子テーマフォルダの中に、「functions.php」という名前のファイルを作成します。

「編集」で作成したファイルの中に入って、親テーマを呼び出した後に子テーマのカスタマイズを適用するコードをコピペするのですが…

親テーマが「get_template_directory()」系のコードを使っている場合(Twenty Twenty-Twoなど)は、下記のようなコードを使います。

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

親テーマが「get_stylesheet_directory()」系のコードを使っている場合は、下記のコードを使うとのこと。

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

個人的に、以前は下記のコードを使いまわしていたのですが、「Twenty Twenty-two」からこのコードが使えなくなったっぽいので、マニュアルを見直しました。あはは。

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

子テーマを有効化する

function.phpが作成できたら、ワードプレス側の管理画面に戻ります。

外観 → テーマ → 有効化

ワードプレス、子テーマを有効化する

これで終わり。

ただ、上の画像の様に子テーマにイメージがついてません。テーマのスクショをつけたい場合は、「ついでに」まで読んでいってください。

ついでに

機能には関係ないですが、「screenshot.png」を親テーマからコピーしておくと、テーマの管理画面にイメージが現れて分かりやすいです。

screenshot.png

コントロールパネルのファイルマネジャーに戻ります。

親テーマのフォルダから「screenshot.png」というファイルを探して、「コピー」を押すとポップアップが出てきます。

スクリーンショットpngをコピー

ココに子テーマのフォルダのパスを入れると、子テーマにコピーされます。

twentytwentytwochild installation

ワードプレスの管理画面に戻って、ページの再読み込みをかけるとイメージが反映されていると思います。

画像は、screenshot.pngという名前だったら違う画像ファイルでも同じところに反映されます。

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です