mito
WordPressと静的HTMLを共存させる方法
見出し画像

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

mito

既存の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を共存させることができました。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
mito

読んでいただきありがとうございます。 いただいたサポートは、Webデザインのスキルアップのために使わせていただき、同じくWebデザインを学んでいる人たちのヒントになるようなアウトプットをしてお返しします!

mito
Webデザイナー。 二人目妊娠中に未経験からWebデザインを勉強し、コーディングなど独学で勉強を重ねフリーランスへ。 暮らしにフィットする働き方をずっと模索しています。 Webデザインにまつわる独学勉強法や役立つtipsの記録はこちら↓ https://mito-lab.com/