作成日：2020-11-16 更新日：2021-09-10

WordPressTip’sテーマ自作-header.phpの書き方

こんにちはKotaです。

ずいぶんと期間があいてしまいましたが、今回もWordPressテーマ自作をしたい40代初心者に役立つ情報をお届けしていきます。

今回のテーマはコチラ↓
「header.phpの書き方」について

また本ブログでは、WordPressのテーマを自分で作れるよう、一通りの解説をしていく予定です。40代でも出来ます！一緒にやっていきましょう。
また、本ブログでは「サックリ」伝えて「ゆっくり」説明していきますので、お急ぎの方はサックリだけでも見ていって下さいね。

このページは私「Kota」が作成しております。
40歳過ぎで前職を退職し、Web関連を独学し、フリーランスとして活動をしております。同じような事を考えている方もいるのでは？と思い、その方達に役立つ事を意識してつくっています。このページは私の作ったオリジナルテーマです。私でも作れたので、きっとあなたも出来るはず。仕事でも趣味でもいいので作ってみましょう！

【目次】

対象者
事前に最低限必要なスキル

header.phpの書き方（本文）サックリ
header.phpの書き方（補足）ゆっくり
- テンプレートタグの説明
- function.phpでメニューを有効にする
余談
まとめ

【対象者】

40代初心者
WordPressのテーマを自作したい人(オリジナルテーマを作りたい人)
WordPressのテンプレートファイル(ページテンプレート)について知りたい人
HTML,CSSで簡単なWebページを制作する知識をのある人
とにかくWordPressやそのテーマ作りに興味がある人

【事前に最低限必要なスキル】

HTML,CSS,Bootstrap,PHP(基礎的な事がわかればok)
WordPressの使い方がそれなりにわかる

【1.header.phpの書き方（本文）サックリ】

さてそれではWordPressテーマ自作に必要な「header.php」の書き方について説明していきます。【1】ではサックリお伝えしていきます。詳細が必要な方は【2】をゆっくり御覧ください。

【header.phpとは？】

「header.php」とは何でしょうか？
WordPressのテーマを構成する、テンプレートファイルと呼ばれているファイルの一つです。
例えばindex.htmlというあるホームページがあったとして、そのコードの先頭～headerタグまで、それをWordPressテーマでは「header.php」という名前で保存し使用します。（※どこまで含めるか厳密な決まりはありません）私の場合、表示させたいHTMLデータをそのまま貼り付け、必要な部分はPHP言語を使用して置き換える手順で作成します。
実は、やらねばならぬ事がもう一つあるのです。それは「function.php」の作成。このページの内容ではナビメニューを表示させるのに必要となります。

【headerのHTML作成】

では今回使用する。HTMLコードを用意しましょう。
シンプルな構成にしておきます。(実際はもっと必要なコードが沢山ありますが)

<!--THML5を宣言-->
<!DOCTYPE html>

<!--HTMLタグ-->
<html lang="ja" >

<!--HEADタグ-->
<head>
  
  <!--METAタグ-->
  <!--文字コード設定-->
  <meta charset="utf-8">
  <!--レスポンシブ設定-->
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

  <!--TITLEタグ-->
  <title>WordPressサンプルページ</title>

  <!--LINKタグ-->
  <!--スタイルシート-->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!--favicon-->
  <link rel="shortcut icon" href="https://sample.com/images/logo/favicon.ico">

</head>

<!--BODYタグ-->
<body>

  <!--HEADERタグ-->
  <header>

    <!--H1タグ サイト名-->
    <h1><a href="https://sample.com/">WordPressサンプルページ</a></h1>

    <!--ナビメニュー-->
    <nav>
      <ul>
        <li><a href="">メニュー1</a></li>
        <li><a href="">メニュー2</a></li>
        <li><a href="">メニュー3</a></li>
      </ul>
    </nav>

  </header>

【HTMLをheader.phpへ書き換える】

それでは上記で用意したHTMLコードを書き換えheader.phpを作っていきます。

<!--THML5を宣言-->
<!DOCTYPE html>

<!--HTMLタグ-->
<html <?php language_attributes(); ?> >

<!--HEADタグ-->
<head>
  
  <!--METAタグ-->
  <!--文字コード設定-->
  <meta charset="utf-8">
  <!--レスポンシブ設定-->
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

  <!--TITLEタグ-->
  <title><?php bloginfo('name'); ?></title>

  <!--LINKタグ-->
  <!--スタイルシート-->
  <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
  <!--favicon-->
  <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo/favicon.ico">

</head>

<!--BODYタグ-->
<body>

  <!--HEADERタグ-->
  <header>

    <!--H1タグ サイト名-->
    <h1>
    　<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    　　<?php bloginfo('name'); ?>
    　</a>
    </h1>

    <!--ナビメニュー-->
    <nav>
      <?php wp_nav_menu( array( 'theme_location' => 'header-nav' ) ); ?>
    </nav>

  </header>

テンプレートディレクトリに「header.php」とう名前で保存します。テーマ名が「WordPressSampleTheme」だったら「～/WordPressSampleTheme/header.php」となります。

【function.phpを作成する】

上記のナビメニューの部分の「wp_nav_menu～」を実行するには「function.php」を作成し、下記のコードを追加します。

<?php

//ナビメニューを有効化
function setup_navi() {
  register_nav_menus( array(
      'header-nav' => 'ヘッダーナビ',
    ) );
}
add_action( 'after_setup_theme', 'setup_navi' );

以上で「header.php」の作成が完了しました。もっと詳しく知りたい方は↓の「ゆっくり」のコーナーを御覧ください。

【2.header.phpの書き方（補足）ゆっくり】

さて、ここからは詳細に解説をしていきます。時間のある方、詳しく知りたい方はご覧下さい。

【テンプレートタグの説明】

元のHTMLから書き換えた部分を見ていきましょう。WordPressで用意されているテンプレートタグを使用し、PHP言語を用いてテーマを作っていきます。

まずは

<html lang="ja" >

を

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

に書き換え。

「language_attributes()」というテンプレートタグを使用し、文字コードを表示させています。読み込み元はWordPressの「設定」＞「一般」＞「サイトの言語」に指定した言語の文字コードになります。

<title>WordPressサンプルページ</title>

を

<title><?php bloginfo('name'); ?></title>

に書き換え。

「bloginfo()」というテンプレートタグを使用。
こちらもWordPressの管理画面から入力した情報を表示する事が出来るタグです。
引数に「name」を指定しているので「設定>一般>サイトのタイトル」を取得し表示出来ます。
他にも引数を変えることで各データを取得出来るのですが、例えば
「url」は「設定>一般>サイトアドレス」を取得。
「description」は「設定>一般>キャッチフレーズ」を取得。
などがあり、他にも多数設定されています。

<link rel="stylesheet" type="text/css" href="style.css">

を

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">

に書き換え。

「get_stylesheet_uri()」というテンプレートタグを使用。こちらを使用するとテーマスタイルシート「style.css」のuriを「http～style.css」の形で取得できます。こちらはデータの取得のみなので、表示させる為に「echo」を使っています。また、style.cssはテーマのテンプレートディレクトリに保存されている必要があります。
「WordPressSampleTheme/style.css」の様になります。

※この様に、テンプレートタグには「データを取得するのみ」又は「データを取得し表示させる」という機能があり、タグごとに異なりますので、出力方法にはご注意を。

<link rel="shortcut icon" href="https://sample.com/images/logo/favicon.ico">

を

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo/favicon.ico">

に書き換え。

「get_template_directory_uri()」というテンプレートタグを使用。
こちらはテンプレートディレクトリのuriを取得できます。「http～WordPressSampleTheme」の様になります。※取得データの末に「/」はついていませんので、続きは/から始めます。
上記の場合はテンプレートディレクトリ内に「images/logo/favicon.ico」という形で保存した場合になります。ディレクトリ（フォルダ）は各自の作り方に合わせて変更してください。これまた「echo」で出力させます。

<h1><a href="https://sample.com/">WordPressサンプルページ</a></h1>

を

<h1>
　<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
　　<?php bloginfo('name'); ?>
　</a>
</h1>

に書き換え。

再び「bloginfo()」を使用。
更に「home_url()」というテンプレートタグを使用。このサイトのurlを取得できます。2つの引数の指定が可能です。
一つ目はurlに続くパス指定。未指定の場合「https://sample.com」となり、末尾に「/」が付きません。のでここでは「home_url(‘/’)」として「https://sample.com/」という出力にしています。
二つ目は「http」か「https」かを指定出来ます。指定が無い場合は自動で選択されます。
上記テンプレートタグを引数として「esc_url()」というテンプレートタグも使用。
こちらのタグはurlを無害化(サニタイズ)しています。「esc_url(home_url(‘/’))」としてセットで利用しましょう。
出力するのに「echo」を使用します。

<nav>
  <ul>
    <li><a href="">メニュー1</a></li>
    <li><a href="">メニュー2</a></li>
    <li><a href="">メニュー3</a></li>
  </ul>
</nav>

を

<nav>
  <?php wp_nav_menu( array( 'theme_location' => 'header-nav' ) ); ?>
</nav>

に書き換え。

「wp_nav_menu()」というテンプレートタグを使用。WordPressの管理画面の「外観>メニュー」で設定したナビゲーションメニューを表示させます。引数として連想配列を指定します。ここではキー「theme_location」に対し「header-nav」を設定し、「header-nav」という名前のナビゲーションメニューを表示させています。( header-navは次項【function.phpでメニューを有効にする】で指定した名前です )他にも多数のキーが用意されており、例えば
・「container」キーはデフォルトで「div」が設定されており、ulの外をdivで加工設定になっています。
・「container_class」キーは上記divにclassを付加しており、デフォルトでは「menu-メニューのスラッグ-container」という出力になっています。
などがあり、それらを変更することで出力されるコードをカスタマイズ出来ます。

※さてこのテンプレートタグを使用する為には、WordPressの管理画面にメニュー画面を有効化させる必要があります。その為にはfunction.phpを作成し、そこにコードを追加する必要があります。続きは次項をご確認ください。

【function.phpでメニューを有効にする】

ナビゲーションメニューを有効化するため「function.php」をテンプレートディレクトリに作成(WordPressSampleTheme/function.php)し、下記コードを追加します。

function setup_navi() {
  register_nav_menus( array(
      'header-nav' => 'ヘッダーナビ',
    ) );
}
add_action( 'after_setup_theme', 'setup_navi' );

これにより、WordPressの管理画面に「外観>メニュー」の画面が追加され、「ヘッダーナビ」という名前で「メニューの位置」として表示され、利用可能となります。
また、「wp_nav_menu()」の引数のキー「theme_location」に「header-nav」を指定する事で、ナビゲーションメニューを出力する事ができます。
「setup_navi()」「header-nav」「ヘッダーナビ」の部分の命名は任意なので、分かりやすい名前をつけてください。
WordPressで用意されている「register_nav_menus()」という関数を使用しており、この部分がナビゲーションメニューを有効化させています。引数には連想配列が用意されており、キーにはコード内で使用する名前を入れ、値にはWordPress管理画面で表示する名前を入れます。
それをfunction setup_navi(){}として関数の中に入れてあります。
その関数をWordPress関数「add_action()」で実行しています。この関数は実行するタイミングを引数に指定する事ができ、ここでは「after_setup_theme」としています。これはfunction.phpが実行された直後のタイミングで実行されます。
二つの引数を指定しており、最初が「アクション」と呼ばれるもので、次が実行する「関数」です。この関連付けを「フック」と読んでいます。アクションに関数をフックする事で、指定したアクション実行のタイミングで関数も実行される。という訳です。様々なアクションが用意されている訳ですが、この場合は「init」を使用する事も可能なようです。実行される順番としてはinitの方が遅いタイミングとなります。

という訳で今回の「WordpressTip’sテーマ自作-header.phpの書き方」はここまで。
いかがだったでしょうか？ゆっくり説明の中でも説明しきれていない部分は多々ありますが、あまり細かく書いてしまうとわかりづらくなってしまうので、程よくしたつもりです。
分からない事、疑問点などありましたら、お気軽に「Kota」までお問い合わせください。お答えしたいと思います。

【余談】

さてさて、コロナ禍皆様いかがお過ごしでしょうか？リモートワークの人が増えたり、会社が無くなったり、転職を考えたり。業績が伸びている会社もあったり。色々ですね。私の仕事は自宅で出来るので影響は少ない方だと思います。そもそもの仕事が少ないのが一番の問題点なんですが(笑)
田舎に住んでいるのですが「農業 & Web制作」の様な仕事を考える今日このごろ。高齢化により農業を行わない畑が増えています。ガッツリ農業ではなく、二つの仕事を行うハイブリッド。自然の多い地域で暮らし、土に触れ、野菜などの育成に携わる。会社に行く必要が無い人も大分増えたとか。リモートで出来る仕事の人ならこういった働き方。暮らし方。もいいのでは？と思うのです。都会でビルの中、満員電車にゆられる必要はあるのでしょうか・・・とはいえ、そんな暮らしにも憧れる私も居るのですけどね。
「農業 &」に興味の有る方、ご連絡ください。
それでは、このシリーズはまだまだ続きます。なんせ記事を書くのが遅くて遅くて(T T)時間がかかるんですよね。文章は苦手です。が、継続がんばります。
それではまた、次の記事でお会いしましょう。
ではでは(^^)/
☆Kotaでした☆

【まとめ】

・htmlページ冒頭～までを「header.php」として保存。
・「header.php」内のhtmlはPHP言語とWordPressのテンプレートタグや関すを使って書き換える。
・今回使用したテンプレートタグ及び関数「language_attributes() , bloginfo() , get_stylesheet_uri() , get_template_directory_uri() , home_url() , esc_url() , wp_nav_menu()
」
・ナビゲーションメニューを有効にする為に「function.php」を用意し、関数内に「register_nav_menus()」を書き、add_action()で実行させる。

著者： Kota

Kotanote

タグ: header.php, WordPress, 自作テーマ

Kotanote

WordPressTip’sテーマ自作-header.phpの書き方

【1.header.phpの書き方（本文）サックリ】

【header.phpとは？】

【headerのHTML作成】

【HTMLをheader.phpへ書き換える】

【function.phpを作成する】

【2.header.phpの書き方（補足）ゆっくり】

【テンプレートタグの説明】

【function.phpでメニューを有効にする】

広告

【余談】

【まとめ】

About this page

Portfolio