HTMLで作成した自作(トップ)ページにWordPressのブログ新着記事を表示させる場合方法 | 32ARTS(サニーアーツ)

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

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

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

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

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

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

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

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

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

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

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

【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>

3)index.phpファイルのアップロード

index.htmlがあった場所にindex.phpをアップロードします。
この時、元々あったindex.htmlは削除します。

注2)
ファイルをFTPでアップロードする場合も文字(漢字)コードを「UTF8」に設定
してからアップロードすることを忘れないように。

以上です。