WordPressによるサイト運営[4-2] [WordPress]
「同じ表示となる部分を共通化する」
ページの表示や設定によって、変化する部分をテンプレートタグで置き換える。
３．header.phpのテンプレート化
①言語属性の設定
文字の表示方法と言語を表す
<html <?php language_attributes(); ?>>
②文字コードの設定
「表示設定」の「ページとフィールドの文字コード」の設定
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>">
③titleタグの設定
「現在のページ | サイトのタイトル | キャッチフレーズ | ページ送り数」のルールで表示する
<title><?php
wp_title( ' | ', true, 'right' );
bloginfo( 'name' );
echo ' | ';
bloginfo( 'description' );
global $page, $paged;
if ( $paged >= 2 || $page >= 2 ) {
echo ' | ' . max( $paged, $page ) . 'ページ';
}
?></title>
④iPhone/iPad向けアイコンの設定
iPhone/iPad向けのホーム画面用アイコンの設定
<link rel="apple-touch-icon" href="<?php echo get_default_image( 'apple-touch-icon.png' ); ?>" />
⑤wp_headの追加
RSSフィードのリンクやツールバーのCSSなどのタグをhead内に自動的に出力する。
<?php wp_head(); ?>
⑥body_classの追加
トップページやカテゴリーなどの表示状態をCSSのclassとして出力する。状況によってCSSで表示スタイルを変更可能にする。
<body <?php body_class(); ?>>
⑦サイトタイトル画像の表示
サイトタイトル画像が設定されている場合はその画像を表示し、設定されていなければサイトのタイトルをテキストで表示する。
<h1 id="site-id">
<a href="<?php echo home_url( '/' ); ?>">
<?php
if ( get_theme_mod( 'site_title_image' ) ) : ?>
<img src="<?php echo get_theme_mod( 'site_title_image' ); ?>" alt="<?php echo get_bloginfo( 'name' ); ?>" />
<?php else :
bloginfo( 'name' );
endif; ?>
</a>
</h1>
⑧キャッチフレーズの表示
サイトタイトルの下に表示する文章「設定」、「一般設定」のキャッチフレーズの内容を表示させる。
<h2 id="description"><?php bloginfo( 'description' ); ?></h2>
⑨ヘッダーメニューの表示
「外観」、「メニュー」で設定されたナビゲーションメニューを表示する。メニューの内容については別途後術する、カスタムメニューを使用して構成する。
<?php wp_nav_menu(
array(
'container' => 'nav',
'container_id' => 'utility-nav',
'theme_location' => 'header',
'fallback_cb' => null
)
); ?>
⑩検索フォームのウィジェット化
管理画面で設定したウィジェットを表示する。
<div class="widget-area" id="header-widget-area">
<?php dynamic_sidebar( 'header-widget-area' ); ?>
</div>
⑪メインナビゲーションの表示
メインナビゲーションもヘッダーナビゲーションと同様にwp_nav_menuタグを使用する。
<?php wp_nav_menu(
array(
'container' => 'nav',
'container_id' => 'global-nav',
'theme_location' => 'global'
)
); ?>
⑫ヘッダー画面の表示
カスタムヘッダー設定画面で指定したヘッダー画像のURLを出力する。
<?php if ( get_header_image() ) : ?>
<div id="branding">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</div>
<?php endif; ?>
⑬パンくずナビの表示
パンくずナビを表示するカスタムテンプレートタグ。
<?php if ( ! is_front_page() && ! is_404() ) {
bread_crumb( 'elm_class=bread-crumb&home_label=Home' );
} ?>
⑭表示
参考資料
