「子テーマ」って、ワードプレスならでは、って感じです。

ワードプレスは、プラットホーム(CMS、管理画面)、テーマ(テンプレート)、プラグインなど様々なプログラムに更新が入ります。言わば、成長するブログプラットホームです。

それらの更新を取り入れつつも、自分のカスタマイズを残していくために「子テーマ」を作ります。

CSS追記と子テーマ

ブログのデザイン変更だけなら、管理画面の「外観→CSS編集」でほとんどまかなえます。

基本的にこちらが推奨されています。んが、機能を追加したり、細かいHTMLの変更には子テーマが便利です。

子テーマの作り方(4ステップ)

子テーマ作成に必要なのは、「子テーマディレクトリ(ファイルフォルダ)」と「style.css」と「functions.php」です。

手順は下記のとおりです。

  1. サーバーに子テーマフォルダを作る
  2. “style.css”を新規作成(必須は2項目)
  3. “functions.php”を新規作成(定型文をコピペ)
  4. 子テーマを有効化する

(おまけ1)”screenshot.php”を新規作成で、管理画面にテーマのイメージを表示させることができます。

では、一つずついきましょう。

サーバーに子テーマフォルダを作る

子テーマ
サーバー上に子テーマ用のフォルダーを作成

お使いのレンタルサーバーのコントロールパネル、ファイルフォルダにて、”themes”の階層を探します。

ブログ名のフォルダ→wp-content→themesの直下に空のフォルダーを作成し、フォルダ名_childと命名します。(ファイル名は自分が分かれば何でもよい)

style.cssの作り方

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

Child theme style.css
子テーマの”style.css”を新規作成

出来た空のファイルに下記の内容を記述します。

/*
Template:twentyseventeen (←親テーマの名前)
Theme Name: twentyseventeen_child (←子テーマのファイル名)
Theme URI: https://noronoron.com/customize-memo/wp-content/themes/twentyseventeen_child/ (←子テーマのフォルダーアドレス)
Author:のろのろ (←筆者)
Author URI:https://noronoron.com/customize-memo/article-author/noronoro/ (←あれば筆者紹介ページ)
Description: Child Theme of Twenty Seventeen (←ファイルの説明文)
*/

必須なのは最初の2行だけの様です。
更新情報を取得する親テーマを定義するTemplate:twentyseventeen(親テーマ名)と、小テーマを定義するTheme Name: (子テーマ名)です。

CSSを追記するだけなら、子テーマはいらないカモ。

functions.phpの作り方

“style.css”と同じ手順で、”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' );
}
?>

この部分は、定型文です。ファイルの冒頭にコピペするだけです。
どのブロガーさんも一字一句違えずに同じもので、ちょっとびっくり。

子テーマがあれば、そちらを優先。なければ親テーマを参照しますって感じ。
英文的には、親テーマを読んだ後に、子テーマも読み出します!みたいな感じ??

このfunctions.phpは、失敗しちゃうと管理画面からすべて真っ白になって心底驚きます。
そういう時は、サーバーに戻って修正しています。

子テーマを有効化する

"子テーマ"を有効化する
“子テーマ”を有効化する

最後に管理画面に戻って、外観→テーマを見ると、子テーマが出来ていると思います。ここで”有効化”を選べば設定は終了です。

子テーマ設定のおまけ

おまけ1、screenshot.pngを作る

上の”子テーマ”を有効化するの画面に違和感を感じた人は、正解です。
上の手順で設定すると、テーマのイメージは紫枠内の様に画像がありません。

child theme screenshot
子テーマ作成、screenshot.pngを作る

オレンジ枠内の様にイメージを表示したい場合は、親テーマからscreenshot.pngをコピペします。
管理画面でのわかりやすさはあまり重要ではないかもしれませんが、気分の問題で、なんとなく。

screenshot.php編集
screenshot.php編集

おまけ2、”子テーマ”を使わないCSS編集

CSSの変更だけなら、実は子テーマはいらないんじゃないか…っと思い始めています。
外観→CSS編集に追記、上書きしたいコードを貼るだけです。

additional css
CSSの追記

私は、HTML部分も修正したりするので、子テーマを使っていますが…

余談:テンプレートとテーマ

FC2ではテンプレート、Seesaaでは、デザイン、Bloggerではテーマと呼ばれている部分は、ワードプレスではテーマと呼ばれています。
ワードプレスでは、page.php、style.cssなど個別の”テンプレート”と呼び、包括的なパッケージを”テーマ”と呼んでいるようです。

他のブログプラットホームとの大きな違いは、FC2、Seesaa、Bloggerでは、テンプレートの更新は全く経験しなかったのに、ワードプレスではワードプレス自体、テーマ、プラグインにそれぞれプログラム更新が発生し、プラグインが10個程度の私の場合は、週に2回ほど何かしらの更新があります。

更新をインストールすると、独自にカスタマイズした部分が上書きされてしまいますので、それを避けるために、提供元のオリジナルテーマを親テーマ、コピーを作成し自分のカスタマイズが反映された”子テーマ”を分けて管理することが多いようですね。

詳しくは、wordpress codex(日本語版)、「Codex子テーマ」をご参照くださいませ。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください