静的ページにWordPressの記事一覧を表示する方法
株式会社キナリ静的ページの定義
認識に齟齬が生じないよう、最初に静的ページについて定義します。
静的ページは固定された内容を表示
静的ページとは、ウェブサイト上で固定された内容を表示するページのことを指します。
ページの内容は事前に作成され、サーバー上に保存されているため、ユーザーがアクセスした際に変わらない情報を表示します。
HTML、CSS、およびJavaScriptなどの基本的なウェブ技術で構築されることが多く、シンプルな構造をしています。「静的サイト」や「HTMLサイト」とも呼びます。
動的ページはデータベースをリアルタイムに反映
静的ページではないページは「動的ページ」と呼ばれます。
動的ページは、ユーザーの入力や行動、バックエンドのデータベースからの情報に基づいてリアルタイムで内容が生成され、表示されるページです。
HTML、CSSに加え、サーバーサイドのプログラミング言語（PHP、Ruby、Python、Node.jsなど）やデータベース（MySQL、PostgreSQLなど）が使用されます。例えば、以下のようなサービスがあります。
- 通販サイト：商品のリストや詳細、在庫状況、ショッピングカートの内容が動的に更新されます。
- SNSサイト：ユーザープロファイル、フィード、メッセージなどがリアルタイムで表示されます。
- ブログやニュースサイト：新しい投稿やコメントが追加されるたびに内容が更新されます。
- ウェブメールサービス：ユーザーごとに異なるメールの内容が表示されます。
- オンラインフォーラム：ユーザーの投稿や返信がリアルタイムで反映されます。
WordPressの投稿を静的ページに表示する方法
WordPressの投稿を静的ページにも表示するためには、いくつかの方法があります。以下に主な方法を説明します。
- RSSフィードを利用する
- REST APIを利用する
- サブディレクトリのWordPressを呼び出す
それぞれ解説していきます。
RSSフィードを利用する
弊社が運営しているメディアサイト「第二倉庫」を例に説明します。
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>クエリループや投稿表示のデザインは、コードを変更して自由に変えることができます。