WordPressのカスタマイズは、子テーマを作るのが簡単便利！
親テーマのファイルをそのまま上書きしてカスタマイズしても良いですが、更新すると新しく上書きされてしまうため、また一からカスタマイズしなくてはいけません。子テーマを作成すれば、親テーマを更新しても子テーマのスタイルが残ります！ ・・・
と、いろいろなブログや参考書に載っていますので、僕もチャレンジ！
目次
親テーマの選択 choice theme
テーマは、WordPressのインストール直後のダッシュボード、外観 ＞＞ テーマ から選べます。今回は、Twenty Sixteen を選択しました。 これは、デフォルトでインストールされているテーマです。新規追加で、たくさんの中から自分お好みのテーマを選ぶことができます！
設定 ＞＞ 一般 を選択すると、WordPress のインストール時に入力した、サイトのタイトル、キャッチフレーズやメアドが入力されています！便利ですね！
現時点でどのようなサイトになっているか、見てみます。 左上のサイトのタイトルを、マウスオーバーすると「サイトを表示」というドロップダウンが出るので、クリック。
Twenty Sixteen のテンプレートでサイトが表示されます！
それでは、いよいよ子テーマを作成していきます！
子テーマ作成のガイドライン guidelines of make child-theme
子テーマのフォルダーを作成 cook folder
はじめに、WordPressがインストールしてあるフォルダーの中にある themes というフォルダーの中に、子テーマ用のフォルダーを作ります。
下の写真では、twentysixteen-child（好きな名前で良い）としてあります。
場所： /wordpressがインストールしてあるフォルダー/wp_content/themes/
twentysixteenで最低限必要なファイルは、下図にあるファイルです（だと思います）。.cssファイルは、テーマによって数が違います。すべての.cssファイルを関連付けておきます。
- style.css スタイルシートです。すべてのテーマにあります（中身は空にしておきます）
- rtl.css twenty sixteenの場合はあります（中身は空にしておきます）
- screenshot.png テーマを選ぶ一覧に出てくるスクリーンショットになります。自由に作ります（推奨サイズは８８０px × ６６０pxです）
- functions.php 必要な関数をここに書いていきます。すべてのテーマにあります
style.cssの編集
style.cssの冒頭に、次のようなコメント文（/*から始まり*/で終わる）を入力することで、テーマに認識されます。必ず必要なのは、2行目の Theme Name と5行目の Template（親テーマのフォルダ名）です。 このコメント文以降は、何も記載していない状態です。
/* Theme Name: twentysixteenの子テーマ Author: Takumi Nakamoto Version: 1.0.0 Template: twenty sixteen */
functions.php
phpなので、<?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( 'parent-style', get_template_directory_uri() . '/rtl.css' );
}
?>
子テーマを選ぶ activate of child-theme
style.css が認識されると、ダッシュボード・外観 ＞＞ テーマ の中に、作成した「twentysixteenの子テーマ」が入っていることがわかります！
子テーマをマウスオーバーすると「有効化」というボタンが表示されるので、押します。
サイトを表示させると、親テーマと全く同じレイアウトで表示されているのがわかります。
以上の手順で、子テーマが作成できてしまいました！簡単ですね！
子テーマのスタイルをカスタマイズしてみる customize of child-theme
何かスタイルをカスタマイズしてみましょう！とりあえず、見出し「Hello world!部分」のフォントの色を変更してみたいと思います。
開発ツールでスタイルを確認 check styles on developer tool
はじめに、この見出しにどんなスタイルが適用されているかを、開発ツールで確認します。 Google Chrome であれば、アドレスバー右横メニュー ＞＞ その他のツール ＞＞ デベロッパー ツールをクリック。
Elements の各タグをマウスオーバーすると、該当する要素の色が変わるので確認しやすいです。各タグの左横にある▶マークを展開していくと目的のタグを見つけられます。 下の写真では、見出し h2 と リンク a タグ が見つかりました！適用されているスタイルは、entry-title a だとわかります。
子テーマstyle.cssの編集
子テーマのフォルダーに保存した、style.css を開き、entry-title a のクラスを定義します。属性にcolor を追加します。#ff3300は、赤っぽい色です。
.entry-title a {
color: #ff3300;
}
style.css を保存、アップロードします。 ホームページを再読み込みすると、Hello world! の文字が赤色に変わっていることがわかります！
その他、お好みで自由自在にカスタマイズしていくことができます！これからが楽しみですね！
まとめ summary
子テーマを作成するだけでも、かなりの達成感がありますね！
様々なテーマをカスタマイズしてみれば、WordPressの勉強にもなるので超楽しいです！
目指せ自作テーマ！で、とりあえずは子テーマをせっせと作って勉強していきます！
最近母の具合が悪く、一昨日は病院に連れて行きました。暑い日が続いて、体力も落ちているのですね。皆さんも、ご自愛くださいね。 夏休みも後半。日中子供が外で遊ぶ声を聞きながら仕事しています。時々、鳥の鳴き声なのか子供の声なのかわからなくなることがありますww
