HTMLで作成した自作（トップ）ページにWordPressのブログ新着記事を表示させる場合方法

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

WordPressのブログの新着記事をHTML（静的ページ）で制作した別サイトのトップページ表示する方法。
通常HTML(index.html)ではPHPは使用できませんので、WordPressの記事を表示できるように
PHP(index.php)化し、新着記事（５件）を表示できるようにしてみました。

１）静的ページ(index.html)をWordPressのタグ(php)が使えるようにします。

ワードプレスをインストールした場所がルートディレクトリーの場合。

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

ルートディレクトリーの下のフォルダーにWPをインストールした場合はこちら。
例　フォルダー名「blog」の場合。

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

保存時のファイル名は「index.html」ではなく「index.php」へ変更し保存します。

注１）
Wordpressのも文字コードは「UTF-8」になりますので、「shift-jis」の場合
そのままでは文字化けしますので「UTF-8」にします。
metaタグをutf-8にするだけではだめですよ！　テキストエディタで保存時に
UTF-8で保存することを忘れないようにしてください！
テキストエディタによっては「BOMあり/BOMなし」がありますが、恐らく
どちらでも問題ないと思いますが、うまくいかなかった場合
アプリケーションによってはBOM付きでないとUTF-8として認識できないもの、
あるいはBOM無しでないとファイルを正しく取り扱えないものも存在するよう
ですので、双方で試して見てください。

２）ブログの最新記事を表示するコード追加します。

次に表示させたい場所に以下のコードをコピペします。

【index.php】

		<?php
		$posts = get_posts("numberposts=5&category=&orderby=post_date&offset=0");
		foreach ($posts as $post):
		setup_postdata($post);
		?>
		<li><?php the_time('Y.m.d') ?>　<a href="<?php the_permalink() ?>"><?php echo get_the_title($post->ID); ?></a></li>
		<?php endforeach; ?>

ちょっと見やすく装飾してみます。
【cssファイル】

/* WordPress 最新記事*/

ul#wpnews	{
		list-style-type: none;
		margin: 5px 0px 5px 0px;
		padding: 7px 0px 7px 0px;
		text-align:left;
		background-color: #f4f0e9;
		}

ul#wpnews li	{
		list-style-type: none;
		font-size: 12px;
		margin: 5px 10px;
		}

【index.php】

		<ul id="wpnews">
		<?php
		$posts = get_posts("numberposts=5&category=&orderby=post_date&offset=0");
		foreach ($posts as $post):
		setup_postdata($post);
		?>
		<li><?php the_time('Y.m.d') ?>　<a href="<?php the_permalink() ?>"><?php echo get_the_title($post->ID); ?></a></li>
		<?php endforeach; ?>
		</ul>