web系[欲しいものを自分で作る]模索の日々

javascriptとかphpとか使って色々作って行きます。触ったことのある言語は、C, C++, Java, python, Ruby, Processing

WordPressのテンプレートに画像を挿入

前回に似たタイトルなのですが、今回はサイトの大枠に関係するテンプレートへの画像挿入の仕方を話していきます。


早速ですが、皆さんもテーマのテンプレートファイルは下記のようなディレクトリにあると思います。
「public_html/wordpress/wp-content/themes/sample/index.php
(↑僕の今回の環境です。)


もちろんここで僕は、画像を挿入するにはずっとHTMLでやって来たことと同様、index.phpにはこんな感じで相対パスを打てばいいのだと思ってやってみました。

<img src="images/logo.gif" alt="ロゴマーク" />


しかし、、、これでは見事に表示されず、悩んだのですがよく考えてみるとアクセスしたときに表示されているサイトは、テンプレートフォルダからテンプレートを引っ張って来ている訳です。ということはサイトを表示している時の階層はテンプレートのある階層ではないので、テンプレートからみた相対パスでは画像にたどりつけなかったのです。


調べてみるとどうやら、さっきの相対パスの頭に

<?php bloginfo('template_url'); ?>/


をつけるとうまく行くらしいとのこと。実際やってみたら見事、成功しました!

<img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="ロゴマーク" />

※ちなみにテンプレートフォルダのCSSから背景を画像で指定するときは、CSSからの相対パスで問題なく動きます。