ホームページは静的HTMLで作り、新着情報はWordPressで作る方法

今回は「ホームページ自体は静的HTMLで作りたいが、新着情報など頻繁に更新する項目はWordPressで作りたい」という場合に、どうすれば実現できるか、その方法を紹介します。

 

WordPressのインストール

まずは静的HTMLがあるサーバー内にWordPressをインストールしていきます。

トップページをindex.htmlとした場合、ディレクトリ構成は以下のようになります。

public_html/index.html

 

public_htmlは公開ディレクトリです。

公開ディレクトリ直下に新しいディレクトリを作成し、ここにWordPressをインストールします。

今回はnewsというディレクトリを作成し、この中にインストールします。

public_html/news

 

インストール後はWordPressの投稿機能のみを使用します。

特に設定をいじる必要はありません。デフォルトのまま使用します。

 

新着情報をトップページに表示する

静的htmlにWordPressを組み込んでいきます。

拡張子がhtmlでもPHPが動くようにあとで設定を変更するので心配いりません。設定が面倒な場合はindex.htmlをindex.phpに直接変更しても大丈夫です。

 

まずはindex.htmlの1行目に以下のコードを記述します。<!DOCTYPE>よりも前に記述してください。

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

 

次にindex.htmlに新着記事を表示するコードを記述します。今回は日付+記事タイトルという形で5記事表示します。

<div id="topics_list">
<?php

        $args = array( 'posts_per_page' => 5, 'order'=> 'DESC', 'orderby' => 'date' );
        $posts = get_posts($args);

        foreach ($posts as $p) :

        ?>
            <div class="date"><?php echo mysql2date( 'Y/m/d', $p->post_date ) ?></div>
            <div class="text"><?php echo $p->post_title; ?></div>
        <?php endforeach; ?>
</div>

 

foreachを使ったループ処理で記事を表示しましょう。

表示する記事数は$argsのposts_per_pageの値を変更することで調整できます。

 

.htaccessを編集する

index.htmlをindex.phpに直接変更した人はこれはやらないでください。

.htaccessに以下の1行を追加します。

AddHandler php5-script .html

 

この1行でサーバーがHTMLファイルをPHPファイルとして認識します。よって拡張子がhtmlでもPHPを動かすことができるようになります。

以上でエラーが出ていなければ完成となります。お疲れ様でした!