Mame Script

  1. HOME
  2. Web制作
  3. WordPressのテーマを自作してみる:その2【必要なファイルの準備】

WordPressのテーマを自作してみる:その2【必要なファイルの準備】

投稿日:

WordPressの準備ができたらテーマを作っていきます。ここではデザインと静的なページはコーディング済みと想定して、テーマ作成に必要なファイルを準備していきます。

テーマを認識させるための準備

まずはWordPressに自作するテーマを認識させます。

手順1:テーマを格納するディレクトリを用意

自作テーマの関連データを格納するディレクトリを用意します。

WordPressをインストールした場所/wp-content/theme/[任意のテーマ名]

前のページで書いた通りだと以下のようになります。
C:\xampp\htdocs\mamescript\wp-content\themes\mamesukujp

手順2:index.phpを用意

手順1のフォルダ直下にindex.phpを用意します。この時点ではファイルの中身はなくて大丈夫です。
C:\xampp\htdocs\mamescript\wp-content\themes\mamesukujp\index.php

手順3:style.cssを用意

index.phpと同じ階層にstyle.cssを用意します。
C:\xampp\htdocs\mamescript\wp-content\themes\mamesukujp\style.css

このCSSの一行目には以下の記述が必要です。

/*
Theme Name: テーマ名
Theme URI: テーマのURL
Description: テーマの説明
Version: 1.0
Author: 作成者名
Author URI: 作成者URL
*/

このうち、最低限テーマ名があれば大丈夫です。実際にはこんな感じで記述していきます。

/*
Theme Name: マメスクJP
Theme URI: https://mamescript.jp/
Description: マメスクJPのテーマです。
Version: 1.0
*/

ここまでできた状態でWordPreeの[外観]→[テーマ]を確認すると、自作テーマが認識されるようになっています。

手順4:screenshot.pngの用意

1200px×900pxで制作したテーマのイメージ画像を、index.phpとstyle.cssがあるディレクトリにscreenshot.pngとして格納するとWordPressでその画像が表示されます。

ここまでがWordPressにテーマを認識させるという、第一段階の準備となります。

実際に使用するファイルを準備する

WordPressに限らず、PHPやJavaなどサーバーサイドの言語と組み合わせて開発しているWebページでは、ヘッダーやフッターなど、どのページにいても共通で使えるものはパーツ化し、その部分を呼び出して使うというのが普通です。(モジュール化)

WordPressも同じで、ヘッダーはheader.php、フッターはfooter.phpに記述して各ページからそれらを呼び出して表示しています。

手順5:header.phpの用意

header.phpの中身は後で記述すればいいので、とりあえずファイルの用意と、手順2で用意したindex.phpに以下のように記述します。

<?php get_header(); ?>

get_header(ファイル名)とすると、header.phpではなく指定したファイル名を呼び出します。

get_header(header_test)の場合header_test.phpが読み込まれます。

手順6:footer.phpの用意

header.phpと同様、ファイルの用意とindex.phpに以下のように記述します。

<?php get_footer(); ?>

こちらもget_footer(ファイル名)とすることでファイル名を指定することができます。

ここまでがまず必要なファイルとなります。