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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WP★ContactForm7 送信後に異なる URL にリダイレクトさせる

Contact Form 7 プラグインでお問い合わせや申し込みフォームを作成すると、送信完了後にメッセージが出るだけで完了ページには遷移しません。 メッセージだけだと、送信が完了したことに気付かずに …

Wordress★「Duplicate Post」の代替プラグイン

WordPressには「Duplicate Post」という投稿記事や固定ページを簡単に複製できるプラグインがあり、今回取り組んでいる案件でも使おうと検索してみるのですがゼンゼン見つからない!よく似た …

WordPress★Gutenbergにカスタムブロックをつくる 1

Gutenbergになったら、「TinyMCE テンプレート」というテンプレートプラグインが使えなくなってしまいました。 あらかじめ設定したひな形を呼び出して使えるのでとても便利だったのに。。。 この …

WordPress|twenty seventeen カスタマイズ|フッターの「Proudly powered by WordPress」を変更したい!

デフォルトで表示されている「Proudly powered by WordPress」を変更するファイルはテーマフッター「footer.php」ではありません。 「themes/twentyseven …

WP★無料のテーマ「Bizvector」CSSの編集方法

ワードプレス★無料のテーマ「Bizvector」CSSの編集方法 ある案件で新規の固定ページを追加することになり、そのページだけで使うCSSをあらたに追加しなくちゃいけなくなりました。そのサイトは「B …

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