TwentyTwelveのheader.phpの<body>以降は、各ページのナビゲーションバーより上の部分の表示を担当しています。header.phpのどの部分がどんな働きをしているかについて簡単に説明します。
はじめに
解読のためには、以下のエントリの内容について、さらっと理解する必要があります。
[img-link url=”https://webshufu.com/wordpress-twentytwelve-header-php-4/” title=”【WordPress】body_class()の吐き出すクラス名（トップページ、カテゴリぺージ、個別投稿ページ)”]
では、本題へ。
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<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>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
<?php echo esc_url( home_url( ‘/’ ) ); ?>
TOPページのURLを出力します。
<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) )
esc_attr関数は< > & ” ‘ (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート) をエンコードしてくれます。
したがって、この部分全体として、適切にエンコードされた文字列でブログ名を適切に出力します。
<?php bloginfo( ‘name’ ); ?>
これもブログ名を出力。
<?php bloginfo( ‘description’ ); ?>
ブログのキャッチフレーズを出力。
<?php _e( ‘Menu’, ‘twentytwelve’ ); ?>
この部分は「Menu」を和訳した「メニュー」を表示します。
_e関数は、ワードプレス本体やテーマの国際化ファイルに登録されている英語のフレーズを翻訳して出力してくれます。
「Menu」の代わりに別の英語のフレーズを入れても、翻訳されるとは限りません。
<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>
esc_attr_e関数は、esc_attr関数と_e関数の両方をあわせた働きをします。
つまり、国際化ファイルに登録されている英語のフレーズを翻訳し、< > & ” ‘ (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート) をエンコードして出力してくれます。
この部分全体では、「Skip to content」を和訳した「コンテンツへ移動」が出力されます。
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>?
ここで表示するメニューのIDは「primary」で、メニューを囲むボックスに当てるクラス名は「nav-menu」ですよ、という意味です。
でもメニューのIDが「primary」と言われてもよくわかりません。
function.phpのregister_nav_menu
function.phpで以下のようなくだりがあります。
register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
__( ‘Primary Menu’, ‘twentytwelve’ )という説明が付いた、IDが「primary」というメニューを登録する、と言うような意味合いです。
関数の機能によって、( ‘Primary Menu’, ‘twentytwelve’ )は「メインメニュー」に置き換わります。
つまり、「メインメニュー」という説明が付いた、IDが「primary」というメニューを登録する、という意味になります。
メインメニューとは何か
と言うわけで、IDが「primary」というのはメインメニューのことです。
管理画面左サイドバーで外観→メニュー→テーマの場所と進むと現れる、メインメニューのことです。
結局
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>?というのは、「管理画面のメインメニューのセッティングがここに反映されて、メニューを囲むボックスに当てるクラス名は「nav-menu」になる。」ことを表しているのです。
get_header_image()
管理画面左サイドバーで外観→ヘッダーで指定した、ヘッダー画像のURLを渡します。
<?php echo get_custom_header()->width; ?>
960と出力されます。
<?php echo get_custom_header()->height; ?>
250と出力されます。