アップデートがある場合に備えて、子テーマ、というものを作ります。
WordPressでサイトを作るなら、是非作っておきましょう。
子テーマって何？分かりやすく解説して
子テーマは簡単に言うと、
テーマをカスタムする為の上書き用ファイルです。
子があるなら、親があります。
親テーマとは、インストールしたテーマそのもののファイルの事。
phpとか、CSSとか、jsとかのファイルをまとめて一つのテーマです。
こちらは基本、書き換えずにそのまま使います。
親テーマを書き換えてしまうと、
インストールしたテーマそのものを変更する事になります。
もちろん、自分のサイトですから、好きに変えても良いのですが、
失敗するとテーマが崩れてしまうのでご注意。
いじってはいけないコードもあるので、
うかつに触らない方が良いです。
あと、親テーマは、
テーマのアップデート＝更新をした時に
書き換えられてしまいます。
せっかく自分でカスタムしたのに、
更新で全部おじゃんになります。
じゃあアップデートしなければ良いじゃんと思うかもしれませんが、
アップデートは出来るだけしましょう。
何かしらのバグや、脆弱性を改善しているので、
アップデート後のテーマを使う方が良いわけです。
で、テーマの背景色やサイドバーとかをカスタムしたい時に、
子テーマという物を自分で作って、そちらでカスタムしていく訳です。
CSSに関しては、
書き換えたい内容だけ、カスタムしたい内容だけを
子テーマに載せていけば良いです。
その方が、どこをカスタムしたか分かりやすいからです。
header.php等は、
親テーマと同じ内容のものをコピーして子テーマにアップします。
そうしないとカスタムできませんね。
FTPファイルには、親テーマも置いておきながら、子テーマも置くのです。
どちらも重要です。
WordPressでは先に親テーマを読み込みます。
そして子テーマを読み込んで、表示内容を上書きしていくのです。
FTPファイルに親・子の2つのテーマのファイルが存在する事となります。
子テーマは基本親テーマをもとにしているので、
実質は一つなんですけどね。
子テーマの作り方：Stinger5
子テーマを作りましょう。
その前にデータベースとFTPファイル(親テーマ等)を
全部バックアップしておきます。
上手くいかなかったらこのバックアップで元に戻します。
絶対にバックアップしておいて下さい。
では始めます。
style.cssの子テーマを作る方は多いですが、
私はそれだけでなく、
テーマ内のほぼ全てのファイルにおいて子テーマを作っています。
例えばsingle.phpとかも。
私はカスタムが好きなので、
子テーマを作って色々カスタムしています。
基本はカスタムしたいファイルだけで構いません。
無駄なファイルを作る必要はありませんからね。
色々なファイルを子テーマフォルダ(ディレクトリ)としてまとめます。
そして子テーマを作ったら、サーバーにアップロードします。
子テーマフォルダを作るのは簡単です。
ローカルで親テーマと同じファイルを作ります。
フォルダ名さえ気をつければ、今は中身は空白のファイルでも構いません。
子テーマには、
カスタムしたい時に、カスタム内容だけ載せてアップしていくのです。
style.cssはこの方式でOK。
ただし、phpは親テーマと同じ内容をコピーしてアップロードします。
そうしないとカスタムできません。
子テーマのアップロード場所
子テーマフォルダを
FFFTP等のFTPソフトを使ってアップロードします。
この時、親テーマと同じ階層にアップロードして下さい。
親テーマの中に入れてはいけません。
つまり、
/yourdomain.com/public_html/wp/wp-content/themes/stinger5ver20000101
ではなく、
/yourdomain.com/public_html/wp/wp-content/themes
themesフォルダ直下においてください。
twentyfifteen等、WordPress固有のテーマがあると思います。
そこと同じ場所です。
もちろん親テーマとも同じ場所です。
親テーマと同じファイル名だと、親テーマが上書きされてしまうので、
子テーマのファイル名を以下のようにします。
stinger5ver20000101(テーマのバージョン名)-child
これでOK。
子テーマだということが、WordPressやブラウザで認識されます。
で、このstinger5ver20000101(テーマのバージョン名)-child内に
親テーマと同じ
style.css
等のファイルをアップしていけば良いのです。
子テーマフォルダと同様、
ローカルで作って、FTPソフトでアップロードしましょう。
ファイル名、例えばstyle.cssには、-childは付けなくて良いです。
というか、付けないで下さい。
子テーマとfunction.phpの注意点
ただし、function.phpだけは注意して下さい。
子テーマのfunction.phpは今は色々なコードは書かず、ほぼ空白にしておきましょう。
まずはこれだけでＯＫ。
<?php //開始タグ
//ここに処理を記述していきます
?> //終了タグ
親テーマと同じ内容のことを子テーマに書いてはいけません。
function.phpだけは、そういう仕様なので、気をつけて下さい。
読み込まれる順序が他のファイルと逆で、
子テーマが先に読まれてしまいます。
普通は親テーマを見てから、子テーマを見て、
カスタム内容を上書きしていくのですが、function.phpだけは逆なのです。
しかも親テーマと同じ関数を子テーマで使う事は認められていないので、
サイトがエラーを起こすのです。
とにかくfunction.phpだけは例外です。
私はfunction.phpもカスタムしているので、
以下をご参考にどうぞ。
テーマ関数ファイルを宣言する。functions.phpって何でしょう？
子テーマを有効にするのをお忘れなく
子テーマを作ってアップロードしたら、
WordPress管理画面にて有効にします。
これをしないと、親テーマのみ読み込まれています。
子テーマを有効にすれば、
親テーマを読み込んで、子テーマを読み込むようになります。
ただし、function.phpに変なコードを載せてないか、
十分に確認してからにして下さいね。
サイトが表示出来なくなるかもしれませんのでご注意を。
WordPressの管理画面へ→
外観→
テーマ→
該当の子テーマを選択して、「有効化」をクリック
以上でOK。
サイトを表示して、問題なければカスタムしていきましょう。
以後は、WordPress管理画面の
「テーマの編集」画面で、カスタムしていく事が出来ます。
ファイルをアップロードする時はFTPソフトが活躍します。
参考にしたサイト
たった1行！一番簡単なWordPressの子テーマ（child-themes）style.cssの作り方－子テーマが理解できない人にオススメ
Stinger5の子テーマstyle.cssにはこのように書く
---------------------------------------【要注意】2016/05/02追記
子テーマの書き方が変わりました。
新しい方式を採用される事を、おすすめします。
こちらです→
WordPress子テーマCSSを反映させる、新しいやり方。@import urlから変更。
あくまでも参考程度に、以下の文についてはご覧下さい。
以前のやり方が以下に記載通りとなります。
ではどうぞ。
---------------------------------------
@charset "utf-8";
/*
Theme Name: stinger5ver20000000-child(子テーマ名)
Template: stinger5ver20000000(親テーマ名)
Description: stinger5ver20000000-child
Author: 著者名(あなた)
Author URI: http://www.yourdomain.com/
*/
@import url("../stinger5ver20000000/style.css");
//ここに全体のCSSを記入
/*レイアウト スマートフォン
----------------------------------------------------*/
@media only screen and (max-width: 780px){
//ここにスマホのCSSを記入
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px){
//ここにタブレットのCSSを記入
}
/*media Queries PCサイズ
----------------------------------------------------*/@media only screen and (min-width: 380px){
//ここにタブレットのCSSを記入
}
/*media Queries PCサイズ
@media only screen and (min-width: 780px){
//ここにPCのCSSを記入
}
｛ ～ ｝の中には、デバイスのサイズによって変えるCSSを書いていきます。
最初は上記コードだけ載せておけば、
そのうちあぁこういう意味ね、と理解出来ると思われます。
親テーマを一度全部見てから
見比べると分かりやすいですね。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク