子テーマ作り

エックスサーバー経由で子テーマ作り（サブドメインの場合も）

(1) エックスサーバーのファイルマネージャーにログイン。

(2) ファイル一覧 → ○○.com → public_html → wp-content

※サブドメインの場合は、wp-contentの上にサブドメインのフォルダがあるのでそこに入る → サブドメイン用のwp-contentがある。

(3) → themes

(4) 「作成」下の「フォルダ作成」の記入欄に子テーマのタイトルを入れる。

ファイル名のコードをUFT-8に変更して「フォルダ作成」をクリック。

※今回はtwentyseventeenの子テーマを作るので、

「twentyseventeen-child」

という名前でフォルダ作成。

(5) まず、functions.phpとstyle.cssの子テーマを作る。

functions.phpの子テーマ作り

(1)「ファイル作成」記入欄に functions.php と記入し、

ファイル名のコードを UTF-8 に変更して「ファイル作成」。

 

(2) 現れた functions.php の左にある❑にチェックをいれ、

「ファイル操作」の「編集」をクリック。

 

(3) 中に下記コピペ。

<?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') );
}

その下にコードを追記していく。

(4) 保存文字コードをUTF-8に変更して保存。

style.cssの子テーマ作り

(1) 「ファイル作成」記入欄にstyle.cssと記入し、

ファイル名のコードをUTF-8に変更して「ファイル作成」。

 

(2) 現れたstyle.cssの左にある❑にチェックをいれ、

「ファイル操作」の「編集」をクリック。

 

(3) 下記コピペ。

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/

その下に CSS を追記していく。

(4) 保存文字コードをUTF-8に変更して保存。

その他の.phpの子テーマ作り

上記以外は、必要なものだけ子テーマを作ればOK。

上記２つと違い、親テーマからコードを全コピーして貼り付ける。

今回は、抜粋記事表示のためにcontent-excerpt.phpとcontent.phpが必要だったので、その作り方。

まず、content-excerpt.phpとcontent.phpは、ともにtemplate-parts→postの中に入っている。

そのため、子テーマもフォルダーとファイルを作る。

下記はcontent-excerpt.phpの例（content.phpも一緒）。  

 

(1) twentyseventeen-childのフォルダを開き、

「フォルダ作成」の記入欄に「template-parts」と記入して、

ファイル名のコードをUFT-8に変更し、「フォルダ作成」。

 

(2) template-partsを開き、同様に「post」のフォルダを作成。

 

(3) postのフォルダを開き、

「ファイル作成」の記入欄に「content-excerpt.php」と記入して、

ファイル名のコードをUTF-8に変更し、「ファイル作成」。

 

(4) 親テーマtwentyseventeen → template-parts → post → content-excerpt.php

を選択、ダウンロード。

 

(5) 中身を全部コピーして、

子テーマの方のcontent-excerpt.phpの編集をクリック。

コピー内容を貼り付ける。

保存文字コードをUTF-8に変更して保存。

子テーマを有効化する

WordPressに入り、

外観 → テーマ →

新たに作成していた「twentyseventeen-child」を有効化する。

子テーマの編集

外観 → テーマエディター → 編集するテーマの選択の欄に、

twentyseventeen-childが入っているので、

それを選択し、「選択」ボタンを押す。

必要に応じて子テーマを編集する。

References