【_s(underscores)】header.phpの内容を理解する

2021年2月6日

本日は私が行ったwordpressスターターテーマ_s(underscores)のヘッダー部分を改修していこうと思います。

wordpressではサイトのヘッダー、サイドバー、コンテンツ、フッターというエリアはそれぞれ部品のようにファイル分けされており

ヘッダーを編集したいときはheader.phpを編集する

サイドバーはsidebar.php

コンテンツはcontent.php

フッターはfooter.php

という様にトップページをもし編集する際にはこの様に編集を進めていきます。

非効率なのでは？？

と思うかもしれませんがそんなことはありません。

それぞれのパーツファイルは各ページで反映されます。

例えば、、、、
header.phpを編集すれば基本的には全てのページのヘッダーが変更されます。

本日はheader.phpを編集するに当たってどの様なコードが書かれているのかを解読していきたいと思います。

header.phpに書かれていること

では早速header.phpにどの様なコードが書かれてあるのかを見ていきたいと思います。

以下が_s(underscores)をダウンロードした時のファイル内コードです。



<!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(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'nino-challeng' ); ?></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;
            $nino_challeng_description = get_bloginfo( 'description', 'display' );
            if ( $nino_challeng_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $nino_challeng_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></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', 'nino-challeng' ); ?></button>
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

上記のコードをご覧ください。

この解説では主にPHPを中心に説明していけたらと思います。

!DOCTYPE html ~ body開始タグまでのコード解説



<html <?php language_attributes(); ?>>

language_attributes();

この関数はサイトの言語情報を提示するものです。

本来はhtmlタグではlang=”ja”などと書かれ使用言語を提示しますが、
ここでは「language_attributes();」と書かれています。

実際にサイトの検証を使い確認するとこの様にきちんと言語の宣言ができています。

もし検証で

この様な記述がなされていた場合は
ダッシュボード⇨settings⇨site language
の操作でサイトの言語を「日本語」にセットし下にスクロールし「Save Changes」で保存すると日本語サイトの宣言になります。



<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>

haedタグはサイトのメタデータコンテンツ（文書情報や別文書との関係などを定義するコンテンツ）が書かれています。

では次々と見ていきましょう。

０２行目　bloginfo(‘charset’);　※実際の行数とは相違があります。

bloginfo();はサイトの情報を表示させる関数です。

カッコの中（引数）に文字を指定する事で出力する内容を変える事ができます。
（’charset’）の場合は,
UTF-8というものが出力される設定になっています。

HTMLではhead内にエンコーディング（データを一定の規則に従って、目的に応じた情報に変換すること）を指定します。
そのエンコーディングを行うコードという事です。

０６行目　wp_head();　※実際のコードとは相違があります。

これはwordpress特有の記述です。
意味としてはWordPressサイドで用意してくれるhtmlをhead内に出力してくれる関数です。

「サイトを表示」　⇨　「右クリック」　⇨　「ソース」
の操作でその内容が分かります。

するとhead内に記述してないのに大量のコードが書かれているかと思います。
これこそがwp_head();が出力したものです。

このwp_head();記述はWordpessテーマ作成において確実に行いましょう。

行わなかった場合

プラグインが動作しない
wordpressが用意しているCSSが機能しなかったり
JavaScriptが読み込まれなかったり

と大きな問題となります。

body部分のコード解説



<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'nino-challeng' ); ?></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;
            $nino_challeng_description = get_bloginfo( 'description', 'display' );
            if ( $nino_challeng_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $nino_challeng_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></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', 'nino-challeng' ); ?></button>
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

１行目　body_class();
wordpress側でclass=”ここの部分”を自動で設定してくれる関数です。

この関数は投稿ページや固定ページ、アーカイブページなどそれぞれのページに対応するクラス名が割り当てられるので、スタイルシートを使って各ページ毎に異なるデザインを適用したい場合など活用します。

２行目　wp_body_open();
body要素の直後に何か（JavaScriptなど）を挿入する際に使用する関数です。

３、４行目ではページトップにスキップするリンクが貼られています。
esc_html_e( ‘$text’, ‘ドメイン名’ );
この関数は文字のエスケープするための関数です。

６行目〜３６行目までheaderタグで囲まれています。
headerを分けると

divタグ
navタグ

に分けられます。

divにはサイトのタイトルを、

navタグにはヘッダー下のナビメニューが配置できる仕様になっています。

まずはdivタグ内を見てみましょう。

９行目　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;

ここはif文です。

if(条件):
　条件が正しかった時の動作
else:
　条件に当てはまらない時の動作
endif;

今回の条件は
if ( is_front_page() && is_home() ) :
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>

h1(見出し)でリンク付きのサイトのタイトルを出力します。

echo esc_url( home_url( ‘/’ ) );
home_url()とはサイトのトップページURLを返します。
カッコ内にスラッシュを入れることでトップページにアクセスできるURLになります。
それをechoで出力しています。

bloginfo( ‘name’ );
bloginfo();はサイトの情報を表示させる関数です。
（’カッコの中に’）nameを入力することでサイトタイトルを出力します。

「管理画面」　⇨　「設定」　⇨　「一般」　⇨　「サイトのタイトル」
の操作で変更が可能です。

条件が当てはまらなかった時の動作（投稿ページやアーカイブページなどの場合）



<p class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
        <?php bloginfo( 'name' ); ?>
    </a>
</p>

p(テキスト)でリンク付きのサイトのタイトルを出力します。
pタグ以外は条件に当てはまった時と同じです。

１９行目から２３行目



$nino_challeng_description = get_bloginfo( 'description', 'display' );
    if ( $nino_challeng_description || is_customize_preview() ) 
    :?>
        <p class="site-description"><?php echo $nino_challeng_description; ?></p>
    <?php endif; ?>

get_bloginfo( ‘description’, ‘display’ );
サイトに関する情報を返す関数です。
カッコの中（’第一引数’,’第二引数’）
第一引数のdescriptionでサイトのキャッチフレーズを取得します。
第二引数のdisplayでこの第一引数で取得したものをwordpress側ファイルに通して返します。
「設定」　→　「一般」　→　「キャッチフレーズ」で変更が可能です。

上記を＄変数に代入し続いてif文が始まっています。

if ( $nino_challeng_description || is_customize_preview() )
もしキャッチフレーズが設定かテーマカスタマイザーのプレビューの設定
がされていたら

<p class=”site-description”><?php echo $nino_challeng_description; ?></p>
pタグ（テキスト）でget_bloginfo( ‘description’)の情報を出力します。

２３行目　endif;
これはif文を使った際に必ずセットする「if文はここで終わり」という宣言です。

２７行目　esc_html_e( ‘Primary Menu’, ‘nino-challeng’ );
この関数は文字のエスケープするための関数です。
ここではボタンの中にエスケープされたものが入っています。

２８行目〜３５行目



<?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>

ここwp_nav_menu();
このタグは、ナビゲーションメニューを表示します。
メニューは「管理画面」　→　「外観」　→　「メニュー」で作成できます。

３６行目でnavが閉じ
３７行目でheaderが閉じます。