【wordpress超入門】インストール後8（子テーマを使用する）

今回は子テーマです。

子テーマは本テーマを引き継いだものです。

使用する理由としては、本（親）テーマを編集してしまうと、本テーマが更新された場合に、編集歴が消えてしまう可能性があるためです。

もう１つの理由は、本サイトでは超初心者にとって、WordPressの構造の学習になります。

それではCODEXを参考に作成してみましょう。

子テーマを作成する

WordPressをインストールしたフォルダを見ると以下３つのフォルダがあります

wp-admin
wp-content
wp-include

「 wp-content 」 →　「Themes」フォルダを開くと

デフォルトで入っているテーマが表示されています。

ここに子テーマフォルダを作成します。

名前は「親テーマ名」＋「-child」が推奨されているそうですので、今回は「twentynineteen-child」を作成します。

次に「twentynineteen-child」フォルダ配下に子テーマに必須の「style.css」と「functions.php」ファイルを作成します。

style.cssを編集する

style.cssの中身はテーマ名とテンプレート名を最低入れましょう。自分はこのように記載しました。

/*
Theme Name:		Twenty Nineteen Child
Description:	Twenty Nineteen Child Theme
Author:			beyou
AuthorURI:		http://www.beyoufree.com/
Template:		twentynineteen
Version:		1.0.0
*/

functions.phpを編集する

functions.phpには、親子テーマを正しく読み込めるように以下の記述をします。

<?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_template_directory_uri() .'/style.css',array('parent-style'));
}

子テーマを反映する

上記まで完了し、ファイルをアップロードしたら、「ダッシュボード」の外観を選択します。

正しく反映出来ていれば、作成した子テーマが表示されているはずです。

反映する

作成した子テーマを有効化して、自分のサイトを表示してみましょう。親テーマの状態と変わりなければ、正しく記述と反映されています。

実際に編集してみます。ソーシャルリンクメニューの色が白黒で味気ないので、青にしましょう。

自分のサイトを開き、ツイッターのロゴマークにカーソルを合わせ、右クリックして「検証」を選択します。（GoogleCromeの場合）

すると開発用ウィンドウが開きます。以下の箇所が、ツイッターマークの「ID」です。

色の変え方は様々ありますが、今回はせっかくなので「style.css」にレイアウト情報を記載します。

ちなみに現在、親テーマでは以下のようになっています。（親テーマのstyle.css　3300行目くらい）

.social-navigation ul.social-links-menu li a {
  border-bottom: 1px solid transparent;
  display: block;
  color: #111;
  margin-bottom: -1px;
  transition: opacity 110ms ease-in-out;
}

この部分を子テーマの「style.css」にコピーし、colorの記述だけ変えます。

.social-navigation ul.social-links-menu li a {
  border-bottom: 1px solid transparent;
  display: block;
  color: #00F;
  margin-bottom: -1px;
  transition: opacity 110ms ease-in-out;
}

そしてアップロードし、サイトを更新すると、

青になりました！

以上で、子テーマを終了します。

編集する場合は、子テーマを作成しすることで上書きができるので活用しましょう。