2021-04-19

WordPressでheader.phpを使う方法

今回は、WordPressでheader.phpを使う方法について紹介します。

これからWordPressを学習していく人は必見の内容です！

WordPressでheader.phpを使う方法

WordPressでheader.phpを共通化して複数ファイルで使い回しするには、以下の2つのステップを踏めば完了です！

それでは見ていきましょう。

① header.phpのファイルを作成する

まずはheader.phpのファイルを作成しましょう。

ファイルの中に<!DOCTYPE html>からheaderまでのコードをコピペして貼り付けます。

以下がサンプルコード。

!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>css/main.css">
    <title>header.php</title>
    <?php wp_head(); ?>
</head>
<body>

<header class="header">
    <div class="header__title">
        <h1>header.php</h1>
    </div>
    <div class="header__nav">
        <ul>
            <li><a href="">ナビメニュー</a></li>
            <li><a href="">ナビメニュー</a></li>
            <li><a href="">ナビメニュー</a></li>
        </ul>
    </div>
</header>

header.phpではheadの閉じタグに<?php wp_head(); ?>のコードが必要になります。

これがないとheadの内容が読み込まれないので、記述を忘れないようにしましょう。

② 呼び出したい箇所でheader.phpを呼び出す

header.phpにコードがコピペ出来たら、次にheader.phpを呼び出したい箇所で呼び出せるようにします。

header.phpを呼び出すには、<?php get_header(); ?>を貼り付けたらOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>css/main.css">
    <title>header.php</title>
    <?php wp_head(); ?>
</head>
<body>


<?php get_header(); ?>

そうすることで、短いコードでheader.phpのコードを複数ページで呼び出すことができます。

HTMLコーディングの時からheaderを共通化するよう意識出来たらいいですね！