header.phpを見る [ゼロから作るWP3テーマ vol.3]

header.phpの中身を見てみます。

ドキュメントスイッチの周辺

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

冒頭はHTML5的な書き方ですね。いまのところはこの程度に収めておくのがよさそうです。モダンブラウザはもちろん、IE8でも不具合はないようなので。

ここにでてきたlanguage_attributes()は知らなかったのでメモ。html要素にlang属性を出力する関数です。引数にhtmlかxhtmlを指定するとlang=”ja”またはxml:lang=”ja”を追加してくれます。でも、わざわざ関数を使うまでもなく直接書いちゃったほうが楽ですね。

ページタイトル表示

	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

title要素では分岐をつかってページタイトルやブログの説明、あとページ番号を表示してます。

ここで出てくるグローバル変数$pageは投稿を分割したときのページ数で、$pagedはアーカイブページやメインページが複数ページに分かれているときのページ数が格納してあるようです。なので、どちらの場合もページが分割してあるなら「ページ2」のような表示になります。

コメントを階層表示にするスクリプトの読み込み

if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );

投稿ページかオプションで階層表示するように設定してあるかどうかでコメント階層用のJavascriptを読み込みます。

ヘッダー画像の表示

TwentyTenではヘッダーに画像がはいるデザインになってて管理画面から変更できるようになっています。これはWP3の新機能カスタムヘッダーですね。

で、この部分、投稿にアイキャッチ画像があって且つそれがこのヘッダー画像より大きいときは差し替えられるという動作になってるみたいです。

それが次のコード。

<?php
  if ( is_singular() &&has_post_thumbnail( $post->ID )
  &&  ($image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) )
  &&	 $image[1] >= HEADER_IMAGE_WIDTH ) :
  echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
  else : ?>
  <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

うーん、これだけだと本当にそうなのかわからないので実際にテストしてみました。沖縄にいったときの写真を横1000px、縦200pxくらいにトリミング→アイキャッチ画像として保存してみました。

お~、ヘッダー画像が変わってる。これは面白い仕組みです。何かわかりませんが何かに使えそうな気がします。

ナビゲーション

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

うっ、またまた新しいテンプレートタグの登場です。wp_nav_menu()は新機能のナビゲーションメニューを表示するためのタグだそうです。

これがまたすごくて、管理画面から自由にメニューを追加したり並べ替えたりできるようになったみたいです。

これまでだと、カテゴリーへのリンクを並べるのにもテンプレートタグをゴリゴリいじって何ともスマートじゃありませんでした。

それがこれを使うととっても簡単なのです。使わない手はありません。(でもまだ使ったことはありません・・・。)

wp_nav_menu()の説明をしたいところですが、パラメータが多いのでドキュメントを参照してください。

テンプレートタグ/wp nav menu – WordPress Codex 日本語版

ポイントはいくつでもメニューが作れるってところでしょうか。TwentryTenでもデフォルトはひとつしか登録できないので2つ以上のメニューの追加方法を簡単に説明しておきます。

まずregister_nav_menus()をfunction.php内に書きます。デフォルトの部分を次のように変更してみます。

register_nav_menus( array(
  'primary' => __( 'Primary Navigation', 'twentyten' ),
  'secondary' => 'フッターナビゲーション',//ココを追加
) );

すると管理画面がこうなります。

同じようにどんどん増やしていくことができます。といっても3つも4つもつくることはあまりないとは思いますが・・・。

使い方は

register_nav_menus( array(
  '識別名' => 'ラベル',
) );

こんな感じですね。ラベルは管理画面に表示される名前です。翻訳とかは必要ないのでいつも日本語です(^^)

それで識別名ですが、これはwp_nav_menu()のtheme_locationパラメータに使う値です。たとえば、ここでは「フッターナビゲーション」に登録したメニューをページのフッターに表示したいときはフッター内に

wp_nav_menu('theme_location'=>'secondary' )

を挿入してあげるだけです。

これでheader.phpの中身解説は終わりです。WP3的なテンプレート作成まではまだまだ先は長いな~。

そうのひとりごと

© 2017 PAOLOG