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

更新日:2021年10月8日 /  投稿日:2020年08月9日

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

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

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

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

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

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

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

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

  • レンタルサーバー
  • 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をヘッダーやフッターといったように各パーツへ切り分けます。

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

TOPページを以下の図のように各パーツへ切り分け

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という名前を付けて作成します。

次回はfooter.phpの作成方法をご紹介します

いかがだったでしょうか?WordPressの自作テーマ作成について、header.phpの作成方法をご紹介させて頂きました。

これからいくつかにポイントを分けてご紹介していき、最終的には1つのWordPressのWEBサイトが完成するところをゴールしていきますので、ご参考になれば幸いです。

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら