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★ブロックエディター「Gutenberg」 投稿ページでテンプレートを使えるようにする方法

「TinyMCE テンプレート」は、ブロックエディター「Gutenberg」では使えないので、TinyMCE テンプレートの代替を探すことにした。 ブロックエディターで記事のひな形を使う方法を調べてい …

WordPress★FaceBookページをサイトに埋め込む【2020年版】

facebook for developers ページプラグインはコチラ ページに遷移すると、下のような画面になります。 「FaceBookぺージのURL」の箇所に、埋め込みたいページのURLを貼り付 …

CPIシェアードサーバーでWordPressが文字化けしたときの対処法

CPIのシェアードプランをご利用のクライアント案件でテストサイトにWordPressを直接インストールしてみたら、警告アラートがでてなかなか先に進めなかったので、対応策の覚え書き。 wp-includ …

WordPress★記事にグラフを加える「WP Graphs & Charts」プラグインを試してみた!

記事中にグラフを加えたくて調べてみた。 実装には、プラグインを使う方法やjQueryを仕込む方法などさまざまあるみたい。 jQueryを仕込む場合は、後々のメンテナンスや更新もコード中心の記述になるの …

WP★flamingo 受信メッセージの一覧表示で「件名」にフォームのタイトルを表示させたい!

受信メッセージの一覧表示で「件名」にフォームのタイトルを表示させたい! 件名のところに[your-subject]じゃなくて、フォームのタイトル名を表示させる方法を調べてみました。 flamingoの …

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