2020年7月8日

【WordPress】パターン別!実ファイル・物理ファイル・ディレクトリとの共存【応用編】


Content
こんにちは!まるたけです。

本記事では、WordPressと実ファイル(静的ファイル/物理ファイル)、実ディレクトリを共存させる際の、よくある応用パターン3選をご紹介します。


はじめに

URL・ファイルの例です。
セットアップ済みのWordPressを使って見て行きます。

ドメイン test.my-homepage.local
パーマリンク設定 /%category%/%post_id%/
カテゴリスラッグ colors
カテゴリURL test.my-homepage.local/colors/
※上記パーマリング・カテゴリスラッグの設定で、
 このようなURLが動的に生成されます
実ファイル/静的ファイル(トップページ用) index.html

ケース1.サブディレクトリにWordPressをインストールする

【ケース】
・ドキュメントルート直下に散らかってしまうので、WordPressを別の場所に置きたい
・WordPressのファイルを任意の場所に置き、ドメイン直下のURLでWordPressを動かしたい
・WordPressをサブディレクトリに置いて、動かせるの?

図1-1.WordPressをドキュメントルート直下に設置する場合

【手順1】WordPressインストールディレクトリにファイルを設置
     サブディレクトリ「wp」を作って、そこにWordPressのファイル一式を置きます。

図1-2.サブディレクトリにWordPressファイル一式を設置


【手順2】WordPressアドレスとサイトアドレスを設定

図1-3.一般設定の画面


※ここがポイント!
・WordPressアドレスはWordPressをインストールしたURLである
 例)http://test.my-homepage.local/wp

・サイトアドレスはWordPressとして動かしたいURLである
 例)http://test.my-homepage.local

・それぞれに末尾スラッシュ(トレイリングスラッシュ)は付けないこと



【手順3】ドキュメントルートに「index.php」「.htaccess」を設置する
 WordPressインストールディレクトリにある「index.php」「.htaccess」をドキュメントルートにコピーします。

図1-4.ファイルのコピー&ペースト

【手順4】「index.php」を編集する

「index.php」はWordPressのファイル「wp-blog-header.php」を呼び出しています。
今回の例では、WordPressインストールディレクトリを「wp」に変えたので、パスを以下のように修正します。

define('WP_USE_THEMES', true);

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

ブラウザでトップページ「/」にアクセスします。
ここでは、例として「test.my-homepage.local/」をトップページとします。
あらかじめ用意したトップページが表示されればOKです!

図1-5.トップページの表示例

ケース2.実ディレクトリ配下でWordPressのページを表示する

【ケース】
・静的ページをWordPressに移したいが、URL構造をそのままに保ち、ページを移行したい
・WordPressで作ったサイトに
 実ディレクトリ/物理ディレクトリを作成したら、WordPressのページが表示されなくなった
・WordPressのメディアディレクトリ「uploads」に画像ファイルを置かず、
 任意のディレクトリに画像ファイルを置いてページを表示させたい


【手順1】ディレクトリとファイルの設置
カテゴリ一覧「colors」と同名のディレクトリを作成します。
その中に、あらかじめ用意した画像ファイル一式を「images」ディレクトリへアップします。

図2-1.ディレクトリの例

この時点では「/colors/」を見てもページは表示されません。
それは、WordPress内では、実ディレクトリ(物理ディレクトリ)が優先されるためです。
※詳細な実例は、【WordPress】どちらが優先?実ファイル・実ディレクトリとの共存のケース3をご参照ください。

【手順2】実ディレクトリに「index.php」を設置
ケース1と同様に、/var/www/html/colors/ の下に、index.phpを設置します。

図2-2.ファイルのコピー&ペースト

【手順3】「index.php」を編集する

ケース1と同じように「index.php」に書かれている「wp-blog-header.php」のパスを修正します。
WordPressインストールディレクトリ「wp」を例にしているので、パスを以下のように修正します。

define('WP_USE_THEMES', true);

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

ブラウザでカテゴリ一覧ページにアクセスします。
ここでは、例として「test.my-homepage.local/colors/」をカテゴリ一覧ページとします。
WordPressのカテゴリ一覧が表示され、画像のパスが任意ディレクトリを参照できていればOKです!

図2-3.カテゴリ一覧の表示

ケース3.トップページを静的HTMLにする

【ケース】
・トップページだけはWordPressに組み込まずに、静的ページとして直接置きたい
・サイトリニューアルでWordPressを導入したいが、トップページ以外から少しずつ移行したい
・トップ(ドキュメントルート)にindex.htmlを置いたらWordPressが動かなくなった


【手順1】ディレクトリとファイルの設置&編集
「index.php」「.htaccess」をドキュメントルートにコピーし、「index.php」内のパスを修正します。
 ※あらかじめケース1の手順でご準備ください。

図3-1.ドキュメントルートにファイル設置

【手順2】静的ファイル(index.html)の設置
 あらかじめ用意したトップページ用の「index.html」をドキュメントルートにコピーします。

図3-2.ドキュメントルートに静的ファイル設置

この時点では、トップページ「/」を見るとページは表示されますが、WordPressとしては動作しません。
サーバの設定にもよりますが、インデックスファイルの優先順が「index.html」>「index.php」の場合は、静的ファイルが表示されます。

【手順3】「index.php」を編集する

ドキュメントルートにある「index.php」を編集します。
以下の条件を入れて静的ファイルと動的処理を分けてみます。

※ここがポイント!
・トップページを表示したい場合は、URLを判別して静的ファイルを読み込む
それ以外は、動的処理させる(WordPressの後続処理が動くようにする)

if($_SERVER["REQUEST_URI"]==="/" ){
     require_once("./index.html");   //静的ページを読み込む 
     exit;
 }else{
    define('WP_USE_THEMES', true);
    /** Loads the WordPress Environment and Template */
    require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );    
 }
サンプルコード

ブラウザでトップページ「/」にアクセスします。
ここでは、例として「test.my-homepage.local/」をトップページとします。
あらかじめ用意した静的ページの内容が表示されればOKです!

図3-3.トップページの表示例

まとめ

WordPressで実ファイル/物理ファイル・ディレクトリを共存させる応用パターンについてのまとめです。

     

  • ・WordPressの「ページURL」と「任意のディレクトリ名」が同じであってもWordPressのページは表示できる!
  •  

  • ・任意のディレクトリを作りつつ、WordPressを動かしたい場合は、WordPressトップ用のindex.phpを使おう
  •  

  • ・ディレクトリのパスに応じて、index.phpで読み込んでいる「wp-blog-header.php」のパスも修正しよう
  •  

  • ・トップページだけ静的ファイルを表示することもできる!



「静的ファイルとWordPressが混在するケース」や、「徐々にWordPressページに切り替えるケース」、
「部分的にCMS化」などでお使いいただけますので、ぜひお試しください。

関連記事


2020年7月8日 【WordPress】パターン別!実ファイル・物理ファイル・ディレクトリとの共存【応用編】

Category 開発ブログ(技術ブログ)

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら