これを見ればLION BLOGの子テーマ化（style.css以外のCSSファイル、content.cssなど）ができるよ！多分ね。
WordPressで子テーマ化の記事はよく見かけるけど、子テーマ化すること自体が目的になっている内容が多いです。
子テーマ化するのは、親テーマが消えたり、アップデートされても自分でカスタマイズした内容が消えないようにするためです。
「よく分かんないけど子テーマ化できました、わぁい（はーと）」じゃねぇんだよハゲー。
トラブってからじゃ遅いんじゃボケー。
きちんと理解せずともコピペだけすれば子テーマ化はできます。
しかし子テーマ化はCSSファイルやPHPファイルの変更が保持、反映されて初めて意味があります。
とは言え、私もLION BLOGの子テーマ化には結構ハマりました。
ネットで調べても、みんなstyle.cssについては書いとるけど、content.cssとか他のCSSファイルについては全然書いとらんけんね！
お前らホントにLION BLOGの子テーマ化して、カスタマイズして、変更が反映されたことを確認したんかーい！
って調べながら何度も思いました。
麦チョコも沢山食べました。
なので、解説を交えながら私がやったことを振り返ってみます。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
もしここの内容が難しいと感じたなら、この本が参考になると思いますよ。
WordPressテーマ「LION BLOG」って何？
まずWordPressってのはWebサイト（ホームページ）を作る仕組みのようなもので、世界中で使われています。
ブログだけじゃなく企業サイトもWordPressで作られたものが数多くある。
そのWordPressには沢山のテーマがあって、様々なデザインを選ぶことができます。
TwentySeventeen、SimpleCity、Stinger、Xeory、STORK、賢威、その他いろいろ！
みんなそれぞれにいいところがあるんだよ。
世界に一つだけの花なんだよ。
中にはとんでもない花もあるけどね。
そんなこんなで、2017年8月28日に「LION BLOG」というテーマがリリースされたんです。
このテーマは、SEO対策、多機能、見た目も良しとGoodポイントが多いんです。
なによりページ表示がとにかく早い！
るろ剣の志々雄先生が「目にも写らねぇ速さ」って言ってた瀬田宗次郎くらい。
でもLION BLOGの読み込み画面はたまに目視できる。
なんちゃって縮地。
でも他のテーマに比べると本当に早い。
javascriptを使わない設計になっているのがポイント。
パソコンだけじゃなく、スマホなどのモバイル端末でもAMPに対応しているから早い。
私はXeory BaseからLION BLOGにテーマを変更しました。
どっちも良かったんだけど、早さが明確に違ったのが決め手だった。
LION BLOGにしてみた感想
読み込みはえー。
見た目も中々いー。
機能も色々あるー。
細かいところは置いといて、ほぼ文句ねー。
なんだけど、読む人にとって見やすくするためには幾らか変更が必要だなとも感じました。
メニューや見出しのデザインについてもそうだけど、最初にやろうと思ったのは、
- 記事中の文字をもう少し大きくしたい
- 記事中の行間をもう少し広くしたい
この２つ。
テーマをLION BLOGに変更した後、最初にやる作業が決まりました。
LION BLOGを子テーマ化する！
LION BLOGには最初から子テーマがダウンロードできるようになっています。
私は普段、テーマをカスタムする時には自分で必要なファイルをコピペ、作成して子テーマ化します。
今回もその流れでいこうとしたけど、よく見るとLION BLOG側で子テーマが用意されているじゃありませんか。
なんて素敵。
痒いところに手が届くわねー、ライオンのくせにねー。
ダウンロードすると「lionblog-child」というフォルダの中に３つのファイルが入っています。
- function.php
- style.css
- screenshot.png
function.phpとstyle.cssは子テーマ化の基本となるファイルです。
さらにscreenshot.pngがあるのでテーマ選択の時に分かりやすくて親切。
function.php、style.cssのどちらもソースコードにコメントが書いてあって親切だなと感じました。
親テーマは「lionblog」フォルダに入っており、そっちには沢山のフォルダやファイルがあります。
ついでに言っておくと、あまり詳しくない人はフォルダ名やテーマ名、その他の値を変えない方がいいですよ。トラブルの元です。
自分の使ってるテーマを調べられてバレるのが嫌？
そんなん誰も気にしとらんわ！大概にせぇよ！！
FTPツールを使って「wp-content/themes/」の下に「lionblog」「lionblog-child」の２フォルダを設置します。
WordPressのダッシュボードから「外観」>「テーマ」を選択して「LION BLOG Child」を選べばLION BLOG子テーマ化の第１段階が終了です。
私が調べた時、ほとんどの記事はここで終わってました。
こっから先が大事なんじゃよー！
- LION BLOGは子テーマを公式サイトからダウンロードできる
- 子テーマフォルダ「lionblog-child」は親テーマフォルダ「lionblog」と同じ階層にアップロード
- WordPressのダッシュボードから子テーマを選択すれば、まずはOK
GoogleChromeの検証機能で目標のファイルを確認
GoogleChromeだと、ページのどこかで右クリックして「検証」を選ぶことで、色々な情報を調べることができます。
この画像にはのっていませんが、左側には普通にページが表示されています。
右側にはこのようにHTMLのソースコードや、CSSの設定が表示されます。
最初のうちはよく分からんかもしれんけど、右クリック＞検証を繰り返すうちに理解が深まって色々と分かるようになるよ。
この検証機能によって、私がやろうと思った「文字を大きくする」「行間を広くする」はどうやらcontent.cssというCSSファイルで設定されているということが分かりました。
今回のケースだと親テーマ、つまり「lionblog」フォルダの中のcontent.cssの値を変えればすぐに思い通りの文字サイズ、行間にできます。
そうなんだけど、もしLION BLOGテーマがアップデートされると「lionblog」フォルダの中のcontent.cssが上書きされてしまいます。
そうすると、せっかく変更した作業が無駄になります。
アップデートのたびに変更作業をやるのは面倒だしミスの元になっちゃう。
しかし！
LION BLOGテーマがアップデートされても子テーマ、つまり「lionblog-child」フォルダ内のファイルは上書きされません。
子テーマ化した場合、このように子テーマ側のフォルダの中を変更します。
style.cssを変更しても無駄ァ！
子テーマの「lionblog-child」フォルダには初期状態ではcontent.cssが存在しません。
CSSファイルはstyle.cssの１つだけ。
function.phpファイルを見てみると、style.cssは何となく読み込まれてそうだったので（我ながら浅はか）、style.cssに「文字を大きくする」「行間を広くする」の設定を書いてみました。
具体的には、style.cssの一番下、「下記ユーザーカスタマイズエリア」と書いてある下にソースコードを追加しました。
/*/////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
/////////////////////////////////////////////////*/
/*ボックス*/
.content{
font-size:1.7rem;
line-height:1.75;
}
/*段落*/
.content p{margin-top:2em;}
この変更後、FTPツールでstyle.cssを子テーマフォルダに上書きアップロードして、ページを更新（F5ではなくCtr+F5もしくはShift+Ctr+F5）をしても変化なし。
文字の大きさはそのままだし、行間の広さもまったく変わっていません。
まぁまぁ、まだ慌てるような時間じゃない。
正直に言うと、まだこの時は正確な理由が分かりませんでした。
やっぱりcontent.cssじゃないとダメだよねー
やはり元々は親テーマ「lionblog」フォルダの（さらに「css」フォルダ内の）content.cssで設定されている値だから、content.cssで設定するのが自然だよねーと根拠もなく判断する適当さ。
こういうの本当はダメなんだけど、壁にぶつかってハマっている時は色々と試すという意味ではアリです。
実際は必ずしもcontent.cssじゃないとダメってことはないんだけど、結果的にcontent.cssの方がシンプルだった。
ちなみに、content.cssというのは、ページ中の記事の部分（ヘッダーやサイドバーやフッターを除いた部分、この文章が書かれているここ）の設定を書きます。LION BLOGもそうなってます。
私はまず、lionblog/css/content.cssを適当な場所にコピーしました。
そこで、文字の大きさと行間の広さ以外の設定を全て消します。
サンプルを下に書いときます。
●子テーマフォルダのcontent.cssのサンプル
@charset "UTF-8";
/*ボックス*/
.content{
font-size:1.7rem;
line-height:1.75;
}
/*段落*/
.content p{margin-top:2em;}
このcontent.cssファイルを、子テーマ「lionblog-child」にアップロードします。
親テーマではcssフォルダの中にcontent.cssが入っているけど、子テーマではcssフォルダは作っても作らなくても正しく設定できればOKです。
私は作らなかった。
そして再びページを更新して様子を見てみる。
相変わらず何も変化なし。
んー、もうそろそろ何か変化があってもいい頃なんだけどなー。
さすがの仙道さんも汗かいてくる頃だなー。
子テーマ側のfunction.phpで子テーマ側のcontent.cssを読み込む
そういえば、子テーマ側のfunction.phpはノータッチだったことに気づく。
内容をきちんと見ると、「//親テーマstyle.cssを読み込む」というコメントが書かれております。
なるほど、分からん。
今の私がやりたいのは、子テーマ側に置いたcontent.cssを読み込むこと。
そして、それは恐らくこの子テーマ側のfunction.phpを変更すれば可能なのである。
ここで、一般的な子テーマ化の方法でよく使われるソースを利用してみることにした。
●子テーマ化でよくfunction.phpに使われるソースコード
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
このよく見るおまじないみたいなコードでは、ページのヘッダー部分でCSSファイル等を読み込む処理に、親テーマのstyle.css読み込み処理、子テーマのstyle.css読み込み処理を追加しています。
順番は基本的に、親テーマが先で、子テーマが後。
後に読み込んだCSSファイルの設定が優先（上書き）されるため。
これをベースにして、style.cssの箇所をcontent.cssにしたらいいんやろ！
ということで、子テーマのfunction.phpを変更しました。
●子テーマ側のfunction.phpの下の方にこのソースコードを追加
//////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
//////////////////////////////////////////////////
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/content.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/content.css', array('parent-style'));
}
親テーマ側のcontent.cssは「css」フォルダの中にあるので、/cssを足して場所の指定も抜かりない私。
完璧すぎる、天才か、天才なのか。
これで子テーマ側のcontent.cssが呼び出されて、私の悲願である「文字を大きく」「行間を広く」が果たされるであろう。
思えば本当に長い道のりだった。
ありがとうみんな、ここまで生きてきてよかったよ。
達成感と共にF5キーでページを更新したところ、変化なし。
いっけね、Ctrキー+F5じゃないとダメだったかー、おっちょこちょいなんだからハハハ。
が・・・駄目っ・・・！！
生まれてきてごめんなさい。
ここで麦チョコを求めて街をさまよう。
HTMLコードで状況を正しく把握する
なんなんだろうこれは。
私は賽の河原で石を積んでは鬼に蹴り飛ばされているのではなかろうか。
頑張っても頑張っても上手くいかず、その度にゼロに戻されている気がしてならない。
そろそろハートがブレイクする頃合いだ。
そこでふと思い出したのが、すごく妥当で納得できる、問題対処の方法だった。
ソフトウェアの仕事で、複雑な問題に対処するために重要なことがあった。
それは「これは間違いなく正しい」と言える範囲を広げていくこと。
問題を細かいパーツに切り分けて、根拠と確証を集める作業を繰り返していくことで、問題の核心に迫ることができる。
ここまでやってきたよく分からないおまじないのソースコード、何となくやったコピペを見直し、コードの１行１行全てを理解することを決意した。
状況を正しく把握するために、GoogleChromeの検証機能で、HTMLコードを確認する。
ヘッダー部分（<head>と</head>で挟まれている箇所）で読み込まれているCSSファイルと、その場所、順番を確認した。
この確認作業で分かったのは、上でやった子テーマ側のfunction.phpでcontent.cssを読み込むことには成功しているが、その後に親テーマ側のcontent.cssで設定が上書きされていたということだった。
（これは出力されたHTMLコードであって、PHPファイルやCSSファイルのソースコードではないよ）
<link rel="stylesheet" href="https://osokunai.net/wp-content/themes/lionblog/style.css"> <link rel="stylesheet" href="https://osokunai.net/wp-content/themes/lionblog-child/content.css"> <link rel="stylesheet" href="https://osokunai.net/wp-content/themes/lionblog-child/style.css"> <link rel="stylesheet" href="https://osokunai.net/wp-content/themes/lionblog/css/content.css"> <link rel="stylesheet" href="https://osokunai.net/wp-content/themes/lionblog/css/icon.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900">
２行目で子テーマ側のcontent.cssを読み込んでいるのに、４行目で親テーマ側のcontent.cssを読み込んでいるので設定が上書きされてしまっていた。
この見えない事実が分かった事によって、原因究明にぐっと近づいた。
親テーマのfunction.phpの処理を理解する
子テーマ側でせっかく読み込んだcontent.cssが親テーマ側のcontent.cssで上書きされることが分かったので、次はその処理の場所を見つける。
親テーマ側のfunction.phpの中の「content.css」で検索するとすぐに出てきました。
LION BLOGは結構親切なので、ソースコードにコメントがしてあり、そこでどんな処理をしているかが分かるようになってます。
////////////////////////////////////////////////// //wp_headにオリジナル項目追加 //////////////////////////////////////////////////
このコメントの下の部分で、親テーマ側のCSS（style.css, content.css, icon.css等）をまとめて読み込んでいました。
このwp_headという関数はWordPressに必要な情報（CSS、jQuery、URIなど）を出力します。
つまり、親テーマ側のfunction.phpの中にある関数wp_head()でCSSファイルを読み込むコードが出力されています。
さっき見たこういうコードね。
（これは出力されるHTMLコードであって、PHPファイルやCSSファイルのソースコードではないよ）
<link rel="stylesheet" href="https://osokunai.net/wp-content/themes/lionblog/style.css">
子テーマ側のfunction.phpにはwp_head()の記述はありません。
それじゃあ、親テーマ側のfunction.phpをいじって読み込むCSSファイルを決めるしかないの？と思った人は鋭い！
でも、というかもちろん、その答えはNOです。
子テーマのfunction.phpの処理を理解する
何度か書いていますが、親テーマ側のファイルを変更しても、アップデートされると変更がリセットされます。
だから、子テーマ側から親テーマ側のfunction.phpの（今回はwp_head()の）動作を変えることができるんですね。
よーできとるわー。
そのためには、add_action()という関数を使います。
実は子テーマ側のfunction.phpに既に書いてあったりします。
説明のために、子テーマ化でよく使われるソースコードを引っ張ってきました。
かなーり上の方にも同じものを書いてます。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
まずadd_action()は、アクションを加えるという名前の通り、既にある関数に関数（処理）を付け加えることができます。
add_action( ‘既にある関数’ , ‘付け加える関数’ )という使い方をします。
付け加える関数は、add_action()の直前か直後に定義します。
次にwp_enqueue_style()は、スタイルシート（CSSファイル）をヘッダーに読み込ませるために使います。
wp_enqueue_style( ‘ハンドル’ , ‘CSSの場所’ , ‘先に読み込むCSSのハンドル’ )という使い方をします。
ハンドルは分かりやすい名前を自分でつけます。
この２点を頭に置いて、よく使われるソースコードの動きを説明すると、
１行目：
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
wp_enqueue_scriptsという関数にtheme_enqueue_stylesという関数を追加する。
２行目：
function theme_enqueue_styles() {
theme_enqueue_stylesという関数の中身は…
３行目：
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
親テーマ側にあるstyle.cssというスタイルシートを読み込みます。
４行目：
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
子テーマ側にあるstyle.cssというスタイルシートを読み込みます。（親テーマのstyle.cssの読み込みが終わった後でね）
５行目：
}
…です！
５行目の説明はいらん気がするけど、やっている処理はこの通りです。
最終解：私がやった方法
私が途中までやっていたことは、正解の直前まで辿り着いていたんですね実は。
でも、きちんと整理してソースコードを理解しないと正解には確実に辿り着けませんでした。
原因は、add_action()で設定しなかった優先度です。
add_actionの引数は、 ‘既にある関数’ , ‘付け加える関数’ の2つと説明しましたが、3つ目（ほんとは4つ目も）があります。
その3つ目の引数が優先度です。
優先度の初期値は10になっていて、省略すると10で実行されます。
優先度が高いものから早く実行されるようになります。
優先度1が最も優先される、つまり最初に実行されます。
ここで改めて私の状況をざっくりと説明します。
子テーマ側のcontent.cssは読み込まれているが、その後に親テーマ側のcontent.cssが読み込まれて上書きされているという状態。
この、子テーマCSS読み込み→親テーマCSS読み込みという順番を逆にできれば問題が解決するわけです。
そのために、add_action()で関数を付け加える優先度を下げます（数字を10よりも大きくする）。
ということで、私が色々と変更した子テーマ側のfunction.phpの最終形態をお見せしましょう。
フリーザか私は。
よく分からん！って人はコピペしてください。
上の方は何も変えていません。ユーザーカスタマイズエリアに足しただけです。
style.cssはLION BLOGの子テーマとして提供されているものを使えばOKです。
●最終的な子テーマ側のfunction.php
<?php
//////////////////////////////////////////////////
//親テーマstyle.cssを読み込む
//////////////////////////////////////////////////
function fit_head_child() {
if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-main')) {
echo '<link class="css-async" rel href="'.get_template_directory_uri().'/style.css">'."\n";
}else{
echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/style.css">'."\n";
}
if (is_singular()){
if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-content')) {
echo '<link class="css-async" rel href="'.get_template_directory_uri().'/css/content.css">'."\n";
}else{
echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/content.css">'."\n";
}
}
}
add_action('wp_head', 'fit_head_child');
//////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
//////////////////////////////////////////////////
//他のCSSを読み込んだ後に子テーマのcontent.cssを読み込む
function fit_head_child_content() {
if ( get_option('fit_seo_cssLoad-content')) {
echo '<link class="css-async" rel href="'.get_stylesheet_directory_uri().'/content.css">'."\n";
}else{
echo '<link rel="stylesheet" href="'.get_stylesheet_directory_uri().'/content.css">'."\n";
}
}
add_action('wp_head', 'fit_head_child_content', 11);
?>
34行目でadd_action()の優先度を11に設定することで、親テーマのCSS読み込み処理のかなり後で子テーマのcontent.cssが読み込まれます。
これで、親テーマのCSS読み込み→子テーマのCSS読み込みという正しい順番で処理が行われます。
fit_seo_cssLoad_contentは親テーマのfunction.phpで検索すると見つかります。勉強したい人は見たらええよ。
追記：2018年1月19日
上のソースコードの
add_action('wp_head', 'fit_head_child_content', 11);
の箇所を、
add_action('wp_head', 'fit_head_child_content');
にしても問題なく動作します。
そっちの方が動きとしては自然だと思います。
ちなみに上に書いてある子テーマのfunction.phpのソースコードはアップデート後のものなので、そのままコピペで大丈夫です。
さらに、子テーマ側のcontent.cssも一応載せておきます。これは子テーマの直下（style.cssと同じ場所）に置いています。
●子テーマ側のcontent.css
@charset "UTF-8";
/*ボックス*/
.content{
font-size:1.7rem;
line-height:1.75;
}
/*段落*/
.content p{margin-top:2em;}
content.cssには見出しなんかも色々と設定されているので、このへんを変更したい人も多いんじゃないかな。
親テーマ側のstyle.cssで設定されているものは、子テーマ側のstyle.cssで変更するのがいいと思います。
私はカスタムしまくるのは面倒だけど、もう少し変えるつもりです。
正直なところ、これが最適解かどうかはあんまり自信がないです。
content.cssじゃなくてstyle.cssに変更をまとめて、最後に読み込んで上書きすることもやりようによってはできるかもだし。
ただ私としては、LION BLOGっていうイケてるテーマがあるのに、子テーマでのカスタムができなくて本当に悩みました。
他にも同じように困っている人がいるかもしれないので、そういう人の助けになれば嬉しいです。
嘘です。麦チョコください。
WordPressは、テーマがそのままだと他の人と同じになるので少しはカスタムできた方が楽しいよ。
そして何かトラブルがあった時、PHPなんかの知識があると助かる。
トラブルはほんと困る…
ネットで調べても細かい状況が違ったりすると中々解決するのが難しかったりするからね。
私はこのへんを読んで勉強して、今でもたまに読み返したりしとります。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
WordPressのバージョンアップに従って、本のバージョンも新しくなってます。ぬかりねぇな。
テンプレートタグ（今回出てきたadd_action()とか）がまとまってんのが地味に役立つよー。
私は他のサイトですすめられてたので買いました。
内容がしっかりしてて、図や表やリストや見出しなんかのデザインが綺麗で読みやすかった。
おすすめです。
