HTMLからWordPressの自作テーマを作る方法【WordPress制作入門講座】

HTMLでコーディングしたサイトを、WordPressで使用する事もできます。

HTMLサイト（ページ）をベースに、WordPressテーマを作る形です。
WordPress化、WordPressテーマ化、なんて言い方をします。

この方法を使うことで、企業サイトなどブログ以外のページもしっかりと作り込まれたWebサイトをWordPressで作成することが可能になります。

WordPressサイトの構成を考える
WordPresテーマを新規作成する

1.テーマの置き場所を確認する
2.edbaseのファイルをコピーする
3.WordPressにテーマと認識させる
4.index.phpを編集

WordPressサイトの構成を考える

はじめてのWebデザインシリーズで作ってきた、株式会社エドベースのWebサイトをWordPressテーマ化していきます。

せっかくWordPressで使える形にするので、ブログ機能も搭載しましょう。

エドベースのHTMLサイトを素材としてご用意しています。
下記からダウンロードしてご利用ください。
html編から作成されている方は、作ったedbaseフォルダを使用しても構いません。

素材ダウンロードはこちら

WordPresテーマを新規作成する

早速、WordPressに自作テーマを作成してみましょう。
Local by Flywheelは起動させ、管理画面にログインしておいてください。

1.テーマの置き場所を確認する

Local by Flywheelのウィンドウを見てください。
URLの横に表示されている矢印をクリックします。

WordPressで使っているデータが入ったフォルダが開きます。

表示されているフォルダの中から、
app > public > wp-content > themes と進んでください。

　↓

WordPress管理画面 > 外観 > テーマを見てください。
画面に表示されているものと、themesに入っているフォルダ名が同じはずです。

つまり、themesフォルダの中にあるフォルダが、WordPressで使用可能なテーマというわけです。これから作る自作テーマも、このthemes内にフォルダを作って進めていきます。

2.edbaseのファイルをコピーする

早速、HTMLで作ったedbaseサイトをWordPressに移し替えてみましょう。

素材のedwp_sozaiフォルダを、WordPressのthemes内にコピー＆ペーストします。

　↓

フォルダ名は後々わかりやすいように「wpedbase」変えておきます。
そのまま利用しても構いません。

3.WordPressにテーマと認識させる

themesフォルダ内に、新しくフォルダを加えました。
ですが、残念ながら、このままではWordPressにテーマと認識してもらえません。

管理画面からテーマを見てみると、壊れていると表示されていますね。

親切に「足りない部分があります」と教えてくれています。
WordPressがフォルダをテーマと認識するためには、表示されている２つのファイルが必要です。

index.php
style.css

必要なファイルを作成しましょう。
テキストエディタで空のファイルを新規作成。
index.phpと名前をつけて、wpedbaseの中に保存します。

style.cssには、テンプレートヘッダーを記述します。
これは、どんなテーマか分かるように説明を付けるイメージです。
一番上に、下記のコードを追加してください。

/*
Theme Name: テーマの名前
Description: このテーマの説明
Author: 作者の名前
*/

:の後は、テーマや製作者の名前を入れます。
今回のテーマだと、下図のような感じですね。
Author:にはご自分の名前を入れてください。

style.cssを上書き保存。
WordPress管理画面からテーマ設定ページを再読み込みしてください。
Edbaseというテーマが、選択肢に加わっているはずです。

カーソルを重ねて、真ん中の「テーマの詳細」をクリック。

有効化をクリックして、自作テーマを適用させてください。

表示画面を確認すると、真っ白になっています。

4.index.phpを編集

ページが真っ白なのは、新規作成したindex.phpが空ファイルのためです。
少しだけindex.hphに中身を入れて、新しく作ったテーマが使われているか確認してみましょう。

index.htmlの１行目から<body>タグまでをコピーして貼り付けます。
bodyの中身は中身はコピーせずに、</body></html>で閉じます。

<body>と</body>の間に、「index.phpのテストです」という文字を入れてみましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>エドべース株式会社</title>
  <meta name="description" content="EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
    index.phpのテストです
</body>

</html>