WordPressの記事をHTMLサイトに表示させる方法
既存のホームページ(htmlなど)にWordpressでブログを追加したい方にはオススメ
- 既存のホームページ(HTMLなどで制作)は持っている
- リニューアルする必要はない
- ブログ形式のページをホームページに組み込みたい(外部ではなく)
こんな要望、あると思います。
もちろん、既存のページと同じようにhtmlでブログを作ることもできますが、ここで、Wordpressが使えると、更新がとても簡単になるのです。
そして、トップページに「最新記事」や「ニュース」など、Wordpressの記事の一覧を表示できたら、ユーザーにとっても非常に使いやすいサイトになるはずです。
ここで、問題になるのは、WordpressがPHPで書かれているということ。
そこを解消して、htmlページとWordpressを連携する方法をまとめておきます。
Contents
完成形 既存のページのURLは変えずにブログもサイト内で一体化
Wordpressは、お知らせ、ニュース、ブログだけに使用します。 その他のページは、そのまま。
既に運用し始めてから長い場合は、URLを変えたくない場合も多いと思います。
WordPressをインストール
名前は何でもいいですが、新しく、「news」というフォルダを作って、Wordpressをインストールします。
index.htmlなどがあるルートディレクトリにWordpressをインストールしても構いませんが、Wordpressのプログラム自体のファイル数が多いので、今後の管理のためにも、Wordpress専用のフォルダを作ってインストールすることをお勧めします。
html ファイルでphpが作動するように設定する
前述の通り、Wordpressはphp言語で書かれています。そのため、htmlファイルにphpのWordpressを読み込むためには、htmlファイル内でもphpが動くようにしなければなりません。
具体的には、以下のソースをindex.html の1行目に書きくわえます。
1 |
<?php require_once('./news/wp-load.php'); ?> |
今回は、wordpressをインストールしたフォルダ名を「news」としたので、このような階層構造になります。newsの部分は、それぞれ、自分が設定した名前に書き換えてください。
”wordpressファイルを読み込みます”、というおまじないのソースです。
WordPressの記事を読み込むための記述を書きこむ
同じくindex.html内に、Wordpressの記事を実際に読み込むためのコードを書き込みます。
このコードは、Wordpressの書き方に従って自由に書いてください。 例として、簡単な一例を載せておきます。
例えば、このように、最新記事を5件表示させる場合は
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <?php $posts = get_posts('numberposts=5&category=1'); global $post; ?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> <li><a href="<?php the_permalink();?>"> <?php the_time( 'Y/m/d' ); ?>:<br /> 「<?php the_title(); ?>」 </a></li> <?php endforeach; endif; ?> </ul> |
日付と記事のタイトルの表示ですが、アイキャッチ画像などの設定も可能です。 アイコンなどは、CSSで指定してください。
.htaccessを設置する
html上でphpを実行するために、もうひと手間、.htaccessを作ります。
この.htaccessをindex.htmlと同じフォルダにアップします。
1 2 |
Action myphp-script /php.cgi AddHandler myphp-script .php .html |
この記述は、サーバーによって異なります。同じサーバーでもPHPのバージョンなどによっても異なるようですので、これで上手くいかないようなら、調べてみてください。
ちなみに、お客様のサーバー、ロリポップで設定した場合は、以下の記述で上手くいきました。
1 2 |
Action myphp-script /php.cgi AddHandler php5.3-script .html .htm |
以上で設定は完了です。
快適で活発なホームページ運用になりますように。