Help us understand the problem. What is going on with this article?

WordPress 子テーマの作成

More than 1 year has passed since last update.

はじめに

  • まずはググって、色々な子テーマの作成の記事を見ながら試していたのですが、どうもローカルで試すと上手く行かず、悩みました。
  • 最終的には公式ドキュメントを見て解決できました。最初から公式をチェックすれば良かった。

子テーマの作成

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

$ cd /path/to/wordpress_root
$ mkdir wp-contents/themes/child
$ cd wp-contents/themes/child

style.css ファイルの作成

ファイルを作成します。

$ touch style.css

「Twenty Ten」を親として、子テーマを作成します。取り急ぎ、最低限の内容としては以下の感じ。

style.css
/*
 Theme Name: Twenty Ten Child
 Template: twentyten
*/

functions.php ファイルの作成

必須なのは style.css のみのようなのですが、この状態だと正しく表示されないので、この手順を行います。親テーマの css を @import する、というのが今までの方法だったようなのですが、良い方法ではないそうです。

子テーマ - WordPress Codex 日本語版

最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。

ファイルを作成します。

$ touch 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')
  );
}

子テーマの適用

管理画面から子テーマを選択

一覧に作成した子テーマが表示されますので「有効化」します。

スクリーンショット 2017-03-23 2.05.13.png

サイトの確認

無事、子テーマが適用されました。めでたしめでたし。

スクリーンショット 2017-03-23 2.07.26.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした