[ Sydney : 初心者必見 ] 子テーマの作成方法と重要性を理解する！(WordPress)

本記事上で使用するテーマは、Sydneyです。他のテーマでも子テーマの作成についても以下の手順で行って頂くことが可能ですが、カスタマイズ方法については、Sydneyのみに対応しております内容ですので、ご了承して頂ければと思います。

Webサイト制作をする上で、広く用いられているWordPressではありますが、有名なテーマといえばLightningやXeory, Cocoonなどがありますが、基本的に公開されているテーマを用いて、制作していく上では、「子テーマ」を準備する必要があります。

本記事では、WordPressの既存テーマを使用し、Web制作を行っていく上で作っておく必要がある子テーマの作成方法及び子テーマを作成する意味や作成しなかった場合の注意点までを「Sydney」というテーマを通して、ご紹介させて頂いております。

✅   既存テーマとオリジナルテーマの違い
✅   Sydney : インストール〜有効化
✅   子テーマ作成方法と準備する意味
✅   Sydney(ヘッダー): カスタマイズ方法

既存テーマとオリジナルテーマ

意外と教えてもらわないとわからない点として、既存テーマとオリジナルテーマの具体的な違いが挙げられますが、この違いを理解することは、各々を使いこなす上でも大事になりますので、覚えておきましょう。

既存テーマの特徴

目的別に応じたサイトレイアウトを選ぶことができる
レイアウト構造がほぼ固まっているため、制作時間の短縮が可能である
テーマによってくるが、豊富な機能が予め実装されている
サイトの色やロゴ画像、背景画像などの基本的な設定は管理画面から簡単に行える
管理画面からのカスタマイズ及びコードの修正を行う際は、子テーマの作成が必要

なぜ、子テーマが必要なのか??

テーマのアップデートが行われる際、今までカスタマイズしてきた内容が初期化されてしまうため、テーマの機能などを継承した子テーマを作成する必要がある。

プラグインの使用の制限

既存テーマの場合は、特定のプラグインが非対応の場合があるため、確認するようにすること。

オリジナルテーマの特徴

HTML/CSSベースで制作を始められるため、phpに不安がある人でも安心
非対応のプラグインなどの指定がない
必要なファイルなどは、自身で一から作成する必要がある
完全オリジナルのテンプレートを作成することができる
アップデートも制作者次第のため、子テーマの作成が必要がない
コーディングのレベルは、中級者以上が推奨

コーディングレベルは、中級以上が好ましい

1からのコーディングになるため、HTML/CSSのによるレイアウトの作成からJavaScriptのアニメーション実装までを問題なくこなせるのが必要なコーディングレベルとしては、基準になる。

Sydneyの準備

作業を始める前に、Sydneyの公式ページも載せておきますので、参考までに確認しておいてください

Sydney | WordPress Theme Directory

Sydney は、企業やフリーランサーが素晴らしいオンラインプレゼンスをすばやく作成する手法を提供する、強力なビジネステーマです。Sydney は、Elementor と完全互換性があるだけでなく、すべての Google フォントへのアクセスやフルカラーコントロール、レイアウトコントロール、ロゴのアップロード、フルスク...

では、既存テーマとオリジナルテーマの違いについて最低限確認したところで、子テーマの作成方法を見ていく前に、今回用いていくテーマを準備していきましょう。

インストール ~ 有効化

[管理画面] → 外観 → テーマ

テーマ → 新規追加ボタンをクリック

テーマ → 検索ボックスでSydneyと入力 → 検索結果からSydneyという名前のテーマを探す → Sydneyをインストール

テーマを追加 → Sydneyを有効化する

テーマ → スターターサイトボタンをクリック

Starter Sites → 一覧からOriginalを選択し、importボタンをクリック → imported Succefullyと表示されたらCustomizeをクリックする

上記のようにカスタマイズ画面が表示されたらSydneyの準備は完了してます！

子テーマの作成

Sydneyの親テーマの準備が一通り完了しましたので、続いて子テーマの作成に入っていきましょう。

子テーマとは??

「子テーマ」とは、使用する親テーマの機能やデザインなどを引き継いだ必要な最小限のファイルで構成されたカスタマイズ用のテーマになります。
親テーマは、アップデートがなされる際に内容が毎回、初期化されてしまうため、アップデートの対象でない子テーマを作成して、制作を行っていく必要がありますので、既存テーマを用いる際は、必ず作成するようにしましょう。

親テーマは、編集することはありません！
また、子テーマは、カスタマイズ用に作成するため、親テーマの内容へ上書き/追加するようなイメージになります。

子テーマ用のフォルダ/ファイルを準備

子テーマ用のフォルダを作成

親テーマフォルダと同じ場所に子テーマのフォルダを作成します。

フォルダ名は、sydney-childにする
wp-contentフォルダ → themesフォルダ内に作成

style.cssとfunctions.phpを作成

子テーマを作成する上で必要なファイルとしては、style.cssとfunctions.phpになります。
※ 保存先は、先ほど作成したsydney-childフォルダになります。

子テーマのstyle.cssを作成する際は、以下のようにコメントを加えてあげます。

Theme Name: 子テーマのフォルダ名
Template: 親テーマのフォルダ名
Description: テーマの説明（なくても大丈夫です）
Author: テーマ作成者の名前（なくても大丈夫です）
Version: 子テーマバージョン（なくても大丈夫です）

@charset "utf-8";
/*
Theme Name: sydney-child
Template: sydney 
Description: sydneyの子テーマを作成
Author: owner
Version: 1.0
*/

style.cssが作成できたら、[管理画面] → 外観 → テーマでテーマの一覧を確認し、子テーマとして作成したsydney_childが反映されているか確認しましょう。
以下のように反映されていることが確認できたらOKです！

functions.phpについては、必要最低限で大丈夫ですので、次の内容をコピペし、作成して頂ければと思います。

<?php
// add_action()の第二引数は、Sydney以外のテーマを使っている場合は、'theme_enqueue_styles'に変更する
add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function theme_enqueue_styles() {
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}