WordPressと静的ページを共存させてindex.htmlにWPの更新を表示させる方法
コーポレートサイトを制作する際、お知らせはお客さん側で更新していくのでWordPressの導入を決めました。今まで、会社概要や事業概要などは固定ページを利用して組んでいましたが、メンテナンス性が良くないなぁと思っていたので思い切ってWordPressから切り離し、普通のHTMLでコーディングして外に出してしまうことにしました。
indexは拡張子がhtmlのままでphpを動かせるようにするのですが、さくらインターネットでは少し手間がかかるとのことで、その辺もふまえてのメモ。
目次
- 私がやりたかったこと
- 静的ページをコーディングする
- WordPressをインストールする
- htmlファイルでphpが動くようにする
- 参考ページ
Advertising
私がやりたかったこと
WordPressはお知らせを更新するためだけに使用し、その他のページは静的ページとして運用したい。
（↑WordPressのページと静的ページのヘッダー・フッター・サイドなど、基本的なフォーマットは同一のデザインを使用。）
お知らせを更新したらトップページ（index.html）に表示したいけど、拡張子はhtmlのままにしておきたい。
静的ページをコーディングする
いつも通りにコーディングします。画像やCSSもいつも通り。
WordPressで動かすページも静的ページと一緒に一旦コーディングします。
画像やCSSもWordPressのことは気にせずいつも通りで大丈夫です。
WordPressをインストールする
今回はお知らせのページとして使用するので、「news」というフォルダを作ってその中にインストールしました。
WordPressのファイル数が多いので、別階層に隔離したかったというのもあります。
サイトの階層はこのような感じになります。
インストールが完了したら、WordPressの初期設定やテーマを制作します。
そこで問題になるのが画像やCSSですが…
今回は一番上の階層に置きっぱなしにして、そこから読み込んでしまいます。
本当は良くないけど、問題はない、みたいです。
メンテナンス性を優先させるために WordPressと静的ページを共存させているので、ここでも最優先はメンテナンス性です。
ただ、リンク先を指定する時の階層に注意が必要です。<?php bloginfo(); ?>を使ってCSSや画像を呼び出しても、テーマフォルダの中にファイルはありません！グローバルメニューのリンクも同様に注意が必要です。
jQueryを使用している場合は、二重呼び出しにならないように<head>内を書き換えるのもお忘れなく。
htmlファイルでphpが動くようにする
index.htmlにWordPressのタグを読み込めるようにする
<?php require('./news/wp-load.php'); ?>をindex.htmlの1行目、つまり、DOCTYPE宣言より上に書き加えます。
（newsの所はWordPressをインストールした階層の名前になりますので、必要に応じて書き換えてください。）
お知らせ（WordPressで更新する部分）を表示させたい場所に表示させたいようにWordPressのお作法に倣って記述をします。
私はindex.htmlに7件のお知らせを表示させたかったのでこんな感じで記述をしました。表示の内容はloop-homeという別のphpファイルを用意してそこに記述したものを引っ張ってきています。
<?php
query_posts(‘&posts_per_page=7’);
if (have_posts()) : while (have_posts()) : the_post();
?>
<?php get_template_part(‘loop-home’); ?>
<?php endwhile; endif; ?>.htaccessを設置する
Action myphp-script /php.cgi
AddHandler myphp-script .php .htmlと記述した.htaccessをindex.htmlと同じ階層に入れます。
この記述は使用しているサーバーによって変わるとのことですので、さくら以外のサーバーを使用している方はこちらの記事などを御参考いただければと思います。（動作の確認はしておりません…すみません。）
【サーバー別】HTML上でPHPを実行するための.htaccessの記述 | m630.net
php.cgiを設置する
これはの作業はさくらのサーバーを使用している場合のみ発生する作業のようです。
#!/bin/sh
exec /usr/local/bin/php-cgiこの2行を記述したテキストファイルをphp.cgiというファイル名で保存し、前述した.htaccessと同じ階層にアップ。
そして、ファイルのパーミッションを755に設定します。
以前は共用のphpファイルをSSHで接続してコピーして…ということをしなくてはいけないとのことでしたが、今はそんなことをしなくても大丈夫なようです。
私は上記の2行を記述したファイルをcodaで作成して、Transmitでアップロードしましたが、特に問題もなく元気に動いております。
参考ページ
WordPress › フォーラム » 静的ページにwordpressの最新記事を埋め込むには？
HTML上でPHPを動かす(さくらサーバー：改訂） | m630.net
