SIRIUS2でphpを動かしwordpressの記事一覧を取得する

HTMLホームページ作成ソフトであるSIRIUS2でPHPを動かす覚書

SIRIUS2の編集画面でPHPコードを動かす設定

SIRIUS2の記事エディタにそのままPHPのコードを貼っても動作しません。

さくらの場合は、.htmlファイルの中でPHPは動かないため、まずは吐き出すファイルを設定で.phpにする必要があります。

サイトオプション→全体の設定→拡張子 .php

サムネイルの表示は『画像の遅延表示』をオフ

画像の遅延表示をオンにしていると、取得したサムネイル画像のコードが書き換えられて上手く表示されませんので、ここはオフにしておきます。

サイトオプション→全体の設定→サイトの表示速度『画像の遅延表示』OFF

改行タグはなしにする

コードは基本コピペすればいいのですが、デフォルトだと改行タグが入るので、改行タグを『改行なし』にしなければ動作しません。

記事を書く画面の左下に改行タグの設定があります。

これを『改行なし』にします

phpコードを貼る専用のタブ（編集画面右側にある１，２，３、、、のタブ）と、文章などを追記するタブを分けると書き込みがしやすいです。

htmlファイルでwordpressを呼び出すコード

↓基本的にはこちらのコードが使えますが

投稿を取得するコード

まずは投稿データを読み込む部分↓

<?php

/* WordPress の wp-blog-header.php ファイルのパスを指定 */
/* 例は1階層あがって別のフォルダ内にWPをインストールしている場合 */
require_once dirname(__FILE__) . './../wordpress/wp-blog-header.php';

/* 投稿タイプが post の記事から最新の5件の記事を取得 */

$args = array(
    'post_type'      => array('post'),
    'posts_per_page' => 5,
);
$blog_query = new WP_Query($args);
$blog_list = array();

while ($blog_query->have_posts()){
    $blog_query->the_post();
    $post_id   = get_the_ID();
    $post_type = $post->post_type;
    $blog_list[] = array(
        'post_id' => $post_id,
        'title'   => get_the_title(),
        'date'    => get_the_date('Y/m/d'),
        'link'    => get_the_permalink(),
        'thumb'    => get_the_post_thumbnail_url( $post_id , 'thumbnail')
    );
}
wp_reset_postdata();

?>

require_once dirname(__FILE__)の部分は、ご自身のディレクトリ構造によって書き換えてください。

続けて取得したデータを表示するコード

好きにデザインしてもいいのですが、SIRIUS2に組み込まれているクラスをつけてカスタマイズすれば統一感も出ます。

記事表示の部分のみ、以下の例は『画像レイアウト』のタグにしてみました。

<!-- 記事表示 -->
<?php if(is_array($blog_list) && count($blog_list)):?>
    <div class="img-layout layout-03">
    <div class="grid" data-grid-column="col1" data-grid-sp-column="">
        <?php foreach ($blog_list as $blog):?>
        <div class="grid-item">
            <figure class="figure" data-figure-horizontal="true" data-figure-reverse="" data-figure-responsive="true">
            <span class="img-lb"><a href="<?php echo $blog['link'];?>" class="figure-link"><img src="<?php echo $blog['thumb'];?>" alt="" /></a></span>
                <figcaption class="figcaption">
                <div class="figcaption-title"><span><?php echo $blog['date'];?> <a href="<?php echo $blog['link'];?>"><?php echo $blog['title'];?></a></span></div>
                </figcaption>
            </figure>
        </div>
        <?php endforeach;?>
    </div>
    </div>
<?php endif;?>

動作サンプル

上記のコードで動いているSIRIUS2のページはこちらです

!https://minasegawa.com/sirius2-test(リンク切れメンテ中)

コード＆デザイン的にはまだまだいろいろと改善の余地はありますが、とりあえず読めたということでこの記事はここまでです。