WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

WordPress
2021年12月
 12345
6789101112
13141516171819
20212223242526
2728293031 

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。

  • htmlの基礎知識(コードを書いたことがある)
  • cssの基礎知識
  • VS codeなどのエディタソフトの基本操作ができる
miku-nosuke

カスタマイズするには子テーマが必要って分かった。じゃあ、子テーマを作るにはどうすれば良いのか?

子テーマ作成手順

  • 子テーマ用フォルダを作成
  • 必要なファイルを作成
  • Localを使ってフォルダ階層を表示できる

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

ここでは、前回紹介したアプリ『Local』を使用して説明します。本番環境との違いはftpアプリを使うかどうかですので、基本的に子テーマ用を作る方法は同じです。

themes フォルダを開く

まずは、Localから階層フォルダを開き、wp-content フォルダ > themes をVS codeで開きます。

chiled-theme-vsc1
図1. VS codeでthemesフォルダを開いたとこ色

 ここに子テーマ用に空フォルダを作ります。今回はテーマ『stinger8』の子テーマを作ります。フォルダの名称は何でも良いのですが、分かり易いように『stinger8-child』としておきます。

図2.子テーマ用フォルダ作成

子テーマに必要なファイルを作成

 つづいて、子テーマに必要なファイルを今作ったフォルダ内に作成します。最低限必要なファイルはstyle.cssとfunction.phpです。(下図中のimage、jsフォルダは無視してください)

図3.必要なファイルを作成

style.cssに必要なコメントを記述

子テーマ用フォルダが”親テーマの子テーマ”であることを認識させるようにstyle.cssにコメントを記述します。

  • Theme Name 子テーマの名前
  • Template   親テーマの名前
図4.style.cssにコメントを記述

Theme NameはWPのダッシュボード > テーマで表示される子テーマの名前になります。分かりやすいように『STINGER8 Child』とします。
つづいて、Templateで親テーマを指定します。ここではstinger8(tehmesフォルダ内にある親フォルダの名前)になりますね。
図中にはVersionとありますがこれは特に必要ありません。

function.phpに記述する

つぎに、function.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’ );
}

なんのために書くのか?
結論から言うと、これは親テーマのstyleを子テーマが引き継ぐためのものです。これがないと見た目のスタイルが崩れます。
少し整理してみましょう。文節毎に意味をわけると以下の様になります。

  • add_actoin()
  • wp_enqueue_scripts
  • theme_enqueue_styles
  • function theme_enqueue_styles()
  • parent-style
  • get_template_directory_uri(). ‘/style.css’

それでは、文節毎に解説します。

add_action()

関数です。アクションフックと呼ばれています。フックとは、何かの『きっかけ』ということだそうです。そのきっかけとは? WordPressには以下のようなタイミングでフックが用意されているようでね。

  • the_title()が実行されたタイミング
  • wp_head()が実行されたタイミング
  • 記事が公開されたタイミング

つまり、上記タイミングでadd_action()のカッコ内に記述されている処理を実行することになります。ちなみに、アクションフックの他にフィルタフックというものもあるようです。両者に機能的な違いはなく便宜上そう呼び分けているようです。

Follow me!

コメント

  1. […] wp_head()はフックになります。以前の記事(WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法)で説明しました。フックとはきっかけという意味です。この場合だと、headタグ内に書いてあることを読み終わった後に、というきっかけを作ります。したがって、wp_head()をきっかけにするような別の関数を使用する事(例えば何かのプラグイン)が出来なくなります。wp_head()について詳しく知りたいのであれば、 API/アクションフック一覧/wp headに書いてありますので参照下さい。 […]

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