静的ファイルをWordPress化するときの手順まとめ

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

フリーランスとしてWordPressを用いたWeb制作案件をこなしているぼくが普段、静的なHTMLファイルをWordPress化するときに行っている手順を紹介します。

自分用にもなるし、誰かに教えるときにもこの記事を見ながらやってもらえるし、工数が削減できるし。

いいことづくしなのでまとめてみました！笑

WordPress化の作業で躓いている方のお役に立てれば幸いです。

phpファイルやstyle.cssを作成する

WordPressでページを表示させるにはHTML形式からPHP形式へ変更する必要があります。

例えばindex.htmlだと、index.phpといった形に変更します。

＊ぼくはまず空のphpファイル作っちゃいます

ぼくは普段、トップページで表示させたいファイルはfront-page.phpという名前で作ります。

これは好みの問題なのでよしなに。

また、about.htmlなどは先頭に「page-」をつけてpage-about.phpというファイル名にしてあげましょう。

こうすることで固定ページのスラックがaboutの場合、page-about.phpが自動で表示されるようになります。

長々と書きましたが、はじめに作成するファイルはだいたいこちらです。

• index.php
• functions.php
• style.css
• front-page.php
• page-about.php
• page-news.php
• page-contact.php
• page-service.php
• page-recruit.php
• single.php
• header.php
• footer.php

ページの種類はプロジェクトごとに異なるのでよしなに。

上から3つのファイルは必須で、ないとWordPressのテーマとして認識されないのでご注意を。

「page-news.php」は記事一覧ページのテンプレートファイルとして使用します。

「single.php」は記事詳細ページのテンプレートファイルです。

固定ページ用テンプレートにテンプレート名を追記する

以下コードをpage-about.phpなどpage-のファイル先頭に貼り付けましょう。

<?php
/*
 * Template Name: テンプレート名
 */
?>コピー

テンプレート名は「私たちについて」など任意の名前を入力してください。

これをすることで、固定ページの編集画面からプルダウンでテンプレートファイルを選択できるようになります。

テンプレートファイルでヘッダーやフッターを読み込む

後ほどヘッダーパーツとフッターパーツを共通ファイルに切り分けていきますが、先に読み込むコードを書いて準備しておきましょう。

以下のコードを空のテンプレートファイルに貼り付けて保存です。

<?php get_header(); ?>

<?php get_footer(); ?>コピー

style.cssに記述するコード

「themes/テーマ名/」の直下に空のstyle.cssを作成するわけですが、以下のコードを貼り付けて任意のテーマ名を入力して保存しましょう。

/*
Theme Name: テーマの名前
*/コピー

screenshot.pngを配置する

WordPressテーマのアイキャッチになるのがscreenshot.pngです。

作らなくても問題は特にありませんが、あったほうがかっこいいので作ります。

作り方は以下の記事で解説しています。