このレッスンでは、用意されているstyle.css
をハードコーディング(<link>
タグを使って直接テンプレートファイルに書くスタイル)で読み込む方法を実際に試してみます。
この方法は、WordPressのテーマ制作ハンドブックでは推奨されていない方法です。
しかし、この方法でも読み込める(読み込めてしまう)ということを理解していただくことは、今後WordPressに触れていく上で大切なことだと考えて、この学習セクションを設けています。
実際には、レッスン9で学習をするfunctions.php
にてwp_enqueue_script
フックを経由したソースコードの読み込み方法を利用してください。
動画
レッスンの準備
このレッスンでは、上記リポジトリの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テーマ制作レッスンを進めていきましょう!
このレッスンの関連動画一覧を見る