WordPress Twenty Sixteen カスタマイズ 1 「子テーマ」 作成編

ごけたです。寒いとあんこが食べてくなります。

はじめに

WordPress Twenty Sixteen カスタマイズ その1
今回は「子テーマの作成」についてです。

WordPressのテーマ選びはページ印象を決める1つの要素です。
私も今使用させて頂いている「simplicity2」にするまでそこそこ悩みました。

「simplicity2」のような外部テーマを使用している方は結構いらっしゃいますが、
初期設定で付属しているTwentyシリーズも決して悪くはありません。
個人的には「Twenty Sixteen」 のデザインが好きです。
好きなんですが、嫌いな箇所もあります。

いつかは導入するかも知れない「Twenty Sixteen」 のデザインカスタマイズを
少しずつですがやってみたいと思います。

下準備として「子テーマの作成」から。

ページ構成
OSはWindows、ブラウザーはchrome、レンタルサーバーはエックスサーバーです。
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。

※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。

1:「子テーマ」とは

テーマのカスタマイズにおいて「子テーマ」の作成は
Wordpress自体も推奨しているファイル構成です。

1-1:子テーマを作る理由1

カスタマイズは今回の「Twenty Sixteen」で言えば、
「Twenty Sixteen」の各ファイルに直接にソースコードを入力して、
設定の変更などを行います。
直接入力することで入力ミスなどでエラーが起きた場合、
内容によってはWordpressを入れ直したり、初めから設定をしたりと
復旧にかなりの時間を要する場合があります。

そこで子テーマが登場です。
子テーマはカスタマイズに必要なファイルだけを用意します。
子テーマの各ファイルにカスタマイズのソースコードを入力します。
親のファイルに代わって上書き指示をしてくれます。

子テーマのファイルで入力ミスのエラーが起きた場合、
子テーマのファイルで訂正すればいいので、訂正箇所も見つけやすく
復旧のための作業も必要最低限に留めることができます。

1-2:子テーマを作る理由2

親の「Twenty Sixteen」のファイルでカスタイマイズ中、
テーマの更新をするとファイルがまるごと更新されて、
今まで苦労して入力設定したソースコードが一瞬で消えてしまいます。
バックアップを取っていたとしてもアップロードが必要になります。

子テーマのソースコードは親のファイルが更新されても現状維持です。

テーマの更新でカスタマイズしたデザインに微妙なズレなどが生じた場合でも、
更新の影響を受けない「子テーマ」ファイルで再設定することができます。

何かと便利で安心なファイルなので、使わない手はないですね。

2:事前準備-1

「Twenty Sixteen」のカスタマイズです。
テーマを「Twenty Sixteen」にします。

WordPressの管理画面のメニューから「外観」→「テーマ」を選択クリックします。
「テーマ一覧」から「Twenty Sixteen」の「有効化」をクリックします。
サイトを表示して「Twenty Sixteen」になっているか確認します。

事前準備-2

「子テーマの作成」には「FTPソフト」と「テキストエディタ」が必要です。
各々お好みのソフトを用意してくださって構いません。

ここでは「FTPソフト」は「FileZilla」を

FTPソフト「FileZilla」でのダウンロード(バックアップ)、アップロード(更新)の方法を説明しています。フォルダまるごと、特定のファイルでの方法から ファイルを編集してからの方法、「FileZilla」で保存用の新規フォルダ作成方法なども併せて紹介しています。
今回使用した「FTPソフト」については、こちらで書いています。
宜しかったらご覧くださいませ。

※テキストエディアもお好みのソフトをご使用下さい。
ここでは「Brackets」を使用しています。

こちらは詳細情報はありません。

3:「Twenty Sixteen」の「子テーマ」フォルダとファイルを作成する

「子テーマ」の作成に必要なファイルは、
「style.css」と「functions.php」の2つです。

まずPCのデスクトップ上に子テーマ用「style.css」と「functions.php」の
2つのファイルを入れる「子テーマ用フォルダ」を「新規作成」します。

ここでは「twentysixteen-child」とします。
※このフォルダをFTPソフトを使って、Wordrpessのテーマに追加します。
「twentysixteen」の子テーマと分かればタイトルは何でも構いません。
但し、フォルダ名は英数半角です。日本語やスペースが入ると
認識されない場合があります。

子テーマ用「twentysixteen-child」フォルダをクリックして開きます。
開いたフォルダの中で「テキストエディタ」を起動させて
「style.css」と「functions.php」ファイルを新規作成します。
白紙の「テキストエディタ」ファイルに「style.css」と
「functions.php」の名前を付けて新規保存するだけです。

※ここでは「.css」「.php」の拡張子を表示せています。
この設定はここでは関係の無い、例えば音楽ファイルの拡張子も表示させる設定です。

Windowsの場合ですが拡張子を非表示にさせる場合は、
フォルダ左上の「表示」をクリックして、「ファイル名拡張子」のチェックを外します。

※これはフォルダ内の拡張子を非表示にする設定です。
非表示設定であっても、テキストエディタに名前を付けて保存する時は
「style」と「function」に「.css」「.php」と拡張子も含めて入力してください。

3-1:「style.css」ファイルを「子テーマ」用に編集する

「style.css」ファイルをテキストエディタで開きます。

/*
 Theme Name: Twenty Sixteen Child
 Template: twentysixteen
*/

上記のソースコードを全てコピーして、
「style.css」ファイルにペーストして、上書き保存します。

テキストエディタ上の「style.css」ファイルは新規で白紙ですから、
ペーストすると、1行目から4行目に表示されます。


実際にコピペしたテキストエディタを表示するとこうなります。

コピペが済んだらテキストエディタは上書き保存してファイルを閉じます。

実際は
/*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    https://https://0street-0times.com/twenty-sixteen-child/
 Description:  Twenty Sixteen Child Theme
 Author:       goketa
 Author URI:   https://https://0street-0times.com/
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://https://0street-0times.com/
 Text Domain:  twenty-sixteen-child
*/

※「style.css」ファイルの子テーマ用のソースコードは
細かく入力すると、実際は上記のように長くなります。
こちらをコピペしても構いません。
但し、上から2、5、9番目のURLの箇所はご自分のサイトのURLに変更してください。

今回は
/*
 Theme Name: Twenty Sixteen Child
 Template: twentysixteen
*/

ここではこちらのソースコードを使用しています。

3-2:「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_stylesheet_directory_uri() . '/style.css', array('parent-style') ); } ?>

上記のソースコードを全てコピーして、
「functions.php」ファイルにペーストして、上書き保存します。
テキストエディタ上の「functions.php」ファイルは新規で白紙ですから、
ペーストすると、1行目から9行目前後に表示されます。


実際にコピペしたテキストエディタを表示するとこうなります。

コピペが済んだらテキストエディタは上書き保存してファイルを閉じます。

3-3:「子テーマ」フォルダをアップロードする

「子テーマ」用のファイルとフォルダの準備が整ったので、
次は「子テーマ」フォルダを「FTP」ソフトを使ってアップロードします。

ローカルディレクトリーサイト(PC側のデスクトップに作成した)の
子テーマ用の「style.css」「functions.php」ファイルが入った
「twentysixteen-child」フォルダをリモートディレクトリーサイト内(サーバー側)の
「Themes」フォルダの中にアップロードします。

「Themes」フォルダ自体はリモートディレクトリーサイト内(サーバー側)の
「ドメインフォルダ」→「public_html」→「wp-content」→「Themes」にあります。


アップロードが完了すると、リモートディレクトリーサイトに
「twentysixteen-child」フォルダが表示されます。

アップロードが完了したので、FTPソフトを閉じます。

3-4:「子テーマ」をWordpressで「有効化する」

「twentysixteen-child」フォルダをアップロードしただけで
Wordpressのテーマはまだ「twentysixteen」です。

そこで「twentysixteen-child」フォルダをWordressのテーマとして
認識させる「有効化」の設定をします。

WordPress管理画面のメニューから「外観」→「テーマ」を選択クリックします。
「テーマ一覧」から「Twenty Sixteen Child」を探します。
「Twenty Sixteen Child」右下の「有効化」をクリックします。


「有効化」が完了すると、「Twenty Sixteen Child」がテーマ一覧の左上に移動表示します。

「青文字」の「サイトを表示」をクリックして、問題なく表示されるか確認します。
問題がなければ、「子テーマ」フォルダのアップロードは完了です。

※Wordpressに子テーマフォルダ、ファイルを追加しただけなので、
Twenty Sixteenのデザインに変更はありません。

4:背景色を変更して「子テーマ」フォルダのアップロードを確認する

「子テーマ」フォルダのアップロードが完了して、表示も問題なかった。
次は子テーマ用ファイルをカスタマイズして実際に機能するかの確認です。

4-1:「子テーマ」フォルダ内「style.css」ファイルで背景色を変更してみる

カスタマイズは主に「style.css」ファイルで行うので、
「style.css」ファイルを使って背景色を変更してみました。

カスタマイズ方法は色々ありますが、
今回はWordpress内の「テーマの編集」で変更しました。

WordPress管理画面のメニューから「外観」→「テーマの編集」を選択クリックします。


「テーマの編集」の右上に「編集するテーマを選択」が
「Twenty Sixteen Child」になっています。
テーマとして有効化しているので「なっているか」の確認ではありません。

その下の「テーマファイル」が「スタイルシート(style.css)」と白枠で、
左上に「Twenty Sixteen Child:スタイルシート(style.css)」
「選択したファイルの内容」と表示されます。

body {
	background: #ffff00;
} 

上記の背景色を指定するソースコードを「style.css」ファイル内にコピペして、
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。


入力に問題がなければ、「ファイルの更新」の上に、
「ファイルの編集に成功しました」表示が出ます。

今回は現在の背景色の「黒」を「黄色」に変更しました。


ちなみに、「子テーマ」ではなく親の「Twenty Sixteen」内の
「style.css」ファイルだと、背景色の指示は「465-469行目」にありました。
探すのも苦労しますね。
「#1a1a1a1a;」が背景色での黒のカラーコードです。


Wordpress管理画面左上の「サイトを表示」を選択クリックします。
背景色が「黒」から「黄色」に変わっていれば、
子テーマファイルとして機能してる。と確認が取れます。

必要最低限のソースコードを子テーマのファイルに
追加入力するだけで簡単に変更が可能になる。
これが子テーマの良さであります

4-2:注意ポイント

※Wordpressにログインして、管理画面のメニューから
「外観」→「テーマの編集」を選択クリックすると、
親テーマ、子テーマ関係なく、必ず「スタイルシート(style.css)」が表示されます。


例えば「functions.php」ファイルを編集する場合は、右列の「テーマファイル」から
「functions.php」ファイルをクリックして、編集画面を切り替える必要があります。

今回背景色の色指定で使用した色専用のコードは
「カラーチャート」で検索して頂ければ、カラーコード表が見られます。

※PC画面の解像度によって、指定コードの見え方に違いが生じる場合があります。

4-3:背景色を元に戻す方法

WordPressにログインします。
管理画面のメニューからから「外観」→「テーマの編集」を選択クリックします。

body {
	background: #ffff00;
} 

「スタイルシート(style.css)」内の背景色のソースコードを削除します。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

管理画面左上の「サイトを表示」をクリックして、
背景色が「黄色」から「黒」に戻っていれば完了です。

※子テーマファイルの色指定のソースコートが削除されたので、
本来の親ファイルの色指定に戻った。という構造になっています。

4-4:おまけ

デザインカスタマイズは殆どが「style.css」ファイルで行われますが、
その他の設定で必要が生じた場合はその都度、「親テーマ」から
「子テーマ」フォルダにFTPソフトでファイルをコピーして編集を行います。
今後のカスタマイズで実践します。

子テーマ内のファイル編集はPC上の「style.css」ファイルで編集してから
「FTP」ソフトを使用して「アップロード・更新する」方法もあります。
更新した瞬間にバックアップも取れているので、安心・便利ですね。
とは言っても、入力方法、バックアップ方法は決まりはありませんので、
一番楽な方法で進めてください。

さいごに

子テーマフォルダは何個でも作れます。
フォルダ名「twentysixteen-child2」にします。

/*
Theme Name: Twenty Sixteen Child2
Template: twentysixteen
*/
子テーマ用「style.css」ファイルのソースコードの
「Theme Name: Twenty Sixteen Child」の最後に「2」を追加します。
これだけです。「functions.php」ファイルの変更はありません。

FTPソフトを使って、「twentysixteen-child」フォルダを
リモートディレクトリーサイト内(サーバー側)の
「Themes」フォルダの中にアップロードします。
最後に「Twenty Sixteen Child2」をテーマとして有効化します。

Aパターン、Bパターンでカスタマイズを試したい時に便利です。
あまり増やすとサーバーの負荷もあり得ますので注意が必要です。

最後までお合い下さいまして有難うございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク