静的HTMLにWordPressの投稿を表示する方法

MARKLEAPS

2018.11.20

静的HTMLにWordPressの新着情報を出力させる方法を紹介します。

やりたいこと

基本は静的HTMLでサイトを制作し、WordPressはお知らせの更新のみに使用したい
・静的ページ（TOPページ）
https://sample.co.jp/index.html
・WordPressインストールディレクトリ
https://sample.co.jp/news/

HTMLファイルでPHPが動作するように設定

WordPressはphp言語で書かれているツールです。
その為、htmlファイルにphpのWordPressを読み込むには、
htmlファイルでもphpが動くようにする必要があります。

以下を記述した.htaccessをindex.htmlと同じ階層にアップします
【例】Xserverの場合の記述例。（サーバーにより記述が異なる為ご注意ください。）

AddHandler fcgid-script .htm .html

1	AddHandler fcgid-script .htm .html

静的HTML内でWordPressのタグを読み込めるようにする

静的HTMLの1行目に以下を追加します。
これで静的html内でWordPressの関数が使用できるようになります。

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

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

/news/ の部分はWordPressをインストールしたディレクトリ名が入ります。

投稿一覧を表示したい箇所にWordPressのループ文を記述

例えば以下のようなループ文を記述します。

<ul>
<?php
    $args = array(
        'cat' => 1,
        'posts_per_page' => 4
    );

// the query
$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
	<!-- the loop -->
	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <li>
        
        <p><?php the_time('Y.n.j'); ?></p>
        <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    </li>
	<?php endwhile; ?>
	<!-- end of the loop -->

	<?php wp_reset_postdata(); ?>

<?php else : ?>
    <li><?php esc_html_e( '記事がありません' ); ?></li>
<?php endif; ?>

</ul>

<ul>

<?php

$args = array(

'cat' => 1,

'posts_per_page' => 4

);

// the query

$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<li>

</li>

<?php endwhile; ?>

<?php wp_reset_postdata(); ?>

<?php else : ?>

<?php endif; ?>

</ul>

上の記述では以下の条件を設定しています。
・記事を４件表示
・カテゴリー「1」の記事を表示
・投稿日を表示
・記事タイトルを表示（記事詳細ページへリンク）

WordPress

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

静的HTMLにWordPressの投稿を表示する方法

やりたいこと

HTMLファイルでPHPが動作するように設定

静的HTML内でWordPressのタグを読み込めるようにする

投稿一覧を表示したい箇所にWordPressのループ文を記述

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

関連最新記事

[WordPress] デバッグモードを有効化してエラーをサイト上に表示・ログファイルに記録する方法

[WordPress] ブロックエディタ（Gutenberg）最初に覚えたい基本のブロックとその使い方

[WordPress] ブロックエディタ（Gutenberg）ブロックの基本操作

保護中: [WordPress] 今もクラシックエディタを使い続けている古参ユーザーはブロックエディタに移行すべきか

社内風景2

社内風景