HTMLコーディング

【WordPressでGO!】WordPressの子テーマを作ってみよう

前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。
もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょうかね_(:3 」∠)_

さて、今回もまたWordPress関連の記事です。
子テーマです。
子テーマ、聞いたことありますよね?

今回はそんなWordPressの子テーマの作成方法をさくっとカンタンにやってしまいましょうというお話です。

子テーマの作成方法はWordPressの公式にきちんと記載があります。
WordPress Codex 日本語版 子テーマについて

このページ見れば、WordPressの子テーマは普通に作成できます。
ただ、初心者向けにはあまり書かれていないので(;’∀’)
なんかよくわからない単語とかあったりするし。

ここではごくごく簡単に説明していこうと思います(/・ω・)/

WordPressの子テーマとは

WordPressの子テーマとは、親テーマの機能とスタイルを継承したテーマのことです。

WordPressのデフォルトテーマであるTwentyシリーズを親テーマとして扱うことで、テーマがアップデートされた時にも変更した部分が上書きされる心配がありません。
子テーマ、関係ないからね(`・ω・´)

使用しているテーマがアップデートされる可能性のあるものなら、子テーマで管理してみましょう。

必要なもの

子テーマを認識させるために最低限必要なものは以下の3つです。

  • 子テーマのディレクトリ
  • style.css
  • functions.php

ほら、カンタンでしょ?

子テーマのディレクトリを作ろう

まずは、子テーマを入れるためのディレクトリを作りましょう。
名前はなんでも良いんですが、私の場合はわかりやすいように親テーマのディレクトリ名+childていう名前にしてます。

今回はTwentySeventeenのテーマを親にしますので、twentyseventeen_childにしました。
わかりやすいのが一番です。

style.cssを作ろう

次はstyle.cssを作ります。
中身は以下のようになります。
このコメント以下にstyleを書いていくことになります。
いわゆるスタイルヘッダというやつです。

/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

これが、style.cssで最低限必要な内容です。
Theme Nameが、WordPressのテーマの適用画面に表示されるテーマの名前になります。
テーマの適用画面に表示されてるテーマの名前

Templateが、親テーマのディレクトリ名です。

ほかにも、いろいろと情報を記載できます。

/*
Theme URI: 配布したりする場合はそのURLとか
Description: 子テーマの概要(親テーマの名前とか書くと良いかと)
Author: 作成した人の名前とか
Author URI: 作成者のURLとか
Version: バージョン管理するなら
License: ライセンス
License URI: ライセンス元のURLとか
Tags: タグとか
Text Domain: 子テーマの名前とか
*/

この情報は主に、WordPressの管理画面のテーマの管理の中で表示したり検索したりする際に便利な設定になります。
Tagsなんかは、検索とかでひっかかる用語を設定できますよ。

でも、必須なのは先に記載しているTheme NameTemplateのみなので、配布とかに利用しないなら書かなくてもオッケーです。

functions.phpを作ろう

最後に、functions.phpを作りましょう。
これも最低限必要なものを記載です。

function theme_enqueue_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

これは、親テーマが1つのstyle.cssを使ってすべてのCSSを記述している場合のみに動作します。
親テーマ側で複数のCSSファイルを使っている場合はまた、記載方法が少し変わります。

今回はあくまで子テーマをさらっと作ってみようという趣旨なので詳しくは説明しません。
興味のある方はぐぐぐっとググってください(/・ω・)/

WordPressの管理画面で子テーマを有効化

さて、これで子テーマの設定が完了です。
管理画面で子テーマを有効化しましょう!

子テーマを有効化

この状態で、サイトの表示を確認してみましょう。

子テーマ有効化後のサイト表示
崩れてませんね。大丈夫です(=゚ω゚)ノ

あとは、好きなようにスタイルを変えていきまょう(≧▽≦)

まとめ

WordPressの子テーマ作成については、以前よく使われていた@importの方法も、今では公式が「推奨しません」と宣言してしまっているので今回新たに調べてみました。
子テーマ自体、作ることがほとんどなくなってしまったというのもあるんですけど・・・

もっとWordPressの子テーマを活用するなら、できることはたくさんあります。
いろいろ調べてみてください(`・ω・´)

ともさんでしたー。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法

    こんにちわ、ともさんです。みなさん元気ですかそうですか。さて、この前業務でEC-CUBEを触っていた時にとんでもないことが起こりました。…

  2. HTMLコーディング

    cssでグラデーションを描いてみよう

    年末に向けていろいろと身辺周りが慌ただしくなってきましたね。こんにちは、ともさんです( ^ω^ )グラデーションをcssで描けることはもう…

  3. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

  4. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  5. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  6. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. レポート

    願い事が叶うと話題の鈴虫寺に行ってきました!
  2. お知らせ

    再び、Webデザイナー募集中
  3. HTMLコーディング

    社内勉強会を行いました。
  4. お客様の声

    【お客様インタビュー】サンキョウプラテック株式会社様
  5. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!
PAGE TOP