@importはページロードが遅くなる。子テーマの作り方をきちんと勉強してみた。その2

さていよいよこんがらがって適当に済ませてしまいがち(?)な、
ファイルへの記述部分を見ていきます。

前回までのあらすじ

@importはページロードが遅く。子テーマの作り方をきちんと勉強してみた。その1

真っ白なファイルに書き込んでいく

style.css 編

これはなんのファイルなの?

これはスタイルシートという、ウェブページのデザイン部分をぎゅっとまとめたものです。
興味のある方はウィキペディアに詳しく載っていますが、詳しすぎて逆に分かりづらい…。

CSSはウェブページの骨組みの部分と装飾の部分を分ける目的で作られ、
メンテナンスがしやすかったり、読みにくさから間違えて関係ない所をいじってあぼん!
…などの悲劇を生みにくかったりする、素晴らしいものです!

( ´_ゝ`){今日まで知らなったけど、偉いぞホーコン・ウィウム・リー氏☆

ブロガーにとっては、簡単に見た目をカスタマイズ出来るとっても重要なファイルですね。
メニューの色を変えたいとか、見出しのデザインをいじりたいとか、写真のサイズを変えたいとか、CSSを使いこなせばカスタマイズは無限大です…!

まずは親テーマのスタイルを継承

ワードプレスのCordexサイトでは、cssファイルは以下のような記述から始めるようにと書いてあります。

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

※プログラミング経験のない人用メモ: /* と */ の間はコメントといい、実際のコードではなく人間が読む用の部分です。

もちろんこれをそのままコピペしてもダメで、正しい情報に適宜変える必要があります。

 

うん…長くない?

バージョンとかライセンスとか何書いていいか良く分からんし…

_(┐「ε:)_

 

「安心してください はいてますよ」

…じゃなかった、

安心してください、この子テーマを再配布するつもりがないなら必要なのは2つだけ。
Theme Name と Templete です。

テーマのURLとかライセンス、タグ、作者などは全てテーマを配布する時に必要な情報らしく、
個人で使うだけならこの部分はまるっと無視してOKみたいです。

というわけで私の場合、
子テーマのフォルダ名が”first-child”、親テーマのフォルダ名が”first”なので…

/*
Theme Name: first-child
Templete: first
*/

と書いておけばOKですね。

@importの誘惑

さて、少し古い情報を載せているサイトだと、style.cssに@importを使って親テーマのスタイルを継承させてハイ終わり!ってあったりするんですが、その方法はイマドキではないようです。

英語版Cordexページによると、
推奨されない理由は@importを使うとスタイルシートを読み込む時間が余計にかかるから

代わりにちょっと面倒ですがfunctions.phpを作って設定していきます。

functions.php 編

これは何のファイルなの?

私に知識が全然ないので検索してみました。
こちらのワードプレステーマを作る人向けのページに説明があったので抜粋:

WordPressのプラグインのような働きをします。

(中略)

要するに、テーマ固有の機能を設定するファイルということになります。

( ´_ゝ`)ふむふむ。(←かなり端折りましたすいません)

何か色々出来そうですが、子テーマを作るというこの段階では、
親テーマのスタイルシートを読み込むためにこのファイルを作成するって所だけ分かっていればいい感じですね。

ファイルに記述する内容はこちら

<?php
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>

これは変える部分はないのでそのまま貼り付けてOKです。

重要:親テーマをいじっている場合は注意

親テーマを既にカスタマイズしている場合、その部分は継承されません。
私は色をちょっと変えた位なのでちまちまカスタマイズし直しましたが、
色々いじっているかたは厳しいかも…。

でもちゃんと継承する方法もあるようで、
英語版Cordexページに書いてありました。
“Creating a Child Theme from a Modified Existing Theme”という部分なので、必要な方は見てみるといいかもしれません。

でもやはり簡単なのは、最初から子テーマを作る事だ、と公式ページも言っています。

子テーマ大事!!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です