今日は、header.phpの後半部の読書です。body 以下の内容なので style シートと密接に絡みます。オリジナルなテーマ作りに繋がるといいなと思ってます。
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo('description'); ?></h2>
</hgroup>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ($header_image) :
// Compatibility with versions of WordPress prior to 3.4.
if (function_exists('get_custom_header')) {
// We need to figure out what the minimum width should be for our featured image.
// This result would be the suggested width if the theme were to implement flexible widths.
$header_image_width = get_theme_support('custom-header', 'width');
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
}
?>
<a href="<?php echo esc_url(home_url('/')); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if (is_singular() && has_post_thumbnail($post->ID) &&
(/* $src, $width, $height */ $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array($header_image_width, $header_image_width))) &&
$image[1] >= $header_image_width) :
// Houston, we have a new header image!
echo get_the_post_thumbnail($post->ID, 'post-thumbnail');
else :
// Compatibility with versions of WordPress prior to 3.4.
if (function_exists('get_custom_header')) {
$header_image_width = get_custom_header()->width;
$header_image_height = get_custom_header()->height;
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
$header_image_height = HEADER_IMAGE_HEIGHT;
}
?>
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>
<?php
// Has the text been hidden?
if ('blank' == get_header_textcolor()) :
?>
<div class="only-search<?php if ($header_image) : ?> with-image<?php endif; ?>">
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e('Main menu', 'twentyeleven'); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e('Skip to primary content', 'twentyeleven'); ?>"><?php _e('Skip to primary content', 'twentyeleven'); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e('Skip to secondary content', 'twentyeleven'); ?>"><?php _e('Skip to secondary content', 'twentyeleven'); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav><!-- #access -->
</header><!-- #branding -->
<div id="main">
- body_class関数(wp-includes/post-template.php)
body タグのclassを表示ページによって動的に切り替えている。クラスの内容は get_body_class関数から取得しており、複数のクラス名が返却されることがあるが、body_class はそれらをスペース区切りで連結している。HOME を開いた時には、twenty eleven では以下のように展開されている。
<body class="home blog single-author two-column right-sidebar">
ここで指定されているクラスは、twenty eleven では、使われていないクラスもあった。故に、自分でスタイルをカスタマイズする際には、HOME,SINGLE,SEARCH などに応じて展開される組み合わせを認識して、必要なクラスの定義を css に定義することになる。(参照)
- <div id="page" class="hfeed">
"#page" は style.css に定義されているが、"hfeed"はどこにも定義されていない。インターネット上で調べてみると、テーマ twenty ten では利用されていた記載があるが、現在の twenty ten のスタイルシートには見つけることができない。もはや必要のないクラスなのか、カスタマイズを見据えたものなかわからない。
- header タグ
「header 要素は、通常は、セクションの見出し（h1–h6 要素や hgroup 要素）を入れることを想定しています。しかし、これは必須ではありません。header 要素は、セクションの目次や検索フォームや関連ロゴを囲むために使うこともできます。」このタグは、html5 で拡張されたようだ。(参照)
また、header タグ内で使われている role 属性も HTML5 から追加された属性。そのタグに記載される内容を表すキーワードを記載するらしい。(参照)
- hgroup タグ
「hgroup 要素は、セクションの見出しを表します。この要素は、小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、h1–h6 要素のセットをグループ化するために使います。」 これも HTML5 の拡張。なぜ必要なのか今ひとつわからなかったが、こちらに丁寧な説明があった。
- span タグ
「<SPAN>タグはそれ自身は特に意味を持っていませんが、 <SPAN>～</SPAN>で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。」とあるが、ここでは特にクラス指定などでスタイルを適用していないので、文書に構造的意味合いの付加・補強の意味合いが強いのであろう。
- get_header_image 関数(wp-includes/theme.php)
ヘッダイメージのURL取得関数。管理画面よりランダム設定がされていれば、ランダムなURLが返却される。(参照)
- function_exists 関数(PHP)
これはPHPの関数なんですね(参考)
- get_theme_support 関数(wp-includes/theme.php)
custom_header が定義されていれば、その定義配列から width 値を取り出している。wordpress 3.1 以降の実装らしく日本語版のcodexは見当たらなかった。(参照)
- HEADER_IMAGE_WIDTH,HEADER_IMAGE_HEIGHT(wp-content/themes/twentyeleven/functions.php)
twentyeleven_setup 関数内で $custom_header_support 配列にカスタムヘッダーの各種デフォルト値を設定している。管理画面よりカスタムヘッダーが設定されていない場合は、この配列に設定された値がそれぞれ、HEADER_IMAGE_WIDTH,HEADER_IMAGE_HEIGHT に設定される。
- has_post_thumbnail 関数(wp-includes/post-thumbnail-template.php)
ポスト記事にサムネール画像があるかどうか判定する関数。ここでは、サムネール画像がある場合、サムネールを表示し、なければ、オリジナル画像を表示する判定に使用している。(参照)
- wp_get_attachment_image_src 関数(wp-includes/media.php)
添付ファイルの表示用データを取得する。返却値にはイメージファイルのURL、幅、高さの順に格納されている。第2パラメータの画像サイズには、thumbnail, medium, large or full の文字列指定ができるが、ここでは、先に取得した画像表示エリアのサイズを渡している。ここで返却される画像サイズが、先に取得した画像表示エリアよりも大きければ、thumbnail サイズに変更するためである。(参考)
- get_the_post_thumbnail 関数(wp-includes/post-thumbnail-template.php)
投稿記事/ページ編集画面で設定した投稿サムネイルを取得する。ここは、対象サムネール画像が先に取得した表示エリアよりも大きい場合に、サムネールサイズに変更している。返却値はhtmlのソースコードである。(参照)
- header_image 関数(wp-includes/theme.php)
get_header_image 関数を呼び出しているのみ。get_header_image関数は、カスタムヘッダーのデフォルトイメージの url または、ランダムヘッダーのurlを出力する。(参照)
- get_header_textcolor 関数(wp-includes/theme.php)
get_theme_mod 関数を呼び出しているのみ。get_theme_mod関数は、カスタムヘッダーのデフォルトテキストカラー名を出力する。(参照)
- get_search_form 関数(wp-includes/general-template.php)
サイト内検索のテンプレートを読み込んで出力する。テンプレートはsearchform.phpで、存在しない場合はデフォルトのサイト検索コードが出力される。(参照)
- nav タグ
ナビゲーションであることを示し、ウェブサイト内の他のページへのリンクや、ページ内リンクなど記載する。文書に構造的意味合いの付加・補強を目的とするHTML5で導入されたタグ。(参照)
- wp_nav_menu 関数(wp-includes/nav-menu-template.php)
これは、ここを参考にもう少し調べよう。
0 件のコメント:
コメントを投稿