HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

【WordPress TwentyTwelve】header.phpの<body>以降を解読する

2013-03-24_2328TwentyTwelveの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」というのはメインメニューのことです。

管理画面左サイドバーで外観→メニュー→テーマの場所と進むと現れる、メインメニューのことです。

2013-04-02_1724

結局

<?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と出力されます。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: