
投稿日:

WordPressの準備ができたらテーマを作っていきます。ここではデザインと静的なページはコーディング済みと想定して、テーマ作成に必要なファイルを準備していきます。
まずはWordPressに自作するテーマを認識させます。
自作テーマの関連データを格納するディレクトリを用意します。
WordPressをインストールした場所/wp-content/theme/[任意のテーマ名]
前のページで書いた通りだと以下のようになります。
C:\xampp\htdocs\mamescript\wp-content\themes\mamesukujp
手順1のフォルダ直下にindex.phpを用意します。この時点ではファイルの中身はなくて大丈夫です。
C:\xampp\htdocs\mamescript\wp-content\themes\mamesukujp\index.php
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の[外観]→[テーマ]を確認すると、自作テーマが認識されるようになっています。
1200px×900pxで制作したテーマのイメージ画像を、index.phpとstyle.cssがあるディレクトリにscreenshot.pngとして格納するとWordPressでその画像が表示されます。
ここまでがWordPressにテーマを認識させるという、第一段階の準備となります。
WordPressに限らず、PHPやJavaなどサーバーサイドの言語と組み合わせて開発しているWebページでは、ヘッダーやフッターなど、どのページにいても共通で使えるものはパーツ化し、その部分を呼び出して使うというのが普通です。(モジュール化)
WordPressも同じで、ヘッダーはheader.php、フッターはfooter.phpに記述して各ページからそれらを呼び出して表示しています。
header.phpの中身は後で記述すればいいので、とりあえずファイルの用意と、手順2で用意したindex.phpに以下のように記述します。
<?php get_header(); ?>
get_header(ファイル名)とすると、header.phpではなく指定したファイル名を呼び出します。
get_header(header_test)の場合header_test.phpが読み込まれます。
header.phpと同様、ファイルの用意とindex.phpに以下のように記述します。
<?php get_footer(); ?>
こちらもget_footer(ファイル名)とすることでファイル名を指定することができます。
ここまでがまず必要なファイルとなります。