子テーマで、もう更新は怖くない

【ホームページの育て方 12】

以前のメール講座での『インストール三昧』でも
ちょっとご紹介した『子テーマ』

まずは復習しましょう！

前回はすでに作られている子テーマをインストールする方法をお伝えしましたが、今回は実際に自分で作る方法をご紹介します。

子テーマを作る

1. 必要なファイルを作成

子テーマを作るには
下記のファイルが必要です。

・functions.php
・style.css

まず、子テーマ用に新しくフォルダーを作ります。
フォルダー名は『テーマの名前-child』がわかりやすくていいですよ。

例えばテーマ名が「twentyeighteen」だったら
「twenteeneighteen-child」になります。

 ファイルを作るにあたりWindowsの「メモ帳」は不具合が起きやすいので使わないでください。
オススメ無料テキストエディタはWindows 「Mery 」、Mac「CotEditor」 または「mi」など。

■ functions.php

functions.phpという名前でファイルを作ります。
これに子テーマ（child）での変更を認識させるためのコードを入れましょう。

記入するのは下記のコード。

<?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( 'style-default', get_stylesheet_uri() );
//wp_enqueue_style( 'style-form', get_template_directory_uri() . '/css/form.css', 'theme_stylesheet-css', false, 'all' );
//wp_enqueue_script('jquery');
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js/script.js', 'jquery', false, all );
}//stylesheet version autoupdate.
//これがないと自動で付与されるバージョンで上書きされ、不具合。
function my_update_styles( $styles ) {
$mtime = filemtime( get_stylesheet_directory() . '/style.css' );
$styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'my_update_styles' );function exclude_category( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( 'cat', '-4' );
}
}
add_action( 'pre_get_posts', 'exclude_category' );

このままコピぺして使ってください。

■ style.css

style.cssファイルを作ります。
これは文字の大きさ、色、バックグランドイメージなどをカスタマイズするもの。

親テーマが新しく更新されても、ここの内容は変わりません。

今後もカスタマイズ場合はこちらに追加していきます。

このファイルを認識させるために下記ようなコードを記入します。
こちらは使うテーマによって内容が異なりますので注意してください。

/*!
Theme Name: Twenty Eighteen Child
Author:  Your Name
Template: twentyeighteen
Version: 1.0.4
Text Domain: twentyeighteen-child
*/

必須なのはこの２つ

・Theme Name: （子テーマの名前）
・Template: （親テーマの名前）

大文字小文字、スペース、スペルミスのないように。間違えると認識されません。
落ち着いてタイプしましょう！

バージョンは親テーマのバージョンを入れておくといいですよ。

ファイルの変更が終わったら保存してフォルダーごとzip形式に圧縮します。

3. 子テーマをインストール

ワードプレスのダッシュボードの左メニュー
外観＞テーマから「新規追加」をクリック。

「テーマのアップロード」をクリックすると「ファイルを選択」が出てきます。

2で作ったchildのzipファイルを選んで「今すぐインストール」します。

すると画面に新しくChildとついたテーマが入ります。
このChildのテーマを「有効化」します。

これで、基本は親テーマのテンプレートを読み込んで表示し、
カスタマイズした箇所は子テーマのフォルダを認識して表示されるようになります。

お疲れさまでしたー！

4. 2回目以降のカスタマイズ

次回からは何か変更する度に、全てこの子テーマのstyle.cssファイルを変更します。
手元に保存してあるファイルに変更・追加したら
FTPソフトやサーバーの専用FTP機能を使ってファイルをアップロードしてくださいね。

アップロードする場所は
wp-content / theme の中にあるchildフォルダ内です。

まとめ

基本は2つのファイルを作るだけ！
これで、親テーマのアップデートにも影響されずにカスタマイズが守られます。
始めだけ大変だけれど、そのあとが楽なのでぜひ子テーマを作ってからいろいろ編集してください。

打ち間違いに注意して行ってくださいね。

おまけ

稀に親テーマのバージョンをアップデートしても更新されていない通知（数字）が消えない時があります。
その時は子テーマのバージョンを親テーマと同じものに書き直してください。

簡単に書き換える方法は外観＞テーマの編集
右上にある「編集するテーマを選択」から親テーマを選択、バージョンを確認

子テーマを選択してバージョンを書き換えると通知が消えることがあります。

次回は

『PC用・スマホ用』です。
お楽しみに♪