OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

.htaccessを使ってWordPressと静的HTMLサイトを共存させる

最終更新日:2018.1.13 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/」にアクセスすると指定した静的サイトのトップページが表示されるようになります。セキュリティなどの理由により、静的ページも必要という時にはぜひお試しください。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram