WordPressと静的HTMLを共存させる方法

既存のWordPressのサイトからアクセスできるような導線でLPを作成しました。

Web制作は必ずしも0からスタートする訳ではなく、現行サイトを色々な人が運用していて、カオスな状態をなんとかしたい・・。という話もよく聞きます。

なので、旧サイトのページ（静的ファイル）の一部を移行してWordPressで新しく作成したサイトに共存させるというケースって結構あるんじゃないかなと思い、設定方法をまとめました。

サイト構成

現行サイトの影響範囲を最小限にしたかったので、まず、サイトトップ配下に固定ページを新規作成。その配下に今回作成した静的HTML(index.html)を配置させました。

(参考)

固定ページのスラッグと同名のディレクトリを配置したい場合の対処法

静的HTMLをWordPressと同じ階層に共存させる方法

ファイル構成

ルートディレクトリ配下は以下の通り。

/
 |-index.php(WordPressの先頭のフォルダ)
 |-wp(WordPressの構成ファイルディレクトリ)
 |-season-item/summer/index.html(静的ファイルのディレクトリ)→今回追加
 |-その他のディレクトリ

今回は夏向け商材のLPだったので、WordPress上で固定ページseason-itemを作り、その配下に今回のページを置くことにしました。

summerフォルダに今回作成したソース全てを配置。

動くか！！と思いきやそんなに甘くなく・・。エラー出ます・・。

固定ページを表示するための設定

1.先頭フォルダのindex.phpを静的ファイルのディレクトリseason-itemにコピー

/
 |-index.php(WordPressの先頭のフォルダ)
 |-wp(WordPressの構成ファイルディレクトリ)
 |-season-item/index.php(先頭フォルダと同じもの)
 |-season-item/summer/index.html(静的ファイルのディレクトリ)→今回追加
 |-その他のディレクトリ

2.コピーしたindex.phpの編集

▼変更前

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

▼変更後1

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '../wp/wp-blog-header.php' );

この状態でhttp://ドメイン名/season-item/にアクセスするとリダイレクトループになってしまいます。。

〜豆知識Q&A〜

リダイレクトとは？

「http://hoge/index.html」

をみようとすると

「http://hoge/」

と表示されるとします。これは、ソースの中で

「http://hoge/index.html」

にきたら、

「http://hoge/」

に転送するように書いているからです。今回は、この転送先がループしてしまっているのでソースの修正が必要です。

(参考)「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典~リダイレクトループ~

〜〜 〜

3.リダイレクトループを回避

リダイレクトループを回避するためにfunctions.phpに以下を追加。

remove_filter('template_redirect', 'redirect_canonical');

追加場所を間違えると、サイト自体が全く動かなくなるので注意が必要です。どこに追加すべきかはこちらを

(参考)functions.phpに機能追加する時、コード挿入の目安となる位置

〜豆知識Q&A〜

functions.phpとは何か？

テーマの基幹をになっているファイルで、テーマ内で汎用的に使われるコードが書かれています。その影響範囲はテーマに止まらず、管理画面の設定などもするファイル。なのでfunctions.phpのカスタマイズをミスると、WordPress全体がエラーになってしまうこともあります。
ということで、バックアップは必須！！ドキドキしながら編集しました。

functions.phpはどこにあるのか？

wp-content > themes > テーマのフォルダ > functions.php

各テーマのフォルダ内にあります。

(参考)WordPressのfunctions.phpとは？場所や用途を徹底解説！

追加したコードの意味は？

remove_filterは無効にするということ。何を？というとtemplate_redirectをredirect_canonicalすることを。ということになります。

？？？？

調べてみたところ、以下のようなことらしいのですが、

redirect_canonical とは、正規のリダイレクトURLをフィルタリングします。

よくわからず。。ざっくり解釈すると、テンプレートリダイレクトを正規のリダイレクトURLでフィルタリングすることを無効にする。ということでしょうか。

〜〜〜

ここまでの設定でさあ！動くぞ！！意気込み、リロード。

エラー出た＞＜。

とあるサイトには、

「Fatal error: require(): Failed opening required … 」は直訳すると「requireという命令で重大なエラーが発生しました。原因は…のファイルを開くのに失敗したことです」となります。

ざっと解釈するとこんな感じですが、WordPressを使い始めたばかりでPHPに慣れていない方はエラーメッセージの意味を深追いして真剣に解釈しようと思わないことです。

むしろ、トラブル対応のノウハウとして「ほとんどのエラーは単純な入力ミス」だと割り切ってエラーの原因になっているファイルをもう一度見直してみましょう。

とのこと。もう一度エラーメッセージを読み直すと、どうやら

season-item >index.php 17行で問題が起きていそうだ！！

ということで確実に今回追加したところです。もう一度じっくりみて、全角になっていないか？など初歩的なことを疑いました。

(参考)WordPressで「Fatal error: require(): Failed opening required」と表示されるとき

そして、試行錯誤した結果「/」がなかったことが原因だとわかりました。

▼変更後1

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '../wp/wp-blog-header.php' );

▼変更後2

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/../wp/wp-blog-header.php' );

(参考)【初心者向け】絶対パスと相対パスの違いについて解説

というわけで無事、WordPressと静的HTMLを共存させることができました。