0から始めるWordPress自作テーマ作成【header.php作成編】

更新日：2022年11月20日 / 投稿日：2020年08月9日

WordPressでは、WEBサイトのデザインを決めるテーマというものがあり、無料のテーマから有料のテーマもあり、デザインの種類はとても豊富にあります。

ただし、既製のものであるため、カスタマイズをすると思わぬところでデザイン上の制約で思うようにカスタマイズが出来ない場合もあります。

一方、WordPressのテーマ作成を自作出来るようになると、自分が作成したデザインのままでWordPressの機能を実装できますので、既製のテーマのような制約を受けずにカスタマイズが可能です。

この記事では、これからWordPressの自作テーマ作成を作り方をいくつかに分けてご紹介できればと思います。

最終的には1つのWordPressサイトが作れるところを目標としてポイントを分けてご紹介していきますので、よろしくお願いいたします。

関連記事：WordPressでヘッダーを任意のヘッダーに変更する方法

～目次～

1 テーマを作成する前に準備するもの
2 WordPressのテーマ作成で、最低限必要なファイル
- 2.1 TOPページのHTMLファイルをindex.phpへ変更
- 2.2 各パーツへの切り分け
3 header.phpを作成
4 次回はfooter.phpの作成方法をご紹介します

テーマを作成する前に準備するもの

テーマを作成する前に、まずは以下のものを準備しましょう。

レンタルサーバー
WordPress本体
テキストエディタ
WEBサイト

この記事ではWordPressの自作テーマ作成にフォーカスを当ててご紹介をしていきたいと思いますので、サーバーへWordPressのインストールは割愛させて頂きます。

まずはレンタルサーバーにWordPressをインストールします。

WordPressはテーマとは別に、本体をサーバーにデータベースを作成しなければ動きません。
ですのでまずは、サーバーにWordPressをインストールをしましょう。
多くのレンタルサーバーでは、WordPressを簡単にインストールできるようになっているので、そちらを利用すると簡単にインストールが出来ます。

WordPressのテーマ作成で、最低限必要なファイル

WordPressのテーマ作成を自作するにあたり、以下のファイルが最低限必要になり、無いとテーマとして認識がされませんので、用意します。

functions.php　※WordPressの機能を設定するファイル。作成時は空白状態で問題無いです。
style.css
index.php

TOPページのHTMLファイルをindex.phpへ変更

まずは上記のファイルの中でTOPページのHTMLをindex.phpへと変更します。

といっても、変更する部分はファイルの拡張子の部分を変更するだけですので、以下のようにファイルの拡張子を変更します。

〇〇.html(TOPページにあたるHTMLファイル)→index.php

各パーツへの切り分け

変更したindex.phpをヘッダーやフッターといったように各パーツへ切り分けます。

このサイトを例としてご紹介すると、以下のように赤枠の部分をパーツとして切り分けます。

header.phpを作成

index.phpからヘッダー部分にあたる以下のコードを切り取ります。

<!--  ヘッダー部分のコードにあたるHTMLを切り分けます  -->
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>Knowledge Base</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="">HOME</a><li>
        <li><a href="">HOME</a><li>
        <li><a href="">HOME</a><li>
      </ul>
      <div>
        <input type="text" value="Search">
      </div>
    </nav>
    <div id="main_v">
      <h1><img src="assets/images/common/logo.png" alt="logo" title="logo"></h1>
    </div>
  </header>

切り取ったヘッダー部分のコードをheader.phpという名前を付けて作成します。