どんなファイルを作れば、WordPressにテーマとして認識されるのか紹介します。
Contents
WordPressのテーマとは何か
テーマは、WordPressで作られたWebサイトの見た目の部分をつかさどります。
さらに詳しく：WordPressとは何か
WordPressでテーマとして認識されると、管理画面の「テーマ」という項目に追加されます。
このテーマは、外部から気に入ったものをダウンロードしたり、自分で作ったりすることができます。
本記事では、自分でテーマを作る際、WordPressにテーマを認識させるための基本的な操作についてご紹介します。
WordPressテーマに必要なファイル
index.phpというファイルとstyle.cssというファイルが存在していれば、テーマとして認識されます。
この二つをテーマのフォルダにアップロードすると先ほど紹介した、管理者画面にテーマとして表示されます。
phpに慣れていない方は、phpファイルについて敷居が高く感じるかもしれませんが、心配はいりません。
ほとんどHTMLファイルみたいなものだからです。後ほど詳しく紹介します。
テーマフォルダの場所
先程の二つのファイルはWordPressのどこにアップロードすればいいのでしょうか？
上の記事で詳しく紹介していますが、「app」→「public」→「wp-content」→「themes」のthemesフォルダのなかに、テーマの名前を冠したフォルダを作ります。
その新しく作ったフォルダの中に、先ほどの２つのファイルをアップロードします。
WordPressにテーマを認識させる一連の流れ
それでは、実際に手を動かしてWordPressの簡易的なテーマを作っていきます。
今回は、プログラミングお決まりの「Hello World」を、WordPressのテーマとして表示させてみましょう。
まずは、以下の記事に従って、WordPressの開発環境を整えてみてください。
参考：【Local】自分のPCでサーバーを立てて、WordPress開発をする
1. テーマフォルダを作る
まずは、所定のフォルダの中に、テーマフォルダを作ります。
繰り返しになりますが、所定のフォルダは、「app」→「public」→「wp-content」→「themes」の中です。
デフォルトで３つのテーマが入っています。そこに新たにお好きな名前のテーマフォルダを作ります。
上の写真では、「sample-site」というフォルダを作成した例です。
2. 必要なファイルを作る
先ほど作成した、テーマのフォルダの中に、index.phpとstyle.cssの二つのファイルを設置します。
まずは、普段お使いのテキストエディタで、テーマのフォルダを開いてください。
写真の例では、Visual Studio Codeという有名なテキストエディタで開いています。
Visual Code Textは、デフォルトでEmmetの補完機能が使用できるので、「! + Enter」を押すだけで、上の写真のようなHTMLの定型文を記述することができます。
テキストエディタで開くことができたら、以下のコードをコピペしてみてください。（現時点では、phpとHTMLに変わりはありません。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>さらに、index.phpと同じ階層にstyle.cssも設置してください。今回は、「Hello World」を出力するだけなので、特に記述はしませんが、テーマとして認識させるのに必要なのです。
通常、style.cssの冒頭部分にはテーマに関する情報を載せます。以下の例のように、コメント形式でテーマ名、作者などの情報を記述します。
3/*
Theme Name: Sample
Theme URI: http://example.com
Description: 私の初めてのテーマです
Version: 1.0
Auther: DOKUPRO
Auther URI: https://doku-pro.com
*/3. 管理者画面で、テーマを選択する
最後のステップです。管理者画面の「テーマ」というところにアクセスしましょう。
先ほど解説した手順通りに行っていれば、ここにテーマとして認識されているはずです。
テーマの上にカーソルを持っていき、「有効化」をクリックしましょう。
3. サイトにアクセスしてみる
「有効化」を押すと、テーマが自分のWebサイトに適応されます。
なので、自分のサイトにアクセスしてみてください。
Localというソフトウェアで行っている場合は、以下の写真のように、「OPEN SITE」というボタンからWebサイトにアクセスできます。
すると、Hello Worldと表示されたことと思います。
まとめ
Hello Worldと表示させることができました。これだけでも立派なテーマです。
これだけで終わるなら、WordPressを使う必要性は全くないでしょう。
しかし、Web記事を書いたり、記事たちを一覧で表示させたりしたいとき、WordPressは本領発揮します。
これからますます、あなただけのWebサイトを発達させていきましょう。
次のステップ：WordPressにおけるテンプレート階層とは何か
