WordPress 自作の画像やJavaScriptの設置方法と設置したファイルへのディレクトリパス取得タグの設定方法

WordPressでサイトのURLを出力する「bloginfo(‘url’)」とか、サイトのタイトルを出力する「bloginfo(‘name’)」はすぐ、ピン!と来るんだけど、自作テンプレートを作成する際に、自分で作った画像やJavaScriptへのパスを出力するタグを毎度毎度調べなおすので覚書。

通常のHTML/CSSで、画像のような一般的な配置の場合パスの指定方法は

html

<img src="img/logo.jpg" width="50" height="50" />

となる。

WordPressの場合は動的にパスを生成するので、上記のように直書きしてもリンクエラーとなってしまう。

自作テンプレート等を作成した場合の例で下記のような配置の画像を表示させる場合。

wordpress

「twentyeleven」はテンプレートフォルダ(例)で
「/wordpress/wp-content/themes/twentyeleven/」に設置してあるものとしてこの「img」フォルダにある「logo.jpg」を表示させるには

<img src="<?php bloginfo('template_url'); ?>/img/logo.jpg" width="50" height="50" />

子テーマを作成していてそれを指定する場合は

<img src="<?php bloginfo('template_directory'); ?>/img/logo.jpg" width="50" height="50" />

実は自分も「template_url」と「template_directory」の違いが判らなくて、今回の記事を書くにあたってググる先生に聞きました^^;

JavaScriptの場合も同じで例として


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/hogehoge.js"></script>

といったような感じになります。

半月も経つとまた忘れるんだよなぁ・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)