2017/08/20
自分でスタイルシート及び、テンプレートファイルをいじりたい！という方の為に公式子テーマをご用意しました。
※スタイルシートやテンプレートファイルを触らない人には必要ありません。
wp_material_child（最新版）
[wpdm_file id=3]
sponsored link
子テーマについて
簡単に言うと子テーマというのは、親テーマに上書きする形で使われるテーマです。
使い方は親テーマと全く同じです。DLしたzipファイルをWordPress管理画面からアップロードして有効化するだけです。
ただし！子テーマを有効化すると、親テーマにおいてテーマカスタマイザーやウィジェットで設定していたものがデフォルトに戻るのかなんなのか、一部変わってしまうようです。その辺の仕様はちょっとよく分かりません。。
子テーマを有効化する際は先にテーマカスタマイザーで表示を確認することをお勧めいたします。
スタイルシートをカスタマイズ
子テーマにはstyle.cssが入っています。このスタイルシートは親テーマのスタイルシートが読み込まれた後で読み込まれるようになっているので、子テーマ側のstyle.cssが優先されるようになっています。
例えば、記事の行間をもうちょっと広げたい！と思ったら、子テーマのstyle.cssに、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/***************************************** PC用 ******************************************/ .content p{ line-height: 2; } /***************************************** タブレット（大）用 サイドバーがメインカラムの下に回ります ******************************************/ @media screen and (max-width: 1057px) { |
みたいな感じで書くだけで、そこだけカスタマイズすることが出来ます。
ただし、スタイルを追記することで思わぬところに影響があったりする可能性もあるので、いろいろチェックしながらやってみて下さい。
テンプレートファイルをカスタマイズ
上記のようにスタイルシートの場合は、書き入れた値だけが上書きされるのに対して、テンプレートファイル（single.phpやheader.phpなど）の場合は子テーマ内に同名のテンプレートファイルがあればそのファイルごと上書きされるようになっています。
なので、テンプレートファイルのカスタマイズは子テーマ内に親テーマのテンプレートファイルをアップロードしてから触るようにして下さい。
例えばsingle.phpをカスタマイズしたい場合
- 親テーマ内のsingle.phpをDLする
- DLしたsingle.phpを子テーマのディレクトリ（wp_material_child）にアップロードする
- 子テーマ内のsingle.phpを触る
という感じでカスタマイズしてみて下さい。
ただし、テンプレートファイルのカスタマイズでは注意点が一つあります。
マテリアル本体のバージョンアップでもしsingle.phpが書き換えられていたとしても、当然ながら子テーマ内に存在するsingle.phpが優先されることになります。
もし今後公式にバージョンアップされる機能を取り入れたい場合は、テンプレートファイルはいじらないことをお勧めいたします。
もちろん、もう公式のバージョンアップにはついて行かず、自力でゴリゴリカスタマイズして行くんだ！っていう場合はどうぞゴリゴリやってください。まあその場合、親テーマをいじる方が話は早いですが。
いずれにしてもカスタマイズは自己責任でよろしくお願いします。ちなみに、ぶっ壊わしては自力で直すという作業を繰り返すとコーディング力が身に付きます（体験談）。
functions.phpをカスタマイズ
子テーマには初めからfunctions.phpが入っています。functions.phpはスタイルシートを正確に読み込む為に必要なものです。
functions.phpを触ろうと思うぐらいの方ならよく分かっていらっしゃると思いますが、このファイルだけはサイトをぶっ壊す可能性を孕んでいます。
よく分からない場合はそっとしておくことをお勧めします。
もしぶっ壊れた場合は、まっさらのfunctions.phpを子テーマ内にアップロードして上書きすればすぐ直りますので慌てず対処して下さい。
現場からは以上です。
wp_material_child（最新版）
[wpdm_file id=3]
コメント
お世話になります。今、マテリアルを検討中です。
メンテナンスをする際、別テーマを一時的に有効にすると
やはりウィジェットやカスタマイズのところが
毎回デフォルトに戻ってしまい焦ります。
カスタマイズページでの設定を保存しておくようにできないものでしょうか？？
by chokobo 2015年7月1日 2:55 AM
確認したところ、僕の環境ではテーマを切り替えてもそのまま保存されていますね。ちょっとどういう状況なのか分からないです。申し訳ないです。
by Nobuo@管理人 2015年7月2日 1:31 PM
初めまして。
マテリアルのテンプレートを使うと、新着記事欄は「★ New post」と表示されますが、移転をしたところ「star New post」と表示されるようになりました。
他にも、ホームボタンや検索ボタンも画像マークだったのですが、今は文字で表示されるようになってしまいました。
改善方法は御座いましたら教えて頂けると嬉しいです。
宜しくお願いします。
by 山本 2016年1月31日 7:07 PM
＞山本さん
テーマ（マテリアル）を再インストールしても駄目でしょうか？
ちなみに移転をしたと言うのは、サーバーを移転したのですか？それともドメインを変えたのでしょうか？
by 匿名 2016年1月31日 11:56 PM
読みやすい記事ありがとうございます。
すみませんが、カスタマイズの件でお聞きしたいことがあります。
わたくし、HTMLやCSSの知識はほぼ0に近く、調べながら少しずつカスタマイズをしているレベルです。
そこで今壁にぶつかっているのですが、ブログ記事内の小見出し2の背景色が、どうしてもメインカラーで設定した色と同じ色になってしまいます。
私は白にしたいので、「.content h2{background-color:#000;｝」と入れるのですが、どうしても白になりません。
どの部分を変更すれば良いのでしょうか。教えてください。
by ほうりい 2016年7月12日 8:43 PM
何度もすみません。
ここに記載していたコードが間違えていましたが、#000のところは実際は#fffにしてあります。
ご回答よろしくお願いします。
by ほうりい 2016年7月12日 9:06 PM
[修正前] .content h2{background-color:#000;｝
[修正後] .content h2{background-color:#000 !important;｝
これで大丈夫だと思います。
「css 優先順位」などでググッて勉強してみてください。
by Nobuo@管理人 2016年7月12日 9:10 PM
ご回答ありがとうございます。
すみませんが、!importantをつけても改善されませんでした。
勉強してみます。ありがとうございました。
by ほうりい 2016年7月12日 9:25 PM
改善出来ました！
本当にありがとうございました。
by ほうりい 2016年7月13日 12:04 AM
はじめまして。
こちらのテーマを使用させていただいている者です。大変お世話になっております。
管理人様のサイトでも実装されている月別アーカイブなのですが、どちらにどのように記載されているかお教えいただけますでしょうか？？
素人なもので、適当にいじって素敵なテーマを壊してしまうともったいなく思いましたので、ぜひよろしくお願いいたします。
by chiko 2016年7月13日 11:56 AM