WEBOPIXEL

WordPressと静的ファイルを共存させて部分CMS化する

Posted: 2010.12.03 / Category: WordPress / Tag: 

Wordpressを使用してコーポレートサイトを制作&運営する場合、「新着情報」や「よくある質問」など、よく更新するページをWordpressで制作(CMS化)して、ほとんど更新のない「会社概要」や作り込みをするページを静的ファイル(html)にしたいなというケースがあると思います。
この記事ではWordpressと静的ファイルを共存させる方法と、それに伴った変更すべき設定などをご紹介します。

Sponsored Link

※テスト環境はWordpress3.01です。またサーバーの環境によってはうまく動作しない場合がありますのでご了承ください。

WordPressをインストールする

たとえばこんな感じですでにルートにhtmlファイルやフォルダがあるとします。

index.html
sitemap.html
about.html
service.html

Wordpressはかなりのファイル数があるのでルートにインストールしたら、後々ファイル管理がめんどくさそうです。
ここでは「wp」というフォルダを作成し、その中にインストールをしてみます。

index.html
sitemap.html
about.html
service.html
wp
|- wp-admin
|- wp-content
|- wp-includes
|- ……

インストールしたら準備完了です。
「http://localhost/about.html」にアクセスすれば静的ファイルが表示されるし、「http://localhost/wp/」にアクセスすればWordpressのデータが表示されるはずです。
特別な設定は必要なく普通に設置するだけで共存はできるんですね。

だた、これで終わってしまうのもあれなんで、もうすこし続きます。

パーマリンクの設定

最近はURLも結構重要視されているのでパーマリンクは当然変更しますよね。
場所は「設定」→「パーマリンク設定」ですね。とりあえず下記のように設定しました。

/%category%/%post_id%.html

「post_id」じゃだめでしょみたいな意見はあると思いますが、だいたい親には「category」指定するのではないかと思います。

適当にカテゴリを作成して、投稿してみましょう。
ためしに、コーポレートサイトとしてありがちな「お知らせ」カテゴリーを作成して投稿してみました。

カテゴリー名:お知らせ
カテゴリースラッグ:news

初期のパーマリンク

はい、カテゴリーの前に「wp」と入ってしまってあまりよろしくないですね。
表示されないような設定にしてみましょう。

「設定」→「一般設定」で「サイトのアドレス (URL)」をルートに変更します。
間違ってWordpressのアドレスを変更してしまうと動かなくなってしまうかもしれないので注意してください。

サイトのアドレス (URL)の変更

次にルートフォルダを確認すると「.htaccess」ファイルが作られているので、これを編集します。

.htaccess

		# BEGIN WordPress
		<IfModule mod_rewrite.c>
		RewriteEngine On
		RewriteBase /
		RewriteCond %{REQUEST_FILENAME} !-f
		RewriteCond %{REQUEST_FILENAME} !-d
		RewriteRule . /index.php [L]
		</IfModule>
		# END WordPress
	

8行目あたりの「RewriteRule」を下記に変更します。

RewriteRule . /wp/index.php [L]

これで設定は完了です。「http://localhost/news」にアクセスするとカテゴリーテンプレートが表示されるはずです。
いわゆるお知らせ一覧ページ的なものができました。

静的ファイル(html)からwpタグを実行する

コーポレートサイトは必ずといっていいほどトップページに最新のお知らせがありますよね。
しかしルートに「index.html」を作成したので、そのままではWordpressの情報は表示できません。
「index.html」の1行目に下記を追加することで、静的ファイルでもwpタグを実行できるようになります。

index.html

		<?php require './wp/wp-blog-header.php'; ?>
	

「wp-blog-header.php」をインクルードしてるわけですが、見ての通りphpですよね。
単純に「index.php」に変更してもいいですが、どうしても拡張子はhtmlにしたいという場合があると思います。
htmlファイルからphpを実行するには「.htaccess」に下記を追加します。

.htaccess

		AddType application/x-httpd-php .htm .html
	

WordPressのテンプレートファイルをトップページにする

静的ファイルをトップページにしてみましたが、いやいや俺はテンプレートファイルをトップページにしたいんですよ。という場合があるかもしれない。
その場合はindexファイルを下記のように変更してください。

index.html or index.php

		<?php
		define('WP_USE_THEMES', true);
		require('./wp/wp-blog-header.php');
		?>
	

投稿前のプレビューできるようにする

このままだと公開前の記事をプレビューでindexが表示されてしまうようです。
「?p=65&preview=true」とパーマリンクがそのまま表示されるのが原因と思われますが、とりあえず「wp/?p=65&preview=true」にリダイレクトすれば表示できます。

index.html or index.php

<?php
if ($_GET['preview']) {
	header("Location: /wp". $_SERVER["REQUEST_URI"]);
	exit;
}
?>

COMMENTS

SS 2011-04-07 12:38 

こちら検索で拝見しましたが、まさに同じ事を行おうと思っていまして、躓いてしまいました。Wordpress 初心者でして、PHPも初心者ですので、言葉不十分な点などあったらすみません。

AddType application/x-httpd-php .htm .htmlを追記するのは、index.htmlと同じ階層の.htaccessの「# END WordPress」の下に書き込めば宜しいでしょうか。その後アクセス権限などの変更などは有りませんか?

ページにアクセスする際にいちいち、どのファイルで開くのか聞いてくる様になったので、これはどうした物なおかな~と思ってしまいまして。
「静的ファイル(html)からwpタグを実行する」前の部分までは出来ました。すみません…お力添えを頂けるとうれしく思います。

Kenkichi 2011-04-07 22:26 

「AddType application/x-httpd-php .htm .html」の部分は前でも後でもいいはずです。
なんでしょうね。
レンタルサーバーによってはhtmlでphpを実行することを禁止しているということを聞いたことがあります。
wordpressを抜きにして単純なphpを書いたhtmlファイルを実行できるかを確認してみるといいかもしれません。

SS 2011-04-09 15:56 

Kenkichiさま
アドバイスありがとうございます。他のサイトなどでも調べてみてましたら、ブラウザにキャッシュがたまっていると、どのファイルで開くのか聞いてきて、ローカルに保存させてからファイルを開くという事が起こる様に書いてありました。キャッシュを削除しましたところ、トップページにWPの新着情報一覧が無事に表示されました。アドバイスありがとうございます。今後の参考にしたいと思います。

Kenkichi 2011-04-09 21:27 

解決してよかったです。
見当違いのことを言ってしまったようで、すみませんでした。
キャッシュが原因でそういうことも起るのですね。
逆に勉強になりました。わざわざご報告ありがとうございました。

momo 2012-11-07 16:12 

こんにちは。
まさにこのようなサイトを作る必要があり、大変助かりました。
どうもありがとうございます。

ところで投稿記事を「下書き保存」の状態でプレビューすると、該当記事が表示されずにトップページが表示されてしまいます。

色々検索してもこれはと思うサイトが見つからず困り果てております。
是非お力添えいただけないでしょうか?

webOpixel 2012-11-09 15:35 

下書きをほとんど使用したことがなかったので気づきませんでした。すみません。

URLが
「/?p=65&preview=true」
だったら
「/wp/?p=65&preview=true」
にすれば表示されると思うので、とりあえずJSで置き換えるのがお手軽だと思います。
フックなどがあればいいのですが、、、

もう少し調べて具体的な解決策を追記する予定です。

momo 2012-11-12 12:22 

早速のお返事ありがとうございました。
先日、システムに詳しい方のアドバイスをいただく機会があり、「下書き」状態でのプレビューが出来るようになりましたのでご報告致します。

詳しくは以下をご覧下さい。
「#Added」から3行を追加しました。

ルートフォルダの「.htaccess」
—————————-
# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]

#Added
RewriteCond %{QUERY_STRING} preview=true
RewriteRule ^/?$ /index.php$1 [L]

# END WordPress
—————————-

momo 2012-11-12 12:36 

ソースとして認識されてしまうのか# BEGIN WordPressの下の「IfModule mod_rewrite.c」と# END WordPressの上の「/IfModule」が表示されませんでした。
キーワードを使ってもう一度投稿してみます。

●ルートフォルダの「.htaccess」
———————–
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]

#Added
RewriteCond %{QUERY_STRING} preview=true
RewriteRule ^/?$ /index.php$1 [L]
</IfModule>
# END WordPress
———————–

webOpixel 2012-11-12 14:20 

> momoさん

わざわざ解決策をありがとうございます。
こちらの方でもPHPでリダイレクトする方法を追記してみましたが、htaccessの方がスマートですね。

rin 2013-05-04 18:46 

こんにちは。

静的なページとWordpressによる投稿を共存させる記事はこれしかありませんでした!
大変助かっています><

すいません、1つ質問させてください。

index.html
sitemap.html
about.html
service.html
wp
|- wp-admin
|- wp-content
|- wp-includes
|- ……

index.html, sitemap.html など静的なページはこのように分けますが、
WP内の「ページ」機能を使って投稿してもいいですよね。
分離するメリットはどんなものがあるのでしょうか。
また、分離するか、WPの「ページ」を使うかの判断基準はありますでしょうか。

よろしくおねがいします。

webOpixel 2013-05-04 22:39 

静的なページにするメリットの一つはローカルのオーサリングソフトで編集できることです。
作り込みのあるページであったり、リンク構造が複雑だったりするとWordPressですべて管理すると大変なんじゃないかなと思います。
逆に、単純なフォーマットで大量にページ作成したいときはWordPressですべて作成した方がいいと思います。

fujinugo 2013-09-07 22:44 

はじめして。web制作、WP初心者なのですが、このような仕組みのサイトを作りたいと思い、ほぼそのまま参考にさせて頂きました。それぞれのページはおかげさまで思うように作成できました。ありがとうございます。 
そして、ここで質問させて頂くのはどうか悩んだのですが、どこを探してもわからないことがありまして、お力添え頂けたらと思い投稿させて頂きます。

 ルートに置いてあるHTMLが404のエラーになってしまうので、その原因と対処法を探していました。 普通にリンクを辿れば表示はされるし、確かにルートの中にHTMLはあるのですが webマスターツールやfacebookのデバッガーで入力すると、見つかりませんになります。

.com/
index.html
free.html
gallery_new.html

   |-WP(blog)
  contact
  blog-news

この中のルートにあるHTMLだけ、404になります。
これを調べてみたら?などのヒントだけでも頂けると助かります。調べられるところは調べたのですが何故勉強途中で解決策にたどり着けません。

お力をお貸し頂ければ幸いです。

webOpixel 2013-09-10 14:30 

ブラウザではちゃんとに表示されているということであれば、
「.htaccess」「robots.txt」が怪しいともうのですが、問題ありませんでしょうか?
あとWordPressで検索エンジン拒否の設定をしてるということはないですよね。。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。