前回の記事で、いくつか情報を表示できるようになりました。
いろいろ出せるようになると、見た目を整えたくなりますよね。
今回は最初に作った style.css に何か書き込んで、それがサイトに反映されるようにしてみましょう。
もくじ
style.cssでレイアウト・デザインを組む
style.cssに自由に書き込んで、サイトをデザインしましょう。
この記事では例として、背景を薄いグレーに塗っておきます。
/*
Theme Name: original-theme
*/
body{
background-color: #eee;
}しかしファイルを更新しても、背景は白のまま。変わりません。
まだ style.css を読み込んでいないからです。
HTMLやCSSのコーディング経験がある方なら、
「head内でlinkタグを使って読み込めばいいだろう」
と、すぐに思いつくことでしょう。
でも header.php に直接それを書き込む行為は、WordPressでは推奨されていません。
スタイルシートやスクリプトを読み込むにも作法があるのです。
functions.phpを作って処理をさせる
スタイルシートやスクリプトをサイトに読み込ませるには、「functions.php」という名前のファイルを作成し、そこに適切な処理を書き込む必要があります。
style.cssを読み込む処理は、下のように書きます。
<?php
function add_css_js() {
wp_enqueue_style('style', get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' );
}
add_action('wp_enqueue_scripts', 'add_css_js');
?>これにて、無事に style.css に書いた内容がサイトに反映されるはずです。
簡単に解説しますね。
関数にやりたいことを書き、add_actionで登録
4行目の add_action は何かのタイミングに合わせて自分がやりたいことを追加する時に使います。
やりたい処理は関数を作ってその中に書きます。
add_action('やりたいタイミング・場所', '実行する関数');
ここで「やりたいタイミング」に指定した wp_enqueue_scripts は、「スタイルシートやスクリプトを追加するならここ！」と公式に案内されています（フックと言います）
つまり先ほど書いたコード（下↓）は、「スタイルシートかスクリプトを追加したいから add_css_js を呼び出して！」という意味になります。
add_action('wp_enqueue_scripts', 'add_css_js');
add_css_js の中身については次の項目で解説しますね。
（関数名は好きな名前に変更してOKですよ）
<?php
function 【好きな名前】() {
wp_enqueue_style('style', get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' );
}
add_action('wp_enqueue_scripts', '【好きな名前】');
?>wp_enqueue_style でcssファイルを指定する
スタイルシートを読み込みたい時は、作った関数の中で wp_enqueue_style を使用します。
最低限の情報に絞るとこのようなかんじ↓
wp_enqueue_style( 'style', '読み込みたいファイルのURL');
今回ひとまず読み込みたいのは style.css なので、下のように書くと良いでしょう。
get_template_directory_url を使えば自作テーマのファイルが入っているURLを参照できます。
wp_enqueue_style( 'style', get_template_directory_uri().'/style.css');
「さっきはもっといろいろ書いてあったじゃないか！」
そうですね。
あれは閲覧者に常に最新のスタイルシートを読み込ませるための処理です。
もしかしたらcssを編集したことのある方は「いくら書き換えても見た目が変わらなかった」なんて経験をしているかもしれません。
詳しい説明は省きますが、管理者がcssファイルを更新しても、閲覧者（ブラウザ）側は前に読み込んだものをキャッシュして持っているので、すぐには最新の状態にならないことがあるのです。
最新のcssが読み込まれないことによって起こるデザイン崩れを防ぐために有効な手段が実はありまして、それはファイル名と一緒にバージョンを指定しておくことなんですね。
HTMLで書くと次のようになります。
<link rel='stylesheet' id='style-css' href='http://〜/style.css?ver=100' type='text/css' />
ファイル名の後ろに「?ver=バージョン」と指定しておき、ファイル更新と同時にバージョンの部分を書き換えるようにすれば、ファイル名が変更されたような扱いになって必ず読み込み直してくれるのです。
wp_enqueue_style に情報を追加すれば、バージョンを記入してくれるようになります。
wp_enqueue_style( 'style', get_template_directory_uri().'/style.css','' 'バージョン');
しかしいちいちバージョンを編集するのは面倒ですよね！
そこでさっきのコードです。
wp_enqueue_style('style', get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' );
何をやっているかというと、 style.css の更新日時を調べて、それをバージョンとして使用しているんですね。
これなら style.css を上書き保存するたびに勝手にバージョンが変わってくれるので、他に編集するところがなくて楽チンですね！
実際にこの処理でhead内に記入されるようになるタグは、こちらになります。
<link rel='stylesheet' id='style-css' href='http://〜/style.css?ver=20200318758' type='text/css' media='' />
まとめ
functions.php を作成し、次のコードを書き込めば style.css が読み込めます。
<?php
function add_css_js() {
wp_enqueue_style('style', get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' );
}
add_action('wp_enqueue_scripts', 'add_css_js');
?>次は記事一覧を表示してみます。
この記事へのコメントはありません。