[_s] header.php

header.php

header.phpは、htmlファイルの先頭部分から <div id=”content” class=”site-content”> までのテンプレートパートファイル(共通部分のモジュールのようなもの)です。大体は一般的に理解されるheader部分ですが、厳密にheaderだけというものではなく、文書宣言部分やコンテンツの開始地点までを含みます。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package _s
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>

	<header id="masthead" class="site-header">
		<div class="site-branding">
			<?php
			the_custom_logo();
			if ( is_front_page() && is_home() ) :
				?>
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<?php
			else :
				?>
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
				<?php
			endif;
			$_s_description = get_bloginfo( 'description', 'display' );
			if ( $_s_description || is_customize_preview() ) :
				?>
				<p class="site-description"><?php echo $_s_description; /* WPCS: xss ok. */ ?></p>
			<?php endif; ?>
		</div><!-- .site-branding -->

		<nav id="site-navigation" class="main-navigation">
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
			<?php
			wp_nav_menu( array(
				'theme_location' => 'menu-1',
				'menu_id'        => 'primary-menu',
			) );
			?>
		</nav><!-- #site-navigation -->
	</header><!-- #masthead -->

	<div id="content" class="site-content">

wp_head()

htmlのヘッダー部分に、javascript、jquery、css、その他よくわからない色々なもの、を自動的に追加してくれる関数です。

wp_head()は、wp-includes/general-template.php に記述されています。

2655	/**
2656	 * Fire the wp_head action.
2657	 *
2658	 * See {@see 'wp_head'}.
2659	 *
2660	 * @since 1.2.0
2661	 */
2662	function wp_head() {
2663	        /**
2664	         * Prints scripts or data in the head tag on the front end.
2665	         *
2666	         * @since 1.5.0
2667	         */
2668	        do_action( 'wp_head' );
2669	}

wp_head に追加されるアクションは /wp-includes/default-filters.php に記述されています。

// Actions
add_action( 'wp_head', '_wp_render_title_tag', 1 );
add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_head', 'wp_resource_hints', 2 );
add_action( 'wp_head', 'feed_links', 2 );
add_action( 'wp_head', 'feed_links_extra', 3 );
add_action( 'wp_head', 'rsd_link' );
add_action( 'wp_head', 'wlwmanifest_link' );
add_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head', 'locale_stylesheet' );
add_action( 'wp_head', 'noindex', 1 );
add_action( 'wp_head', 'print_emoji_detection_script', 7 );
add_action( 'wp_head', 'wp_print_styles', 8 );
add_action( 'wp_head', 'wp_print_head_scripts', 9 );
add_action( 'wp_head', 'wp_generator' );
add_action( 'wp_head', 'rel_canonical' );
add_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
add_action( 'wp_head', 'wp_custom_css_cb', 101 );
add_action( 'wp_head', 'wp_site_icon', 99 );

do_action()、add_action()については、 function.phpの時に深堀しようと思いますが、ヘッダー部分でタグを追加したい時はadd_action()、削除したい時はremove_action()をfunction.php に記述することで実現できます。

<a class=”skip-link screen-reader-text” href=”#content”><?php esc_html_e( ‘Skip to content’, ‘_s’ ); ?></a>

screen-readerとは、視覚障害者のための文字読み上げソフトウェアのことです。このclassはWordPressのテーマファイルでよく目にします。目が見える人には見えませんが、screen-readerは認識して読み上げてくれる部分になります。

WORDPRESS.ORG MAKE WORLD ACCESIBLE #screen reader

ちなみに、_sをベースに、グリッドレイアウトでテーマを作成する場合、この部分は、htmlの構造上、headerタグから独立した一つの要素となるので、注意が必要です。

body_class()

これは、表示するページごとにbodyタグに様々なクラスが追加する関数で、投稿記事ごとにクラスを追加するpost_class()と同じような仕事をしていると思います。WordPressでは、基本的にbodyタグにはこの関数を書いておいて、追加されるクラスを後で利用するルールになっている、と理解するのが良いと思います。

the_custom_logo()

カスタムロゴを使います。管理画面から画像ファイルのlogoを登録できるようになります。

WordPress.org Custom Logo

is_customize_preview()

カスタマイズプレビューとは、管理画面から外観->カスタマイズで遷移するページで、WordPressのデザインを直感的に、またインタラクティブにいろいろといじることができます。

/* WPCS: xss ok. */

WPCSとは、WordPress Coding Standard の略です。PHP_CodeSnifferというソフトを使うことで、WordPressテーマがちゃんとコード規約に沿って書かれているかどうかを確認できるようです。 xssはクロスサイトスクリプティングのことです。CodeSnifferでコードの確認を行ったときに、echoをエスケープなしで使っている部分を、エラーとして扱わないようにしているのだと思います。

ちなみに、この書き方は、WPCS2.0.0以後は好ましくなく、 // phpcs:ignore という構文に置き換えられていく予定だそうです。

https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/wiki/Whitelisting-code-which-flags-errors

CodeSnifferもそのうち試してみたいと思います。

wp_nav_menu ()

ナビゲーションメニューを表示する関数です。’theme_location’は、function.phpでregister_nav_menu() に設定するlocationと対応します。 ‘menu_id’ は、初期状態で {menu-slug}-menu となっているメニューの<ul>要素のIDを、独自に指定するために使います。