.htaccessを使ってWordPressと静的HTMLサイトを共存させる
最終更新日: Update!!
WordPressはコンテンツが投稿されるごとにページが生成される動的サイトですが、合わせてページURL(パーマリンク)も合わせて生成されます。ですので下層コンテンツページなどはURLの形が決まっており、WordPressとは別にディレクトリを用意した静的HTMLページと重なりアクセスできない場面があります。今回はそんなケースに使える小技です。
静的サイトのディレクトリにアクセスすると「page not found」の表示が…
WordPressの場合、一般的には下層ページのURLは以下のような構成になっています。末尾のファイル名は省略された形になっています。 http://example.com/content-01/ この時、WordPressサイト内にある該当の固定ページやアーカイブページを参照し表示されることになりますが、以下の構成のようにディレクトリ名が同じ静的HTMLサイトを設置した場合には「page not found」のエラーが返ってきます。 【 / 】 ┬ 【 wordpress 】 └ 【 content-01 】 ├ index.html ├ 【 css 】 ├ 【 img 】 └ 【 js 】 これは、静的HTMLサイトにあたるページがWordPressの中に存在しないためです。この時に以下のようにファイル名の拡張子まで含めてアクセスすると、静的サイトのページが表示されるのですが、やはりここはWordPressでのURL形式に合わせたいですよね。 http://example.com/content-01/index.html ここで「.htaccess」ファイルを使って対応していきます。.htaccessでディレクトリのインデックスファイルを指定
.htaccessファイルはウェブサーバーに関する設定を記述するファイルですが、この.htaccessファイルにディレクトリ内のindex.htmlなどのインデックスページとなるファイルを指定します。こうすることで、ディレクトリにアクセスしたら指定したファイルが表示されるようになります。具体的にはまず以下の構成で.htaccessファイルを設置します。 【 / 】 ┬ 【 wordpress 】 └ 【 content-01 】 ├ .htaccess ├ index.html ├ 【 css 】 ├ 【 img 】 └ 【 js 】 次に設置した.htaccess内に次の記述を行います。次の例では「index.html」をディレクトリのインデックスファイルに指定しています。 【.htaccess】DirectoryIndex index.htmlこのファイル指定には以下のように複数のファイルを指定することができます。この場合ですと「top.html」があればそれを表示させ、なければ「top-01.html」を表示、それもなければ「top-02.html」を表示させ、これらが全て無い場合は「index.html」を表示させる。という仕様になります。 【.htaccess】
DirectoryIndex top.html top-01.html top-02.html index.htmlこれで「http://example.com/content-01/」にアクセスすると指定した静的サイトのトップページが表示されるようになります。セキュリティなどの理由により、静的ページも必要という時にはぜひお試しください。
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories