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

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

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

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

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

目次

動画

レッスンの準備

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

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

WordPressのルートディレクトリにあるwp-contentの中のthemeswp-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テーマ制作レッスンを進めていきましょう!

この記事が気に入ったら
フォローしてね!

この記事を書いた人

Web制作系フリーランスです。岐阜地域のWordPressやCoderDojoのコミュ二ティ活動に参加しています。最近は映像やカメラにも力を入れています。やんちゃ坊主たちの父親もやっています。

目次
閉じる