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

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

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

動画

レッスンの準備

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

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