静的ページにワードプレスの新着情報を表示する方法

静的ページにワードプレスの新着情報を表示する方法

1,ワードプレスのインストール

まず静的ページをアップロードしているサイトのトップページの階層に行き、ワードプレスを設置するフォルダを生成し、アップロードしていきます。

さくらサーバーなら
www/ドメインフォルダ/index.htmlこのどう階層に[news]というフォルダを生成します。その中にワードプレスのセットをアップロードします。

ワードプレスのパーマリンクの設定

パーマリンクの設定は特に必要ありませんが下記の画像のように「日付」「見出し」と表示したかったのでワードプレス管理画面から設定→カスタム構造チェック→【/%year%/%monthnum%/%day%/%postname%/】を入力し設定してます。

ワードプレスのphpファイルを静的ページに読み込む記述

以下のコードをindex.htmlの先頭に記述します。

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

htmlファイルをphpファイルにとして読み込ませるようにするため.htaccessファイルを生成し以下の記述を入力。(さくらサーバーの場合)借りてるレンタルサーバーで記述方法が違うので他のレンタルサーバーを利用の場合は別の記述を入力。

Action myphp-script /php.cgi
AddHandler myphp-script .php .html

さくらサーバーはそれだけでは読み込まないのでphp.cgiファイルを生成し、以下の記述を入力するようにする。

#!/bin/sh
exec /usr/local/bin/php-cgi

生成したら2つのファイル.htaccess・php.cgiファイルをindex.htmlと同階層に設置をする。その際、php.cgiはパーミッションを705に設定することです。
www/ドメインフォルダ/index.html

静的ページに新着情報の表示

index.htmlにワードプレスでいれた記事の新着情報を表示するために、表示したい箇所に以下の記述を加えていきます。

<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>

するとweb上では以下の表示になる。

<div id="topics_list">
          <div class="date">2016/10/31</div>
           <div class="text">見出しのテキスト4</div>
            <div class="date">2016/10/30</div>
           <div class="text">「見出しのテキスト3</div>
            <div class="date">2016/10/29</div>
           <div class="text">見出しのテキスト2</div>
            <div class="date">2016/10/28</div>
           <div class="text">見出しのテキスト1</div>
        </div>
</div>

上記の内容で表示されます。
以上がワードプレスで更新した新着情報をhtml上に表示させる方法になります。