Simplicity子テーマ内に入っているファイルの役割について解説

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

Simplicity子テーマに含まれているファイル

これらの、それぞれの役割について以降で説明したいと思います。

スタイル(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の場合は、親テーマのスキンは表示されません。

親テーマのスキンを呼び出さない

これは、子テーマ内にスキンを作って、同じ子テーマフォルダで複数サイトをデザインだけ変更して運営したりするのに便利になるかと思います。

スキンの詳しい仕様は以下を参照してください。

Simplicityのスキン機能の仕様
Simplicity20140907からスキン機能を追加しました。 テーマ、子テーマ自体がスキン機能みたいなもんなのですが、ウイジェットや...
Simplicitパーツデザインの着せ替えができる「パーツスキン」機能の使い方と仕様
Simplicity1.7.9でパーツスキン機能を実装しました。 以前にもスキン機能というのはありました。 パーツスキン機能も、スキン機...

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カラムの左サイドバーなどをカスタマイズで作りたい」なんて時や「メインカラム手前にウィジェットを新しく設置したい」なんて時などのカスタマイズ用に利用します。

      親テーマのテンプレートファイルを子テーマにコピー

      親テーマのテンプレートファイルを子テーマにコピーすると、子テーマのテンプレートファイルが優先して読み込まれます。

      親テーマのテンプレートを変更したい場合は、親テーマのファイルを子テーマにコピー&ペーストしてからカスタマイズすることをおすすめします。

      詳しい仕様は以下。

      Wordpress既存テーマをカスタマイズするなら子テーマを使うべきと思います。これは、Wordpress codexにある子テーマの項目でも推奨されています。ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われ

      子テーマで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カードのホームイメージ」を変更してください。

      OGPやTwitterカードのホームイメージ

      まとめ

      こんな感じで、Simplicityの子テーマ(無印)には、ある程度役割が与えられたファイルがあらかじめ用意してあります。

      ただ、わざわざ役割を覚える必要もなく、カスタマイズするときは、自由に変更してください。

      子テーマフォルダ内のファイルの役割をある程度知っていると、スマートに行えるカスタマイズがあるというだけです。

      スポンサーリンク
      アドセンス(大)