タグで画像を表示する方法get_stylesheet_directory_uri()【WordPress関数】|ためになるWordPressブログ

WordPress

WordPressでは通常メディアライブラリにアップロードされた画像ファイルを使用します。

しかしHTMLを記述するときは通常<img>タグを使用するかと思います。
そこで<img>タグを使用するときはどのように記述するのでしょうか。

そんなときに使用するWordPress関数が

get_stylesheet_directory_uri()

です。使い方を見てみましょう。

<img>タグを使用する場面とは

まず関数の説明に入る前に、メディアライブラリからかんたんに画像をアップロードして使用することができるWordPressであえて<img>タグをしようするのはどんなときでしょうか。

それは、テーマを使うユーザーが変更する必要のない画像などをアップロードするときです。
つまりテーマの一部となるような画像やちょっとしたボタンの画像、ページのデザインの一部などの画像です。

テーマで使用する画像は通常style.cssと同じフォルダにあるimagesのフォルダ内にまとめて収納します。

それに対してメディアライブラリから追加して使用する画像は「wp-content」というフォルダ内の「uploads」に保存されます。
このフォルダの画像はテーマを切り替えても影響を受けませんので投稿記事の画像などはそのまま表示できます。

説明

get_stylesheet_directory_uri()について『WordPress Codex』にはこのように書いてあります。

テーマまたは子テーマのスタイルシートディレクトリの URI を取得する。

関数リファレンス/get stylesheet directory uri-WordPress Codex

つまりはテーマの保存場所を値として返してくれる関数ということです。

値として返してくれるだけですので表示するにはechoと併用することが必要となります。

使用方法

使用方法はさほど難しくありません。

テーマフォルダのimagesのフォルダに保存してあるsample.jpgという画像を表示するという例を見てみましょう。

index.htmlなど

<img src=”<?php echo get_stylesheet_directory_uri(); ?>/images/sample.jpg” alt=””>

このように記述すると出力されるのがこうなります。

出力されるHTML

<img src=”http://ドメイン名/wp-content/themes/テーマ名/images/sample.jpg”>

<?php echo get_stylesheet_directory_uri(); ?>
これが
http://ドメイン名/wp-content/themes
と書き換えられるわけです。

注意しなければいけないのは出力されるHTMLの最後に”/(スラッシュ)”が付かないという点です。
この関数を使用した直後は「/images/sample.jpg」のように”/(スラッシュ)”から書き始めなければなりません。

HTMLに直接記述せずにこの関数を使うのはドメイン名が異なる様々なサイトからその都度ディレクトリのURIを取得できるからです。

まとめ

単純に置き換えられると考えればかんたんな関数であると思います。

ぜひ使えるようになっておきましょう。

コメント

タイトルとURLをコピーしました