HTMLでコーディングしたサイトを、WordPressで使用する事もできます。
HTMLサイト（ページ）をベースに、WordPressテーマを作る形です。
WordPress化、WordPressテーマ化、なんて言い方をします。
この方法を使うことで、企業サイトなどしっかりと作り込まれたWebサイトを、WordPressで作成することが可能になります。
WordPressサイトの構成を考える
はじめてのWebデザインシリーズで作ってきた、株式会社エドベースのWebサイトをWordPressテーマ化していきます。
せっかくWordPressで使える形にするので、ブログ機能も搭載しましょう。
エドベースのHTMLサイトを素材としてご用意しています。
本コースの【素材】タブより edwp_sozai.zipをダウンロード、解凍してご利用ください。
html編から作成されている方は、ご自身で制作したHTMLサイトを使用して頂いても良いです。
WordPresテーマを新規作成する
早速、WordPressに自作テーマを作成してみましょう。 Localを起動させ、管理画面にログインしておいてください。
1.テーマの置き場所を確認する
Localのウィンドウを見てください。
サイト名の下、もしくはメニューの中にある「site folder」を開きます。
表示されているフォルダの中から、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>
上書き保存して、WordPressの表示画面をリロード。
入力した文字が表示されていたら、テーマがWordPressで使われています。
こんなんで大丈夫？と思った方もいらっしゃるかもしれません。
これからファイルを編集していくと、HTMLで作成したedbaseサイトがWordPress上に復元されていきますのでご安心を。
WordPressの機能も取り入れて、より便利にグレードアップさせていきましょう！