サイトアイコン Gatespace's Blog

スターターテーマ _s を使ってWordPressのテーマをつくる（ファイルパスとブログ情報編）

gatespace
この記事をシェアする

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

[show_underscores]

この記事の対象

目次

  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_bloginfo() や bloginfo() じゃダメなの？

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

例えば先に書いた <?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の情報（サイト名や概要など）はテンプレートファイルの様々な箇所で使われています。
全てを解説しませんが、テーマ作成で使いそうな関数をまとめましたので、参考にしてみてください。

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

マークアップしてみよう

実際に 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>

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

です。

エスケープ処理

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

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

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

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

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

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

 

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

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

参照サイト

この記事をシェアする