FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

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

投稿日:2021年1月5日 更新日:

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

  • 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!

-WordPress

執筆者:


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

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

オリジナルテーマ作成から深掘りするWordPress その2

前回、index.htmlからindex.phpへ変更した時にstyle.cssやimgのパスを変更しました。パスをエディタソフトで書き換えましたが、WordPressには便利な関数があります。今回は …

オリジナルテーマから深掘りするWordPress その4

今回はテンプレートファイルのお作法について学習したことを書きます。お作法を施すことでよりWordPressっぽくなります。 miku-nosuke この記事を読むことでwp_head()、blogin …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

オリジナルテーマの作成から深掘りするWordPress その5 〜カスタムヘッダー 〜

今回はヘッダー画像を変更する場合について、クライアント目線で考えてみました。いろいろ調べてみたことを整理するため記事にします。 miku-nosuke この記事を読むことでカスタムヘッダーについて理解 …

WordPress カスタマイズ その1

2020年現在、ホームページの25%はWordPressで作られていると言われているほど勢いのあるWordPress(以下WP)。そんなWPについて、いま、まさに学習しています。学習してみるといろいろ …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP