静的HTMLをWordpressの固定ページに反映させる方法

Webサイト制作の練習で既存のWebサイトを模写したり、
自分でデザインを起こしてサイトを作成したりした際に、
それを自分のポートフォリオとして公開したいときってありますよね。

そんなときに作成したサイトをWordpressで
既存のテーマのヘッダーやフッターを無視して
固定ページとして公開する方法について解説したいと思います。
 

事前準備

・FTPソフトなどを使ってサーバーのファイルなどを操作できるようにする必要があります。
・HTMLはローカルで作成した前提です。
 

手順

１．作成した静的HTMLのファイル名を「page-◯◯.php」に変更します。

２．テンプレートとして選択できるようにファイルに追記します。

３．手順１のファイルをサーバーにあるWordpressのテーマフォルダーに保存します。

４．Wordpressの新規固定ページでテンプレートとして選択します。

以上の手順でWordpressでファイルを公開できます。
１つずつ詳しく解説します。
 

１．作成した静的HTMLのファイル名を「page-◯◯.php」に変更します。

Wordpressで固定ページのテンプレートとして利用するためには「page-◯◯.php」という名前でファイルを作成する必要があります。

◯◯の部分は任意のテンプレート名となりますので、好きに付けてOKです（ただし半角英数字）。
 

また、このテンプレートのために独自でCSSを当てる場合は通常の通常の「style.css」と区別するために、スタイルシートのファイル名も変更しておきましょう。

例えば「◯◯_style.css」※◯◯には「page-◯◯.php」と同じ文言を入れましょう。
 

２．テンプレートとして選択できるようにファイルに記述します。

この工程での作業は多いです。

まず、テンプレートして認識されるための記述を追加します。

テンプレートのための記述

（ア）「page-◯◯.php」をエディタで開きます。
（イ）コードの先頭に以下の内容を追記します。

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

※ここで記述するテンプレート名は全角でも問題ありません。
むしろWordpressの画面から選択するときには、日本語でどんなテンプレートかわかるようになっていた方が良いです。

ファイルの指定や画像の指定をWordpress仕様に変更する

ローカルでHTMLを作成しているときには、画像の指定を

<img src="images/test.png" alt="テスト"/>

のようにしていたと思います。

このままだとWordpressで見たときに画像が表示されないため、表記を変える必要があります。

具体的にはPHPの記述でテーマフォルダーまでのURLを取得できるようにします。

例えば、テーマフォルダーまでのURLを取得する場合は、

<?php $uri = get_template_directory_uri(); ?>

となります。

つまり、

<img src="images/1.png" alt="食事"/>

↑↑↑これが　↓↓↓こうなります

<img src="<?php $uri = get_template_directory_uri(); ?>/images/test.png" alt="テスト"/>

 

これで実際にネット上で公開された状態になると、以下のようなURLとして指定されるようになります。

<img src="https://ドメイン名/wp-content/themes/テーマ名/images/test.png" alt="テスト"/>

 

なお、子テーマを使用している場合は、上記の記述だとうまくいきません。

なぜなら親テーマのフォルダーURLを取得してしまうからです。

もし子テーマを使用している場合は、記述を以下の内容に変えて試してみてください。

<?php echo get_stylesheet_directory_uri(); ?>

 

CSSファイルのファイル指定パスも忘れずに変更してくださいね。
 

３．手順１のファイルをサーバーにあるWordpressのテーマフォルダーに保存します。

FTPソフトなどを使ってサーバーのテーマフォルダー内に「page-◯◯.php」を保存します。

他にもCSSファイルや「images」フォルダーがある場合は同じ場所にアップします。
 

４．Wordpressの新規固定ページでテンプレートとして選択します。

１．Wordpressの管理画面から固定ページの新規作成ページを開きます。

２．タイトルを入力します。※タイトルを入れないと公開できないので

３．画面右のメニューにある「テンプレート」をクリックして、作成したテンプレートを選択します。

４．「URL」をクリックして公開したいURLに修正します。

５．［更新］をクリックして公開します。

 

以上の手順で作成した静的HTMLファイルをWordpressの固定ページとして公開できます。

注意点としてはこのページのレイアウトはWordpress上からは編集できないです。