SAMURAI TERAKOYA

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

WordPress

 

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

 

 

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

 

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

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

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

 

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

 

既存テーマの特徴

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

 

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

 

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

プラグインの使用の制限

 

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

オリジナルテーマの特徴

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

 

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

 

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

 

スポンサーリンク

Sydneyの準備

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

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

 

ここまで出来たら子テーマの最低限のファイルの作成は、完了です。 (テーマによってはsingle.phpなどの作成も必要)

 

子テーマのフォルダであるsydney-child内は、現在、次のようになっています。
間違いがないように確認しましょう。

 

子テーマがテーマ一覧に表示されていることも確認しつつ、子テーマフォルダ内の必要なファイルの作成も問題なければ、これで子テーマの作成は完了になります。

 

メインの内容は、ここで終了ですが、Sydneyを用いている方向けに一部(ヘッダーのみ)カスタマイズ方法を載せておきますので、参考にしてみてください。

 

スポンサーリンク

カスタマイズ方法(Sydney:ヘッダー)

 

子テーマを有効化し、サイト表示してみると、以下のようになっているかと思います。

 

ヘッダー上のサイトタイトルは、一般設定にて各々設定して頂いているものが表示されます。

 

 

あれっ?親テーマと違う…と思ったと思いますが、設定がデフォルトであることが主な理由になりますので、心配無用です。一緒にカスタマイズしてみましょう。

 

まずは、サイト表示している状態で、「カスタマイズ」をクリックします。

 

 

上記のカスタマイズ画面が表示されればOKです。
左のメニューからヘッダーエリアを選びましょう。

 

スポンサーリンク

ヘッダーエリアの設定

 

 

補足 : 背景サイズの変更

 

 

ここまでお疲れ様でした。
以上で、今回も以上になります。
カスタマイズ方法については、テーマごとに異なりますので、カスタマイズ出来る内容を確認した上で、作業していきましょう。

まとめ

✅   既存テーマとオリジナルテーマの違い
⇨ それぞれの特徴をしっかりと理解し、用途に応じて使い分けましょう。
✅   Sydney : インストール〜有効化
⇨ WordPressの管理画面上でインストール/有効化が可能
✅   子テーマ作成方法と準備する意味
⇨ 親テーマがアップデートされることを想定し、毎回子テーマを作成しましょう。
✅   Sydney(ヘッダー): カスタマイズ方法
⇨ カスタマイズ画面より簡単に切り替えができますので、ヘッダー以外の要素も編集してみましょう。

コメント

タイトルとURLをコピーしました