WordPressテーマ作成⑤ 自分で用意したCSSをフロントに読み込む【day153】

WordPress

今日は、WordPressテーマ作成⑤ 自分で用意したCSSをフロントに読み込む、についてアウトプットしていきます。

こんにちは。Webコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。2020.5.11~学習スタート2020.8.10~実務でコーディングしていますHTML/CSS(SCSS)/jQuery に加えWordPressの学習中です。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

WordPressテーマ作成⑤ 自分で用意したCSSをフロントに読み込む

【今回のブログのゴール】
・自分で用意したCSS (style.css)をフロントに読み込む設定をする

 ＊前回までの記事はこちらです↓
①WordPressテーマの基礎となるファイルを作成→記事はこちら
②WordPressのアルゴリズム→記事はこちら
③タイトルと本文を表示させる→記事はこちら
④記事に画像を表示させる→記事はこちら
⑤グーテンベルクのCSSを機能させる→記事はこちら

style.cssを読み込む設定をする

前回までは、グーテンベルクがもともと持っているCSSである「style.min.css」と「theme.min.css」の２つを機能させる設定をしてきました。

今回は、WordPressテーマを作るために最初に作ったファイル↓

こちらより「style.css」をフロントに読み込む設定を行います。

テーマエディタから設定する

前回と同様に、テーマエディタからfunctions.phpに設定を記述していきます。

//style.cssを読み込む
wp_enpueue_style(
'mytheme-style',
get_stylesheet_uri()
);

・「’mytheme-style’」は、WordPressの中でCSSを区別するための名前なので、なんでもOKです。
・「get_stylesheet_uri()」は、テーマフォルダからstyle.cssのURLを取得するための記述です。

前回、記述したものの下に追記していきます。

style.cssは、もともとグーテンベルクが持っているCSSを上書きする必要があることも。
CSSの優先順位を高めるため、かならず後に記述するようにします。

読み込むタイミングを指定する

さらに、前回と同様、WordPressの処理の中で「wp_enqueue_scripts」のタイミングで実行できるように関数をを記述していきます。

前回と同様なので割愛します。

読み込みを確認する

フロントを表示して、ディベロッパーツールから確認していきます。

Elementsタブで、Ctrl + F(検索窓)を出し、「mytheme-style」で検索すると、CSSの読み込みが見つかりました。

この「mytheme-style」は先ほど、ワードプレス内でCSSを識別するためにつけた名前です。

キャッシュ対策をする

上の図で、<link>にver=5.5.1がついているのがわかります。これは、キャッシュ対策のためにつけられています。

キャッシュ対策とは、CSSを毎回新しい情報に更新するための対策のことです。

↓もしよろしければ、キャッシュについてまとめた記事があるのでこちらもどうぞ！

キャッシュ/cookieって何？キャッシュさせない方法も紹介【day106】
今日は、理解の甘かった「キャッシュとCookie」についてまとめます！ ブラウザにキャッシュさせないためのmetaタグもご紹介します。 こんにちは。駆け出しコーダーのharuです。 2歳0歳の育児をしながら、22時〜2時に独学しています！ ...
happy-making.com
2020.08.27

URLの文字列を変えることで、ブラウザに保存されているキャッシュが使われるのを防ぐことができます。

この<link>についているver=5.5.1 だと、WordPressのバージョンが変わった時しか数字が更新されないので、キャッシュ対策としては適当ではありません。

そこで、「更新時刻」を文字列として<link>に追加するように設定変更をしていきます。

テーマフォルダのfunctions.phpに下のコードを追記します。

array(),
filemtime(get_theme_file_path('style.css'))

 

ファイルの更新日時を取得するには、filemtime()を使います。()にはパスを指定します。

ファイルを更新 > フロントを再読み込みすると..

ver=1599669595 に変わり、更新時刻が付与されるようになりました。

これはUNIX時間で表されていて、1970年1月1日0時0分0秒が起点になっています。
→起点からの秒数を表している。

これで、ファイルの変更内容がかならず新しく読み込まれるようになりました！

( =毎度キャッシュからのCSSデータではなく、１から読み込まれたものが表示されます。)

あとがき

Webライターの合間に、亀スピードでコツコツ進めていたものをようやくアップできました(;´д｀)10月いっぱいはこんな感じですが、あきらめずに進めていきます🙇‍♀️

今日は以上です。

Thanks：師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

スポンサーリンク