前回は _s のテンプレートファイルとモジュールテンプレートについて書きました。
今回はヘッダー部分にオリジナルの画像（ロゴなど）を入れながら、テーマ、ブログ情報に関するタグについて書いてきます。

[show_underscores]

この記事の対象

• HTMLとCSSでサイトを構築できる（テーマの元になるHTMLを組める）
• WordPressのテーマの構造やテンプレート階層を理解している
• フルスクラッチでテーマをつくるのが（毎回）手間と思っている
• 子テーマ（あるいは既存テーマを複製）での制作に限界を感じている

目次

1. ヘッダー部分に入れるロゴを用意
2. ファイルのパスに気をつけよう
3. get_bloginfo() や bloginfo() じゃダメなの？
4. ブログ情報に関連する関数のチートシート
5. マークアップしてみよう
6. エスケープ処理

ヘッダー部分に入れるロゴを用意

今回は <img> タグでマークアップします。
ロゴは適当に用意し、テーマフォルダ内に入れておいてください。
（例では logo.png というファイルを、テーマフォルダ内の images というフォルダ（ディレクトリ）に入れています。）

ファイルのパスに気をつけよう

スタイルシート内で画像を使用する場合は相対パスで大丈夫ですが、テンプレートファイルに画像等を使用する場合は、相対パスが使えません（この例だと <img src="images/logo.png"> はNG）。
全てのテンプレートファイルは、要求されたURL（クエリ）によって選択された上でルートのindex.phpにインクルードされます。つまり、WordPressはテーマのテンプレートファイルを直接表示している訳ではありません。
例えばサイトトップから、テーマフォルダ内の画像へのパスは wp-content/themes/テーマディレクトリ名/img/site-title.gif になりますが、デフォルト以外のパーマリンクにしていれば投稿や固定ページなどでさらに階層が異なる（異なっているように見せかける）ので、相対パスの階層は複雑になります。
こういった事態を避けるため、テーマフォルダ内にあるテンプレートファイル以外のファイル（画像など）へのリンクには、テンプレートタグを使いましょう。

• 参照：日本語フォーラム：相対パスでは画像は表示されないのでしょうか。 

テーマのディレクトリのURIを取得する関数は2つあります。
この関数が子テーマで使われた時に返すURIが異なりますので注意してください。

• get_stylesheet_directory_uri 
  <?php echo get_stylesheet_directory_uri(); ?>
  使用しているテーマのディレクトリのURIを取得。
  子テーマを使用している場合、子テーマのディレクトリのURI。
• get_template_directory_uri
  <?php echo get_template_directory_uri(); ?>
  使用しているテーマのディレクトリのURIを取得。
  子テーマを使用している場合、親テーマのディレクトリのURI。

• 日本語Codex：関数リファレンス/get stylesheet directory uri
• 日本語Codex：関数リファレンス/get template directory uri

get_bloginfo() や bloginfo() じゃダメなの？

get_bloginfo() や bloginfo() でもパラメーターを渡すことで、同じURIを取得することができます。
しかしCodexの get_bloginfo のページを見る限り、一部のパラメーターについて「Consider using テンプレートタグ名 instead.」となっており、別のテンプレートタグを使って欲しいと書いてあります。

• 日本語Codex：テンプレートタグ/bloginfo
• 日本語Codex：テンプレートタグ/get bloginfo

例えば先に書いた <?php echo get_stylesheet_directory_uri(); ?> は <?php bloginfo('stylesheet_directory'); ?> でも同じ値が返ってきます。
実際の処理を見ると wp-includes/general-template.php の376行目で

function bloginfo( $show='' ) {
echo get_bloginfo( $show, 'display' ); // get_bloginfoの結果を echoしているだけ
}

となっており、同じファイルの405行目から始まる get_bloginfo() で

switch( $show ) {
（略）
case 'stylesheet_directory':
$output = get_stylesheet_directory_uri();
break;
（略）
}

と処理され、結局 get_stylesheet_directory_uri() を実行しています。

ブログ情報に関連する関数のチートシート

テーマのディレクトリ以外にもWordPressの情報（サイト名や概要など）はテンプレートファイルの様々な箇所で使われています。
全てを解説しませんが、テーマ作成で使いそうな関数をまとめましたので、参考にしてみてください。

• サイトのタイトル　name = Just another WordPress blog 
  bloginfo(‘name’);
• キャッチフレーズ　description = Just another WordPress blog
  bloginfo(‘description’);
• サイトアドレス (URL)　url = http://example
  echo home_url(‘/’);
• WordPress アドレス (URL)　wpurl = http://example/wp
  echo site_url(‘/’);
• 現在のテーマのディレクトリ（子テーマの場合は子テーマ）
  stylesheet_directory = http://example/wp/wp-content/themes/child-theme
  echo get_stylesheet_directory_uri();
• 現在のテーマのstyle.css（子テーマの場合は子テーマ）
  stylesheet_url  = http://example/wp/wp-content/themes/child-theme/style.css
  echo  get_stylesheet_uri();
• 現在のテーマのディレクトリ（子テーマの場合は親テーマ）
  template_directory = http://example/wp/wp-content/themes/parent-theme
  echo get_template_directory_uri();
• サイト全体のフィード（RSS2）のURI
  rss2_url  = http://example/feed
  bloginfo( ‘rss2_url’ );
• サイト全体のコメントフィード（RSS2）のURI
  comments_rss2_url = http://example/home/comments/feed
  bloginfo( ‘comments_rss2_url’ );

この他にもWordPressの情報を取得できますのでCodexを参考にしてください。
また @miya0001 さんがWordPressでURLを取得する関数をブログにまとめておられるのでそちらも参考になさってください。

• WordPressでURLを取得する関数あれこれをまとめた。 | firegoby

マークアップしてみよう

実際に header.php を編集して、サイト名が表示されている部分をロゴ画像に置き換え（マークアップ）してみましょう。
変更前の header.php 30行目

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

<?php bloginfo( 'name' ); ?> がサイト名の部分ですのでこれ書き換えます。

カスタマイズしているテーマフォルダ内に images というフォルダを作りその中にある logo.png を使います。
※分かりやすくするため改行を増やしています。

<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" width="xx" height="xx">
</a>
</h1>

使われているテンプレートタグを解説すると

• <a> タグの href 属性は home_url( '/' ) でサイトトップのURLを取得し、esc_url() でエスケープ処理して出力。
• <a> タグの title 属性は get_bloginfo( 'name', 'display' ) ) でサイト名を取得し、esc_attr() でエスケープ処理をして出力。
• <img> タグの src 属性は get_template_directory_uri() で使用しているテーマのディレクトリURIを取得し、その中にあるロゴまでのパスを指定。
  ※ get_template_directory_uri() で取得したURIは末尾にスラッシュ（ / ）が付かないので注意。
• <img> タグの alt 属性は <a> タグの title 属性に同じ。

です。

エスケープ処理

ここで新たに「エスケープ」処理という言葉と esc_url()、esc_attr() という関数が出てきました。

例えば「どうしても改行したいから入力欄に <br> を入力する」といったケースはままあると思います。
ただし、<br> を含めても保存できるということは、HTMLタグだけではなく、（入力した本人が意識しているかどうかは別で）悪意のあるコードを保存することも可能です。

WordPressのテンプレートタグを使う場合は内部で適切に処理してくれますが、入力された値（データベースに保存されている値）を取得し、echoなどで出力する場合は自分でエスケープ処理（無害化）をする必要があります。

• 日本語Codex：クロスサイトスクリプティング
• 日本語Codex：データ検証

出力時にエスケープ処理を行うための esc_html、esc_attr、esc_url といった関数がWordPressには備わっています。

これらのエスケープ処置については @jim0912 さんがブログで説明されていますので、そちらもご覧ください。

• WordPress を扱う上で憶えておいて欲しい3つのesc #wacja2012 | Simple Colors.

さて、最後にブラウザで確認してみましょう。
無事、ロゴ画像を表示できたでしょうか？

• 今回のデモデータ（v0.4）

今回は画像のパスやブログの情報を取得・出力したり、エスケープ処理を行ったりと、少しWordPressのテンプレートタグや関数に触れました。
いきなりPHPやテンプレートタグを覚えようとすると難しいかも知れませんが、テーマ作成に関わるところから少しずつ勉強していくと良いと思います。

電子書籍になりますが、WordPress3.5対応 テーマカスタマイズのためのPHP がおすすめです。

参照サイト

• 日本語Codex：関数リファレンス/get stylesheet directory uri
• 日本語Codex：関数リファレンス/get template directory uri
• 日本語フォーラム：相対パスでは画像は表示されないのでしょうか。
• 日本語Codex：テンプレートタグ/bloginfo
• 日本語Codex：テンプレートタグ/get bloginfo
• 本家Codex：Function Reference/home url
• 日本語Codex：クロスサイトスクリプティング
• 日本語Codex：データ検証