WordPress

WordPress4.7.3★子テーマの作り方(Twenty Seventeen の場合)

投稿日:

Wordpress

 

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。

 子テーマディレクトリ
  style.css
  functions.php

 

(1)子テーマディレクトリの作成。

wp-content/themes ディレクトリ下に作成します。

子テーマディレクトリの名前は自由につけても構いませんが、親テーマがある場合は最後に ‘-child’ を付けておくとわかりやすいです。また、子テーマディレクトリの名前には空白を含めないこと。エラーが発生します。 


(2)子テーマのスタイルシート (style.css) の作成。

スタイルシートは次のスタイルシートヘッダで始める必要があります。
 WordPress に「テーマ」として識別させ、有効なテーマとして他のインストール済みテーマとともに「管理画面 > 外観 > テーマ」画面に表示させるために必要なものです。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

 

内容の詳細は下記の通り。
よくわからないところは空白にして作業を進めましたが、子テーマとして認識してくれています。

/*
Theme Name: 子テーマの名称
Theme URI: 子テーマフォルダのある場所
Description: テーマ詳細
Author: 制作者名
Author URI: 制作者のアドレス(あれば) 
Template: 親テーマのディレクトリ名←これは必須!!正確に!
Version: 1.0.0←自分で更新数がわかるようにしておくと便利
License: 
License URI: 
Tags:テーマの特徴をタグ (Tags) として指定することで、管理画面の「テーマのインストール」の特徴フィルターを使った検索に反映されます。
使用可能なタグのリストはテーマディレクトリ /enの「feature Filter」の検索項目 をご覧ください。
Text Domain: 

*/

 

(3)functions.phpの作成

「functions.php」を作成して、スタイルシートやjavascriptなどを読み込みます。

親テーマからCSSを読み込むコード

<?php // 親テーマからcssを読み込む
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')
    );
}

 

これで親テーマの「style.css」を読み込みます。
子テーマの「style.css」は親テーマを上書きするので、変更したい箇所や追加したい部分だけ子テーマに設定すればサイトに反映されていきます。

 

参照:「WordPress Codex 日本語版」https://wpdocs.osdn.jp/子テーマ

 

つくった子テーマにサムネイル画像を設定する方法はこちら

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPress★コメント部分を簡易掲示板風にカスタマイズする

  WordPressのバージョンは4.7.3 コメント部分を掲示板風にカスタマイズ。変更内容は 1)コメントの入力フォームで不要な部分を非表示にする 2)入力フォームの文言を自由に変更する  3)コ …

Anti-SPAM-Schild mit Mails im Hintergrund - orange

WP★スパム対策|日本語を必須にする& Google reCAPTCHA で2重のガード!

クライアントさまから「海外からのスパムメールが酷いので何とかならないか」と相談を受け、早速、対策をリサーチ。あまり難しいことをしなくても効果的な対策はないかなぁ。いろいろ調べて絞り込んだ2つの対策をや …

no image

WordPress★インストール後にやっておきたい設定

・パーマリンクの設定 方法1 「/%category%/%postname%/」のように、”カテゴリ+記事タイトル”を使う 方法2 「設定」>>「パーマリンク設定」を開きます。 「一般的な設定」欄で、 …

WordPress★もくじプラグイン「Easy Table of Contents」のカスタマイズ

記事のもくじを自動的に作ってくれる便利なプラグイン「Easy Table of Contents」。デフォルトの見た目がイマイチなので、ちょっとカスタマイズしてみました。 元の見た目はこんな感じ。 カ …

WP★フロントページの画像の高さを変更する★Twenty Seventeenをカスタマイズ06

フロントページの画像の高さを変更する 1)管理者としてログインし、ダッシュボード左サイドのメニューから「外観」>「カスタマイズ」へ移動します。 2)メニューから「追加CSS」をクリックし、下記のコード …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。