コーディングの勉強

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

こんにちは。mito(@mito_works)です。

本家のサイトはwordpress。本家サイトのLPを作った場合にURLをWordpressと揃えたいためにWordpressと同じ場所にLPを配置したいということ、ありませんか?

mito
mito
今回は、WordPressがアップされているサーバー上に静的HTMLを共存させる方法をまとめます。

サイト構成

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

ファイル構成

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

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

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

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

momo
momo
この配置だけではまだ表示されないよ〜

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

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

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

コピーしたindex.phpの編集

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

 

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

 

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

http://hoge/index.html」

をみようとすると

「http://hoge/」

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

http://hoge/index.html」

にきたら、

「http://hoge/

に転送するように書いているからです。

momo
momo
今回は、この転送先がループしてしまっているのでソースの修正が必要だよ!

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

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

remove_filter('template_redirect', 'redirect_canonical');

追加場所を間違えると、サイト自体が全く動かなくなるので注意が必要です。
どこに追加すべきか迷ったとき、こちらを参考にさせていただきました!

momo
momo
function.phpは各テーマのフォルダ内にあるよ!
【初心者向け】Wordpressのフォルダ構成〜基本構造を理解する〜こんにちは! 最近、「Wordpressのテンプレートを自作できるようになりたい!」 と学びはじめたmito(@mito_works...

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。