MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. WordPress
  3. WordPress子テーマの作り方

WordPress子テーマの作り方

2021 11/19
WordPress
2018-06-18 2021-11-19

WordPressでは、たくさんのデザインがテーマとして公開されています。
管理画面からカスタマイズできる以外にも、一部デザインを変更したいときもありますよね。

その際、子テーマを使うと、とっても便利です。

目次
スポンサーリンク

テーマのカスタマイズに、子テーマを使う理由

子テーマは、WordPressにインストールしたテーマをベースに、一部分だけ追記するためのカスタマイズ用のテーマです。

子テーマを使うことでいくつかメリットがあります。

テーマがバージョンアップされても、子テーマの変更はそのまま使える

公開中のテーマは開発者が随時バージョンアップしていきます。
WordPressユーザーがテーマの中にあるファイルを書き換えても、テーマがアップデートすると、自分が更新した部分が消えてしまいます。

子テーマを使うことで、バージョンアップされた時でも、自分が変更した箇所はそのまま残すことができます。

安全にカスタマイズできるる

テーマをカスタマイズするときには、テーマの構造を理解したり、書かれているプログラムの内容を読み解いたり、技術的な知識が必要になります。

うっかり、誤った場所を更新してしまうと、ページ全体が表示されなくなってしまうリスクがあります。

子テーマを使えば、もし間違った操作をしても、子テーマの中のファイルだけを見直せばいいので、安全にカスタマイズを進められます。

WordPressは子テーマを親テーマに上書きして、動作するようになっています。

◯ 親テーマ=ベースとなるテーマ(開発者が随時アップデートするのでさわらない)
◯ 子テーマ=カスタマイズするテーマ(更新したいファイルのみ追加する)

子テーマの作り方

Twenty Sixteenのテーマを例に、子テーマの作り方を説明します。

①子テーマのフォルダを作る

子テーマのフォルダ構成

自分のパソコン上でフォルダを作ってください。

フォルダ名は「親テーマ-child」とすると分かりやすいです。

このフォルダの中に、子テーマのファイルを作っていきます。

  • style.css(必須)
  • functions.php(必須)
  • 変更したいファイル(任意)

最低限必要なのはstyle.cssとfunctions.phpです。
style.cssがテーマの外観を設定するためのファイル。
functions.phpはテーマに機能を追加するためのファイルです。

②style.cssにテーマの情報を書く

style.cssは子テーマの名前と親テーマの名前を書きます。

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
/* 以下、子テーマ用のスタイルを記述します。*/
body{
    background:#FFEEB4;/* 試しに背景を黄色にしてみるよ */
}

Theme Name:子テーマの名前
Template:親テーマのフォルダ名

Templateは親テーマの名前とは違うので注意してください。

③functions.phpの中身を書く

functions.phpは、テーマが動作するための機能を記述したファイルです。
ここで、CSSファイルの読み込み順序を記載します。

親テーマのCSSを読み込んだあと、子テーマのCSSが上書いて反映されます。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
//以下に子テーマ用の関数を書く

④必要に応じて、変更したいファイルを入れる

この他に、親テーマを上書きたいファイルがあれば、作成します。
親テーマのファイルを複製して、子テーマのフォルダ内に置きます。
そして、そのファイルのソースを編集していきます。
オススメのカスタマイズはこの後紹介しますね😁

⑤子テーマをアップロード&インストール

FTPツールでアップロードする場合は
wordpressのインストールフォルダ>wp-content>themesの中に子テーマのフォルダを配置します。

※themesの中には、親テーマも入れておいてくださいね。

テーマフォルダの構成

管理画面からアップロードする場合は、子テーマのフォルダを圧縮してZIPファルにします。

外観>テーマ>新規追加>テーマのアップロードでZIPファイルをアップロードできます。

最後に、子テーマを有効化します。

以上で、子テーマのカスタマイズが反映されます。

WordPress
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • おしゃれなブログアイキャッチを作るなら。無料ツール「Canva」を使ってみてほしい。
  • Webの画像形式(JPEG,PNG,GIF,SVG)使い分け

関連記事

  • 【2022年版】Smash Balloon Social Photo Feedの使い方〜インスタグラムを表示できるプラグイン〜
    2022-03-25
  • WordPressでホームページを作れるようになるまでに私が学んだこと
    2022-01-30
  • 【図解】WordPressのテーブル構造はどうなっているの?
    2021-12-03
  • WordPressの投稿に管理者用メモをいれるプラグインを作る
    2021-11-29
  • 記事をランダム表示するウィジェットを作る
    2021-11-27
  • Snow Monkey Formsでお問合せフォームを作成する
    2021-11-17
  • WordPressプラグインを作ってみる。はじめの一歩。
    2021-11-10
  • 【初心者向け】WordPressを安全に使いたい!Wordfence Securityの設定方法
    2021-10-31
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる