CSSスタイルを読み込む（ハードコーディング）- [03]WordPressテーマ制作レッスン

このレッスンでは、用意されているstyle.cssをハードコーディング（<link>タグを使って直接テンプレートファイルに書くスタイル）で読み込む方法を実際に試してみます。

この方法は、WordPressのテーマ制作ハンドブックでは推奨されていない方法です。

しかし、この方法でも読み込める（読み込めてしまう）ということを理解していただくことは、今後WordPressに触れていく上で大切なことだと考えて、この学習セクションを設けています。

実際には、レッスン9で学習をするfunctions.phpにてwp_enqueue_scriptフックを経由したソースコードの読み込み方法を利用してください。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson

Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

github.com

このレッスンでは、上記リポジトリのwp-lesson-03というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-03ディレクトリを設置しましょう。

CSSファイルへのリンクを設置する

style.cssへのリンク

index.phpファイルの<head>タグ内に<link>タグを使ってCSSファイルヘリンクを設置していきます。（この方法を俗にハードコーディングと呼んだりします）

<link rel="stylesheet" href="/wp-content/themes/wp-lesson-03/style.css">

こちらのソースコードを、index.phpの<title>タグの下にコピー＆ペーストしましょう。

Google Fonts CSSへのリンク

次に、先ほど設置したリンクの下に、以下のGoogle Fonts CSSのリンクも設置しましょう。

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

設置をしたら、Google Chromeなどの開発者ツール（デベロッパーツール）で読み込まれているか確認してみましょう。

まとめ

このように、非推奨の方法ですが、CSSスタイルをハードコーディングで読み込むという学習を進めてきました。

冒頭に紹介したように、推奨される読み込み方法については別途レッスンを設けているので、そちらを参照してください。

以上でこのレッスンは終わりです。引き続き、WordPressテーマ制作レッスンを進めていきましょう！