静的ページにWordPressの記事一覧を表示する方法

2024年6月11日

静的ページの定義

認識に齟齬が生じないよう、最初に静的ページについて定義します。

静的ページは固定された内容を表示

静的ページとは、ウェブサイト上で固定された内容を表示するページのことを指します。

ページの内容は事前に作成され、サーバー上に保存されているため、ユーザーがアクセスした際に変わらない情報を表示します。

HTML、CSS、およびJavaScriptなどの基本的なウェブ技術で構築されることが多く、シンプルな構造をしています。「静的サイト」や「HTMLサイト」とも呼びます。

動的ページはデータベースをリアルタイムに反映

静的ページではないページは「動的ページ」と呼ばれます。

動的ページは、ユーザーの入力や行動、バックエンドのデータベースからの情報に基づいてリアルタイムで内容が生成され、表示されるページです。

HTML、CSSに加え、サーバーサイドのプログラミング言語（PHP、Ruby、Python、Node.jsなど）やデータベース（MySQL、PostgreSQLなど）が使用されます。例えば、以下のようなサービスがあります。

通販サイト：商品のリストや詳細、在庫状況、ショッピングカートの内容が動的に更新されます。
SNSサイト：ユーザープロファイル、フィード、メッセージなどがリアルタイムで表示されます。
ブログやニュースサイト：新しい投稿やコメントが追加されるたびに内容が更新されます。
ウェブメールサービス：ユーザーごとに異なるメールの内容が表示されます。
オンラインフォーラム：ユーザーの投稿や返信がリアルタイムで反映されます。

WordPressの投稿を静的ページに表示する方法

WordPressの投稿を静的ページにも表示するためには、いくつかの方法があります。以下に主な方法を説明します。

RSSフィードを利用する
REST APIを利用する
サブディレクトリのWordPressを呼び出す

それぞれ解説していきます。

RSSフィードを利用する

弊社が運営しているメディアサイト「第二倉庫」を例に説明します。

表示先	https://second-storage.jp/
WordPress	https://yg.second-storage.jp/media

WordPressサイト（例：https://yg.second-storage.jp/media）のRSSフィードURLは通常、「https://yg.second-storage.jp/media/feed」です。

静的サイト（例：https://second-storage.jp/）でRSSフィードを表示するためにJavaScriptを利用します。例えば、以下のようなコードを静的サイトのHTMLファイルに追加します。

<div id="rss-feed"></div>

<script>
  async function loadRSSFeed() {
    const response = await fetch('https://yg.second-storage.jp/media/feed');
    const text = await response.text();
    const parser = new DOMParser();
    const xml = parser.parseFromString(text, 'application/xml');
    const items = xml.querySelectorAll('item');
    let html = '<ul>';
    items.forEach(item => {
      const title = item.querySelector('title').textContent;
      const link = item.querySelector('link').textContent;
      html += `<li><a href="${link}">${title}</a></li>`;
    });
    html += '</ul>';
    document.getElementById('rss-feed').innerHTML = html;
  }

  loadRSSFeed();
</script>

REST APIを利用する

WordPressにはデフォルトでREST APIが有効化されています。

投稿を取得するAPIエンドポイントは通常、「https://yg.second-storage.jp/media/wp-json/wp/v2/posts」です。

JavaScriptを使用してAPIから投稿を取得し、静的サイトに表示します。以下のコードを静的サイトのHTMLファイルに追加します。

<div id="wordpress-posts"></div>

<script>
  async function loadWordPressPosts() {
    const response = await fetch('https://yg.second-storage.jp/media/wp-json/wp/v2/posts');
    const posts = await response.json();
    let html = '<ul>';
    posts.forEach(post => {
      html += `<li><a href="${post.link}">${post.title.rendered}</a></li>`;
    });
    html += '</ul>';
    document.getElementById('wordpress-posts').innerHTML = html;
  }

  loadWordPressPosts();
</script>

サブディレクトリのWordPressを呼び出す

表示先	例）〜〜.com
WordPress	例）〜〜.com/media

サブディレクトリで運営しているWordPressサイトの投稿をルートドメインに表示する場合は、以下の方法も可能です。

方法は3ステップです。

静的ページのファイルをhtmlからphpに変更
require文で外部ファイル読み込みを宣言
WordPress記事を表示させるコードを記載

それぞれ解説していきます。

① 静的ページのファイルをhtmlからphpに変更

基本的に静的ページは「index.html」のように、「〜〜.html」というファイル名になっているかと思います。

それを「index.php」といったふうに、「〜〜.php」に変更してください。

ただファイル名を変更すれば大丈夫です。

② require文で外部ファイル読み込みを宣言

以下のコードを先ほど名前を変更したphpファイルの一番上に記載してください。

<?php require('media/wp-load.php'); ?>

「media」の部分は、WordPressサイトのサブディレクトリ名に変更してください。

require文でこの宣言をすることで、WordPressで使用している記述方法が使用できるようになります。

③ WordPress記事を表示させるコードを記載

呼び出したい箇所に以下のコードを記載します。

<section>
	<?php
		$wp_query = new WP_Query();
		$args = array(
			'post_type' => 'post',
			'posts_per_page' => 10,
		);
		$wp_query->query( $args );
		if ( $wp_query->have_posts() ) {
	?>

	<ul>
		<?php
			while ( have_posts() ) {
			the_post();
		?>
		<li>
			<div>
				<a href="<?php the_permalink(); ?>">
					<?php
						if ( has_post_thumbnail() ):
							the_post_thumbnail('thumbnail');
						else :
					?>
					<img src="<?php echo get_template_directory_uri(); ?>/〜〜アイキャッチ画像〜〜.jpg" alt="">
					<?php endif; ?>
				</a>
			</div>
			<div>
				<div class="date"><?php the_time(get_option('date_format')); ?></div>
				<div class="media_ttl"><?php the_title(); ?></div>
			</div>
		</li>

		<?php
		}
		wp_reset_query();
		}
		?>
	</ul>
</section>

クエリループや投稿表示のデザインは、コードを変更して自由に変えることができます。