Simplicityには、最初から子テーマが作成してあります。
これは、子テーマを作るのは、地味に面倒くさいので「最初からあったほうが楽だろう」ということで作ってあります。
加えて、Simplicityの子テーマには、いくつかデフォルトにファイルが用意してあり、ちょっとした役割が与えられています。
これらファイルの役割を知り有効活用すれば、よりSimplicityのカスタマイズが手軽になるのではないかと思います。
ということで、今回は「Simplicity子テーマ（無印）」の役割というか、利用方法の提案です。
子テーマ（無印）内のファイル
子テーマには現在、以下のファイルがデフォルトで内包されています。（A-Z順）
- editor-style.css
- footer-insert.php
- functions.php
- header-insert.php
- javascript.js
- mobile.css
- responsive.css
- screenshot.png
- style.css
これらの、それぞれの役割について以降で説明したいと思います。
スタイル（CSS）でカスタマイズする
CSSと拡張子のつくファイルは、スタイルシートでカスタマイズするファイルになります。
主なCSSファイルの役割は以下になります。
style.css
親テーマのスタイルを上書きして書き換えるためのスタイルシートファイルです。
通常のデザイン変更なら、とりあえずこのファイルにすると思っておけばOKです。
mobile.css
モバイルで呼び出されるCSSファイルです。
mobile.cssファイルは、Simplicityデフォルト設定状態のモバイル表示で利用されます。
「外観→レイアウト（全体・リスト）」の「完全レスポンシブデザインにする」が無効になっている場合のみに読み込まれます。
responsive.css
完全レスポンシブデザインが有効になっているとき読み込まれるCSSファイルです。
「外観→レイアウト（全体・リスト）」の「完全レスポンシブデザインにする」が有効になっている時のみに読み込まれます。
完全レスポンシブ機能を利用するときだけ使用するCSSを書いたりすると良いかもしれません。
editor-style.css
投稿のビジュアルエディターに使用されるスタイルシートです。
このファイルにスタイルを書き込めば、親テーマのエディタースタイルを上書きできます。
WordPressビジュアルエディターを変更して、見やすくしたり、書きやすくしたりしたい時に利用します。
PHPで関数を書き込む
子テーマでPHPの関数を書き込む場合は、functions.phpに書き込みます。
functions.php
子テーマのfunctions.phpは、親テーマのfunctions.phpよりも先に読み込まれます。
親テーマで宣言してある関数と同じ名前の関数を子テーマで書くと、PHPの仕様上、致命的なエラーとなるので注意してくさい。
子テーマfunctions.php中のコードについて
子テーマfunctions.phpの中には以下のような関数があります。
//親skins の取得有無の設定
function include_parent_skins(){
return true; //親skinsを含める場合はtrue、含めない場合はfalse
}
この関数の返り値をfalseにすると、親テーマのスキンファイルは読み込まれないようになります。
//親skins の取得有無の設定
function include_parent_skins(){
return false; //親skinsを含める場合はtrue、含めない場合はfalse
}
trueの場合はこうなりますが、
falseの場合は、親テーマのスキンは表示されません。
これは、子テーマ内にスキンを作って、同じ子テーマフォルダで複数サイトをデザインだけ変更して運営したりするのに便利になるかと思います。
スキンの詳しい仕様は以下を参照してください。
phpテンプレートファイル
ヘッダーやフッターに、解析コードのような、ちょっとしたコードを挿入するだけなのに、header.php、footer.phpテンプレートをカスタマイズするのは面倒です。
それら2つの重要なファイルをユーザーがカスタマイズしてしまうと、重大なアップデートがあったときに、その恩恵を受けられない可能性もあります。
Simplicityは、そんなちょっとしたコードを手軽にヘッダーとフッターに挿入できるように以下の2つのテンプレートファイルがあらかじめ用意してあります。
- header-insert.php
- footer-insert.php
header-insert.php
header-insert.phpは、<head></head>内で読み込みたいコードなどを記入します。
例えば、ヘッダーに挿入するタイプの解析コードや、<link>タグを用いて、jQueryライブラリ用のスタイルシートの呼び出しなどを書き込むときなどに手軽に利用できます。
header-insert.phpの主な目的は、ちょっとしたコードを書き込めるファイルを用意することで、header.phpという重要なテンプレートファイルをカスタマイズする必要がを無くすことです。
header-insert.php中のコードについて
header-insert.phpの以下のコードの内側にタグなどを貼り付けると、ログインをしている管理者などからは呼び出されません。
<?php if (!is_user_logged_in()) : //ログインユーザーをカウントしたくない場合は //↓ここに挿入?> <?php endif; ?>
サイト管理者のアクセスは、カウントしたくない場合にこちらに解析コードを貼り付けるとログインユーザーは、カウントされなくなります。
footer-insert.php
footer-insert.phpは、</body>手前で呼び出したいコードなどを記述します。
アクセス解析タグや、jQueryプラグインのJSファイルなどは<script>などでこちらから、呼び出すと手軽に使えるかと思います。
footer-insert.phpの主な目的は、ちょっとしたコードをここに書き込むことにより、footer.phpという重要なファイルをカスタマイズする必要を無くすことです。
footer-insert.php中のコードについて
ログインユーザーには、表示したくない解析タグなどは以下のコードの内側部分に気にするとカウントされません。
<?php if (!is_user_logged_in()) : //ログインユーザーをカウントしたくない場合は //↓ここに挿入?> <?php endif; ?>
before-main.php
その他にも、メインカラムの手前に何かを挿入したいときに利用するためbefore-main.phpテンプレートが用意してあります。
before-main.phpを利用したカスタマイズ例を挙げるとすれば、「3カラムの左サイドバーなどをカスタマイズで作りたい」なんて時や「メインカラム手前にウィジェットを新しく設置したい」なんて時などのカスタマイズ用に利用します。
親テーマのテンプレートファイルを子テーマにコピー
親テーマのテンプレートファイルを子テーマにコピーすると、子テーマのテンプレートファイルが優先して読み込まれます。
親テーマのテンプレートを変更したい場合は、親テーマのファイルを子テーマにコピー＆ペーストしてからカスタマイズすることをおすすめします。
詳しい仕様は以下。
子テーマでJavaScriptを書き込むファイル
WordPressの子テーマ機能で、テンプレートファイルや、functions.phpは、ある程度設定を引き継ぐことはできます。
ただ、JavaScriptやjQueryなどは、Wordpressのデフォルト子テーマ機能では引き継ぐ機能はありません。
なのでSimplicityでは、親テーマのjavascript.jsを呼び出しつつ、子テーマでJavaScriptの処理を書きたいときは、子テーマでも呼び出せる機能を追加してあります。
javascript.js
子テーマでJavaScriptや、jQueryを呼び出すには、子テーマ内のjavascript.jsファイルにコードを記入してください。
これにより、わざわざ子テーマ上で独自JavaScriptを呼び出すために、テンプレートファイルにjsファイルの呼び出し<script>タグを挿入するといったカスタマイズが不要になります。
その他のファイル
その他のファイルについての説明です。
screenshot.png
このPNG画像ファイルは、Wordpress管理画面の「外観→テーマ」で呼び出されるロゴ画像（スクリーンショット画像）です。
screenshot.pngを変更すると、子テーマの表示画像を変更することができます。
screenshot.pngは、デフォルトの設定状態で、トップページの、OGPやTwitter Cardsのサムネイルとしても利用されます。
ですので、OGPなどのデフォルト画像を変更したい場合は、screenshot.png画像を変更してしまうか、「外観→カスタマイズ→SNS」の設定項目から「OGPやTwitterカードのホームイメージ」を変更してください。
まとめ
こんな感じで、Simplicityの子テーマ（無印）には、ある程度役割が与えられたファイルがあらかじめ用意してあります。
ただ、わざわざ役割を覚える必要もなく、カスタマイズするときは、自由に変更してください。
子テーマフォルダ内のファイルの役割をある程度知っていると、スマートに行えるカスタマイズがあるというだけです。
コメント
誤字報告です。
header-insert.phpの主な目的は、ちょっとしたコードを書き込めるファイルを用意することで、header.phpという重要なテンプレートファイルをカスタマイズする必要「がを」無
→「を」ですね！
ありがとうございます。
修正しました。