【初心者向け】Wordpressテーマを自作する［header.php］

:::note info
ファイルの構造や解説等、Wordpress（以下、WP）のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。
+ [【初心者向け】Wordpressテーマを自作する際に分かってると良いかもしれない事](
https://qiita.com/makkie/items/dc764c2845492079c0af)
+ `index.php`のコードを知りたいよって方はこちら
[【初心者向け】Wordpressテーマを自作する[index.php]](https://qiita.com/makkie/items/b5231a9f63b076c70af8)
+ `footer.php`のコードを知りたいよって方はこちら
[【初心者向け】Wordpressテーマを自作する［footer.php］](https://qiita.com/makkie/items/65cd4be0e9c4ccbf7776)
:::

ここでは、WPのテーマを作る上で必須の`header.php`のコードを交えた解説を行います。
とりあえず解説はいいからコードだけ、の方は以下をどうぞ。

## コード（HTMLとPHP）
ファイルの先頭には、テーマカスタマイザーからもわかるように`Template Name: Header`を入れています。
```diff_php
<?php
//====================================================
//  Template Name: Header
//====================================================
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <?php
    //StylesheetやWebfontはfunctions
    wp_head(); ?>
</head>
<body>
    <header>
        <?php mycustom_logo(); ?>
    </header>
    <?php
    if( !is_home() || !is_front_page()) {
    ?>
    <nav id="nav-head">
    <?php
    //囲みdiv、ul等全て削除
    $menuParametersh = array(
        'container' => false,
        'echo' => false,
        'theme_location' => 'nav-head', //オプション：表示したいメニューの名称
        'items_wrap' => '%3$s',
        'depth' => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParametersh ), '<a>');
    ?>
    </nav>
    <?php
    }
    ?>
```
## 解説
### header.phpとは
WPのテーマを自作する際の**必須ファイル**です。
Webサイトの「ヘッダー」と呼ばれる上段部分のコンテンツを表示するファイルです。
詳しい説明はCodexをご覧ください。ただし、翻訳の関係なのかわかりにくい表現の日本語があります。
また日本語版は、最新の情報が掲載されていない事が多々ありますので、英語版も合わせてみると良いです。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

テーマフォルダの中に`index.php` `header.php` `footer.php` `sidebar.php` があればとりあえずのテーマができます。

### Webサイトを表示するうえで必須なコード
`DOCTYPE`や`head` `body`等、`HTML`サイトでも必ず書くタグをWPでも書きます。
ただ違うのは、`<?php ?>`で囲んである箇所がWPの`独自関数`と呼ばれるもので、これを入れておくと、管理画面からもヘッダ情報が修正できるので、ぜひ利用してください。
直接記載することも可能です。
```diff_html
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <?php
    wp_head(); ?>
</head>
<body>
```
ここで注意するのは、`header.php`はWebサイトの上段部分のコンテンツを表示するファイルなので、`body`と`html`は閉じないでください。タグを閉じるのは`footer.php`で行います。

`title`は`設定 > 一般`にある`サイト名`を`bloginfo('name')`で右側に表示する様にし、TOP以外のページでは`wp_title`でそのページのタイトルを表示する様にしています。
`wp_title('|', true, 'right');`は`ページのタイトル｜サイト名`と表示されるように、ページタイトルの右側にバーティカルバーを入れています。

`meta name="viewport"`は、レスポンシブ対応サイトでは必須です。
これがないといくらメディアクエリ―を書いても反映されません。

最近、キーワードを入力していても検索の表示順などに影響しないことを知ったので、`meta name="keywords"`入れません。
`meta name="description"`とコンテンツの情報から、検索にヒットするようですので、WPの管理画面、`設定 > 一般`にある`サイトの説明`はキチンと入力しましょう。

### bodyタグの中
#### カスタムロゴ
このコードは、上段にロゴマークとカスタムナビゲーションが表示されるようにしています。
```diff_php
    <header>
        <?php mycustom_logo(); ?>
    </header>
```
`mycustom_logo();`は独自関数を`functions.php`に書いて利用しています。
ロゴ画像は、カスタマイザーで登録しますが、登録されていない時にデフォルトだと何も表示されないので、サイト名がテキスト表示されるようにしています。
```functions.php
//++++++++++++++++++++++++++++++++++++++++++
//カスタムロゴ
//外観-カスタマイズで画像指定
//画像がない時はサイトタイトル表示
//++++++++++++++++++++++++++++++++++++++++++
add_theme_support('custom-logo');
function mycustom_logo(){
  if( has_custom_logo() ){
   $custom_logo_id = get_theme_mod( 'custom_logo' );
   $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
     $mylogo = $image[0];
   $mylogo = '<img src="'. $mylogo .'" class="custom-logo" alt="'. get_bloginfo( 'name' ) .'" />';
  } else {
    $mylogo = get_bloginfo( 'name' );
  }
  if( is_front_page() && is_home()){
   echo '<h1 class="site-logo">'. $mylogo .'</h1>';
  } else {
   echo '<span class="site-logo"><a href="'. home_url() .'" rel="home">'. $mylogo .'</a></span>';
  }
}
```
#### カスタムナビゲーション
下記コードは、` if( !is_home() || !is_front_page()) {`としているので、TOPページでカスタムナビゲーションは表示されません。すべてのページで表示する場合は、1～3行目の`    <?php if( !is_home() || !is_front_page()) { ?>`と17～19行目の`<?php } ?>`を削除してください。
```diff_php
    <?php
    if( !is_home() || !is_front_page()) {
    ?>
    <nav id="nav-head">
    <?php
    //囲みdiv、ul等全て削除
    $menuParametersh = array(
        'container' => false,
        'echo' => false,
        'theme_location' => 'nav-head', //オプション：表示したいメニューの名称
        'items_wrap' => '%3$s',
        'depth' => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParametersh ), '<a>');
    ?>
    </nav>
    <?php
    }
    ?>
```
カスタムナビゲーションは標準だと`wp_nav_menu();`で表示しますが、それだと`ul` `li`で囲まれてしまうので、`strip_tags`で付与されないようにしています。
```diff_php
    $menuParametersh = array(
        'container' => false,
        'echo' => false,
        'theme_location' => 'nav-head', //オプション：表示したいメニューの名称
        'items_wrap' => '%3$s',
        'depth' => 0,
    );
    echo strip_tags(wp_nav_menu( $menuParametersh ), '<a>');
```
`ul` `li`が欲しい方は、上記コードを削除し`wp_nav_menu();`でカスタムナビゲーションを表示してください。

カスタムナビゲーションに自動で`id`や`class`が付与され、デザインを適用するのも煩雑になってしまうため、下記コードで`id`や`class`を削除しています。
CSSを適用する時は、`wp_nav_menu();`を`nav`で囲んでCSSを適用してください。
```functions.php
//カスタムメニューで自動挿入されるタグ（id + class）を削除
function my_nav_menu_id($menu_id){
	$id = NULL;
    return $id;
}
add_filter('nav_menu_item_id', 'my_nav_menu_id');

function remove_menu_aria_current( $atts, $item, $args ){
	unset ( $atts['aria-current'] );
	return $atts;
}
add_filter('nav_menu_link_attributes', 'remove_menu_aria_current', 11, 5);
```
#### カスタムナビゲーションがそもそも表示されない
カスタムナビゲーションがそもそも表示されないよって方はこちらのコードを`functions.php`に追加してください。
```functions.php
//++++++++++++++++++++++++++++++++++++++++++
//ナビゲーション
//++++++++++++++++++++++++++++++++++++++++++
function register_my_menus() {
  register_nav_menus( array(
    'nav-head' => 'ヘッダーナビ',
    'nav-foot' => 'フッターナビ'
  ));
}
add_action( 'after_setup_theme', 'register_my_menus' );
```

## まとめ
WPの良い所は、「ユーザーが更新できる」事だと思うので、出来るだけWPの基本機能で管理画面から修正できるようになっているのがベストと考えています（お仕事は減っちゃいますが）ので、WPの独自関数を用いている個所が多いです。
HTMLのサイトと同じ様に直接書き込むこともできますので、仕様によって使い分けても良いかもですね。

カスタムナビゲーションの部分は、少しごたごたしていますが、覚えてしまえば大丈夫かと思います。
特に`functions.php`に書いた自動で`id`や`class`が付与されないようにするコードは、CSSを書く上でだいぶ楽になるので、覚えていて損はないかと思います。

10年以上WPでWEBサイト制作をしていますが、独学のため、色々間違えている個所などありましたらご指摘いただけますと幸いです。