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を登録できるようになります。
is_customize_preview()
カスタマイズプレビューとは、管理画面から外観->カスタマイズで遷移するページで、WordPressのデザインを直感的に、またインタラクティブにいろいろといじることができます。
/* WPCS: xss ok. */
WPCSとは、WordPress Coding Standard の略です。PHP_CodeSnifferというソフトを使うことで、WordPressテーマがちゃんとコード規約に沿って書かれているかどうかを確認できるようです。 xssはクロスサイトスクリプティングのことです。CodeSnifferでコードの確認を行ったときに、echoをエスケープなしで使っている部分を、エラーとして扱わないようにしているのだと思います。
ちなみに、この書き方は、WPCS2.0.0以後は好ましくなく、 // phpcs:ignore という構文に置き換えられていく予定だそうです。
CodeSnifferもそのうち試してみたいと思います。
wp_nav_menu ()
ナビゲーションメニューを表示する関数です。’theme_location’は、function.phpでregister_nav_menu() に設定するlocationと対応します。 ‘menu_id’ は、初期状態で {menu-slug}-menu となっているメニューの<ul>要素のIDを、独自に指定するために使います。