CSSファイルへのリンク設定 – [06]WordPressテーマ 制作レッスン

このレッスンでは、以前のレッスンでCSSファイルへパスを記述してリンクを設置しましたが、そのパスをテンプレート関数get_stylesheet_uri()を利用して出力してみます。

ハードコーディングでのソースファイルの読み込みはWordPressでは推奨されていません。しかし、このように作れてしまう、作ってしまっている方も少なくないため、学習のためにレッスンセクションを設けています。

目次

動画

レッスンの準備

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-06というディレクトリにあるファイルを使って学習を進めていきます。

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

get_stylesheet_uri()

こちらのテンプレート関数では、有効化してあるWordPressテーマ内にあるstyle.cssファイルへのパスを出力してくれます。

ですので、wp-lesson-06というテーマフォルダであれば、出力されるパスは、

wp-content/themes/wp-lesson-06/style.css

となります。テーマフォルダ名などに関わらず、WordPressの基本CSSスタイルファイルであるstyle.cssへのパスを出力する際に利用します。

利用方法としては、

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

となります。

get_stylesheet_directory_uri()

こちらはget_stylesheet_uri()に似ているので間違えやすいのですが、関数名にもあるようにスタイルシートファイルstyle.cssがあるディレクトリへのパスを出力してくれます。

言い換えると、スタイルシートファイルまでのリンクとして利用する場合には、style.cssまでのパスにならないため、/style.cssと書き加えないといけなくなります。

利用方法としては、

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

となります。

まとめ

似た名称のテンプレート関数を比較してみましたが、動作の違いは確認していただけましたでしょうか?

こういった細かい部分ではありますが、様々な種類の動作をする関数がたくさん用意されていて、便利に利用し開発をすることができるのがWordPressの醍醐味でもあります。

ぜひこれら以外にも、様々な関数がありますので、違いを実験しながら確認していくと、より一層WordPressへの理解が深まるかと思います。

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

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

この記事を書いた人

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

目次
閉じる