phpもコピペでOK! wordpress子テーマの作り方

Advertisements

WordPressですでに存在しているテーマを使っていて
テーマにデフォルトで用意されている以外の部分を、
カスタマイズしたい!見た目をcssなどでアレンジしたい!となった時。
その前に絶対やっておいた方がいい作業、子テーマの作り方を、備忘録をかねて紹介したいと思います。

  1. WordPressの子テーマとは?
  2. 子テーマの作り方
  3. 子テーマのアップロード
  4. 子テーマのカスタマイズ
  5. その他の子テーマを用意する方法

1 WordPressの子テーマとは?

wordpressの子テーマとは、もともとのテーマ(子テーマの親となるもの)から、
特徴や機能や適用されたスタイルを引き継いだまま、そこからカスタマイズを行うための仕組みで、
子テーマに対して変更を施すことにより、親テーマには影響を及ぼすことがなくカスタマイズを加えることが可能になります。

子テーマを使うメリット

  1. 一からテーマを作る必要がないので、そもそものテーマをベースに使えること
  2. 親テーマのアップデートを行っても、子テーマに行ったカスタマイズが一緒に上書きして消えることはないので、安全に使うことができます。

2 子テーマの作り方

Advertisements

1 必要なファイル一式を用意

まずローカル環境で、下記の空ファイルを用意します。

  1. フォルダ(任意の名前ですが、「〇〇-child」(〇〇は親テーマの名前)としています。)
  2. style.css
  3. functions.php

上記2つのみあればOKですが、あとは任意で、
テーマ選択の画面に並んだ時のスクリーンショットも出したい場合、
style.cssと同じ階層に、screenshot.pngもしくはscreenshot.jpgの名前で、
1200×900pxのサイズの画像を用意します。

2 style.cssに記述する内容

空になっているstyle.cssに対して、下記を記述します


/*
Theme Name:   〇〇 Child
Description:  〇〇 Child Theme
Author:       your name
Template:    〇〇
Version:      1.0.0
*/

Theme Name子テーマの名前が入ります(必須項目)。
Description子テーマの説明が入ります。
Author子テーマの作成者が入ります。
Template親テーマのディレクトリが入ります。例えば親テーマがTwenty Fifteenなら、
twentyfifteen となります。(必須項目)。
不明な場合は親テーマのstyle.cssのファイルの最初の方に記載があるので、その表記と揃えます。
Version子テーマのバージョンを記載します。

3 Function.phpに記述する内容

親テーマのスタイルシートを正しい順番(親テーマのcss→子テーマの、カスタマイズしたcss)で読み込むため、
function.phpのファイルに以下を追記します。
(子テーマのstyle.cssに@importで引っ張ってくることは推奨されていません。)


<?php

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_uri() . '/style.css',
        array( 'parent-style' )
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

wp_enqueue_style()このwordpress関数を使って、読み込むcssを指定します。
parent-style / child-styleそれぞれ任意の名前を設定しています。
get_template_directory_uri()
親テーマのディレクトリのURLを取得しています。
. ‘/style.css’をプラスすることで、読み込みたい親テーマのstyle.cssファイルのURLを指定しています。
get_stylesheet_uri()子テーマのディレクトリのURLを取得しています。(親テーマ同様、子テーマのstyle.cssのURLを指定しています)
array( ‘parent-style’ )先に読み込みたいファイルを指定しています。この場合、parent-styleで、親テーマのstyle.cssを先に読み込みということになります。
Advertisements

3 子テーマのアップロード

FileZillaなどを使ってサーバーを開いたら、用意した「〇〇-child」のフォルダを、
丸ごと /wp-content/themes /の中に追加します。

そのほかのやり方では、フォルダを.zipファイルにして、
管理画面>外観>テーマの「新規追加」からアップすることでも、可能です。

4 子テーマのカスタマイズ

選んだ子テーマを有効化します。(親としているテーマは、消すと子テーマの参照元が消えることになってしまうため、そのままテーマは消さずにとっておきます。)

管理画面>外観>テーマエディター から、選んだ子テーマのファイルに書き込んでカスタマイズが可能です。

5 その他の子テーマを用意する方法

もともと、テーマによっては、使いやすいように、
親テーマの公式から子テーマが DLして使えるように用意されているものもあります。
例えば人気のテーマだと、下記のサイトからDLすることができます。

Astra

Oceanwp

うっかりテーマのアップデートをしたら全部消えた、、とかなってしまうとショックなので、
簡単にできる子テーマ作成はまず最初にやっておくのがおすすめです!

Advertisements

Similar Posts