子テーマのダウンロード・導入

オープンケージのテーマ専用の子テーマをこちらからダウンロードすることができます。
ご自身でご用意されたものでも問題はございませんが、下記よりダウンロードしてお使い頂くことをおすすめいたします。

テーマ名 ダウンロードファイル
アルバトロス用 albatros_custom.zip (約2KB)
ハミングバード用 hummingbird_custom.zip (約2KB)
ストーク用 jstork_custom.zip (約2KB)

※テーマ毎に内容が異なりますので、お間違えないようにご注意下さい。

子テーマの適用について

特に理由がない場合は、親テーマ・子テーマの2つをインストールしていただき、
有効化するテーマは子テーマ(例:jstork_custom)を選択してください。

テーマのインストール方法はダッシュボードからインストールする方法でも、FTPソフトを利用する方法でもどちらでも問題ございませんが、下記記事をご参照くださいませ。

WordPressテーマをインストールする方法

子テーマについて

子テーマはテーマファイルをカスタマイズするのに適しています。親テーマと紐付けた子テーマをカスタマイズすることで、親テーマの機能を引き継ぎつつ、オリジナルのカスタマイズを行うことができます。また、親テーマがアップデートした際も、独自のカスタマイズが上書きされることがないので、子テーマの使用を推奨させて頂いております。 子テーマについてさらに詳しく知りたい場合は、WordPress公式サイトの「子テーマ」のページを参照してください。

参考:WordPress 子テーマ

子テーマでCSSを編集する手順

子テーマにてCSSカスタマイズを行う場合、基本的な考え方としては親テーマのCSSを子テーマ側で上書きすることでデザインを変更します。

子テーマを有効化した場合、親テーマのstyle.cssよりも後に読み込まれるので、デザインを上書きすることが可能になります。

例えばサイトタイトルのフォントサイズを変更したい場合を例にすると、下記のような位置に追加CSSを記載することで適用されるようになります。

子テーマによるCSSの追記例

子テーマでテンプレートファイルをカスタマイズする手順

トップページのカスタマイズをしたい場合、子テーマを使った場合の手順を解説しています。

例としてトップページ(home.php)をカスタマイズする場合の簡単な流れは下記です。

  1. FTPソフトなどを使って親テーマから「home.php」を子テーマにコピーする
  2. 上でコピーした子テーマ内の「home.php」を開き任意のカスタマイズ

※この子テーマの仕組みとしては
子テーマ内に親テーマと同じテンプレートファイル(今回の場合はhome.php)があった場合は、親テーマのhome.phpを読み込まずに、子テーマのhome.phpを読み込むようになります。
テーマのアップデートの際には子テーマは何も関係がないので、カスタマイズ箇所が上書きされずに残るということになります。
(※例外としてfunctions.phpは親・子テーマ両方のものを読み込みます。)

01. FTPソフトなどを使って親テーマから「home.php」を子テーマにコピーする

WordPressの管理画面からはファイルのコピーができないため、FTPなどのファイル転送ソフトを利用する必要があります。

WindowsであればFFFTPやFileZilla、MacであればCyberduckFileZillaなどがあります。※FTPソフトは「FTPソフト Mac(Windows)」といったキーワードで検索すれば無料・有料含めてさまざまなものが紹介されていますので、お好みのものを探してみて下さい。

テーマカスタマイズに!FTPソフト(FileZilla)の設定方法

FTPソフトが使えない場合

何らかの事情でFTPソフトが使えない場合は、サーバーの管理画面からファイルをダウンロード、アップロードする方法があります。(対応していないサーバー会社もありますので、わからない場合はお使いのレンタルサーバーのサポートにお問い合わせ下さい。)

例えばエックスサーバーの場合は、インフォパネル(サーバーパネルではありません)にログインして、【ご契約一覧 > ファイルマネージャ】の【ログイン】を押せばサーバー内のファイルを操作することができます。

02. ①でコピーした子テーマ内の「home.php」を開き任意のカスタマイズ

ここでカスタマイズした内容は親テーマとは切り離されたものとなるので、コードを削除しても追加しても問題ないので、コピーしたファイルを好きなようにカスタマイズできます。(※ただし、カスタマイズにはPHPやHTML、CSSの知識が必要になるので、そちらは別途学習する必要があります。)

親テーマを直接カスタマイズした場合の問題点

さいごに親テーマを直接カスタマイズせず、子テーマの利用を推奨する理由を記載しておきたいと思います。

テーマアップデートでデフォルトに戻ってしまう

子テーマを使ってカスタマイズする場合、これまでに述べたように、親テーマから編集したいファイルをコピーする必要があってりと一手間増えることになります。

「親テーマを直接カスタマイズした方が簡単だし、同じことでしょ?」と思われるかもしれませんが、当テーマでは、不具合や新機能の追加に備え、テーマアップデートをおこなう場合があります。

テーマップデートがあった場合は、管理画面の【外観 > テーマ】にて、ハミングバードやアルバトロスなどのテーマのページを確認した際に、「新しバージョンが利用できます。今すぐ更新」と表示されます。

親テーマの更新通知

ここでテーマを更新した場合、カスタマイズした親テーマ内のテンプレートファイルがデフォルトの状態に戻ってしまい、せっかくのカスタマイズ内容が上書きされてしまいます。

そんな場合に備えて、子テーマの利用を推奨しています。

今回の例の場合、子テーマ内に「home.php」があった場合は、親テーマの「home.php」を読み込まずに、子テーマの方を利用するようになるので、アップデートをしてもカスタマイズ箇所が元に戻らないのでカスタマイズを行う場合は、必ず子テーマを使うようにしましょう。

補足ですが、子テーマにファイルがあった場合は、親テーマのファイルを読み込まないと書きましたが、例外ファイルもあり「function.php」だけは親テーマと子テーマの両方のファイルを読み込みます。
ただし、子テーマにてファイルを編集した場合の注意点もあります。

子テーマにhome.phpをコピーしてカスタマイズしていた場合、子テーマのhome.phpが使われるようになるので、親テーマでhome.phpに関連する新機能が追加された場合、子テーマのhome.phpではアップデート以前のhome.phpが入っているということになるので、新機能が使えない場合があります。

その場合は、カスタマイズ箇所をバックアップし、新しいhome.phpを再度子テーマにコピー。その後再度子テーマのファイルをカスタマイズするなどの手間がかかる場合もあります。

テーマの新機能が使えない場合は上記内容をご確認ください。