【WordPress】テーマの作り方の基本

wordpress

スポンサーリンク

どんなファイルを作れば、WordPressにテーマとして認識されるのか紹介します。

WordPressのテーマとは何か

テーマは、WordPressで作られたWebサイトの見た目の部分をつかさどります。

さらに詳しく:WordPressとは何か

WordPressでテーマとして認識されると、管理画面の「テーマ」という項目に追加されます。

WordPressのテーマ
管理画面でテーマはこのように認識されます

このテーマは、外部から気に入ったものをダウンロードしたり、自分で作ったりすることができます。

スポンサーリンク

本記事では、自分でテーマを作る際、WordPressにテーマを認識させるための基本的な操作についてご紹介します。

WordPressテーマに必要なファイル

index.phpというファイルとstyle.cssというファイルが存在していれば、テーマとして認識されます。
この二つをテーマのフォルダにアップロードすると先ほど紹介した、管理者画面にテーマとして表示されます。

phpに慣れていない方は、phpファイルについて敷居が高く感じるかもしれませんが、心配はいりません。
ほとんどHTMLファイルみたいなものだからです。後ほど詳しく紹介します。

テーマフォルダの場所

先程の二つのファイルはWordPressのどこにアップロードすればいいのでしょうか?

WordPressのテーマのフォルダについて詳しく学ぶ

上の記事で詳しく紹介していますが、「app」→「public」→「wp-content」→「themes」のthemesフォルダのなかに、テーマの名前を冠したフォルダを作ります
その新しく作ったフォルダの中に、先ほどの2つのファイルをアップロードします。

WordPressにテーマを認識させる一連の流れ

それでは、実際に手を動かしてWordPressの簡易的なテーマを作っていきます。

今回は、プログラミングお決まりの「Hello World」を、WordPressのテーマとして表示させてみましょう。

まずは、以下の記事に従って、WordPressの開発環境を整えてみてください。
参考:【Local】自分のPCでサーバーを立てて、WordPress開発をする

1. テーマフォルダを作る

まずは、所定のフォルダの中に、テーマフォルダを作ります。

WordPressのテーマのフォルダ
テーマのディレクトリの格納場所

繰り返しになりますが、所定のフォルダは、「app」→「public」→「wp-content」→「themes」の中です。

デフォルトで3つのテーマが入っています。そこに新たにお好きな名前のテーマフォルダを作ります。

WordPressテーマのフォルダ
新たにフォルダを作ります

上の写真では、「sample-site」というフォルダを作成した例です。

2. 必要なファイルを作る

先ほど作成した、テーマのフォルダの中に、index.phpstyle.cssの二つのファイルを設置します。

まずは、普段お使いのテキストエディタで、テーマのフォルダを開いてください。

WordPressに必要なファイル
VSCodeで開いています

写真の例では、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. 管理者画面で、テーマを選択する

最後のステップです。管理者画面の「テーマ」というところにアクセスしましょう。

WordPressのテーマ
管理画面でテーマはこのように認識されます

先ほど解説した手順通りに行っていれば、ここにテーマとして認識されているはずです。
テーマの上にカーソルを持っていき、「有効化」をクリックしましょう。

3. サイトにアクセスしてみる

「有効化」を押すと、テーマが自分のWebサイトに適応されます。

なので、自分のサイトにアクセスしてみてください。
Localというソフトウェアで行っている場合は、以下の写真のように、「OPEN SITE」というボタンからWebサイトにアクセスできます。

Webサイトにアクセス
Localを用いてWebサイトにアクセスする場合

すると、Hello Worldと表示されたことと思います。

テーマの表示
このように表示されれば、成功です

まとめ

Hello Worldと表示させることができました。これだけでも立派なテーマです。

これだけで終わるなら、WordPressを使う必要性は全くないでしょう。
しかし、Web記事を書いたり、記事たちを一覧で表示させたりしたいとき、WordPressは本領発揮します。

これからますます、あなただけのWebサイトを発達させていきましょう。

次のステップ:WordPressにおけるテンプレート階層とは何か

スポンサーリンク