MENU
  • プロフィールprofile
  • サービスService
    • WordPress個人レッスン
    • 単発相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • ホームページ個別レッスン
    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 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月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPressレッスン
    自分で作れる優しいホームページレッスン
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 単発相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページレッスン
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 単発相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. Web制作スキルアップ
    3. WordPressプログラミング
    4. WordPress子テーマの作り方

    WordPress子テーマの作り方

    2022 12/19
    WordPressプログラミング
    2018-06-182022-12-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プログラミング
    WordPress
    よかったらシェアしてね!
    中谷恵美
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    趣味は、文房具、ゲーム(RPGとモンハン)、手芸(刺繍、洋裁)。最近は作曲やアレンジも勉強中。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にピラティスを始めたが、果たして続くのか。
    詳しいプロフィールを見る
    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    新着記事
    • 8年使って思うWordPressの好きなところ、微妙なところ
      2025-06-09
      はじめてのWordPress
    • 公開中のページを安全に更新するには
      2025-06-06
      はじめてのWordPress
    • 【個人レッスン】ホームページの紹介
      2025-03-16
      ホームページ個別レッスン
    • 【お客様の声】ゴールが明確になり、とても安心できました
      2025-03-13
      ホームページ個別レッスン
    • 【お客様の声】WordPressには自由度の高さを感じます
      2025-01-21
      ホームページ個別レッスン
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      アメブロカスタマイズ
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    目次