静的ページにWordPressの新着情報を表示!

こんにちは!

先日、静的に作成されたサイトにブログを使用する為に、部分的にWordPressが導入されているサイトの修正をする機会がありました。

↓こんなフォルダ構成です。

修正内容は静的に作られたトップページに、WordPressの個別記事の「日付」「タイトル」「本文」「アイキャッチ」を表示させる内容でした。

↓こんな修正です。

今はサイトを構築するのは、全WordPress化するのが普通です。けっこう珍しい修正だったので、備忘録を兼ねて記事にしておきたいと思います。

トップページ「index.html」を準備!

↓「index.html」のコードは以下になります。1行目でWordPressをインストールしているフォルダをパスで指定します。私の環境では「wp」フォルダにインストールしていますので、下記の記述となります。

<?php require_once('./wp/wp-load.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストサイト</title>
</head>
<body>
<p>ここはテストサイトです。</p>

<h2>新着情報</h2>
<ul>
<?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 the_title() ?><?php the_post_thumbnail('thumbnail'); ?></a>
<?php echo mb_substr(get_the_excerpt(), 0, 30); echo '...' ; ?>
</li>
<?php endforeach; ?>
</ul>

</body>
</html>

次に「.htaccess」を用意します。各サーバーごとにコードが違いますのでご注意下さい。

ロリポップ用の「.htaccess」を準備!

「.htaccess」を作成!

↓コードは以下になります。

AddHandler php5.3-script .htm .html

↓「php5.3」の部分はロリポップの管理画面より「WEBツール」⇒「PHP設定」の「phpバージョン」から確認できます。

ヘテムル用の「.htaccess」を準備!

「.htaccess」の作成!

↓コードは以下になります。

AddHandler php5-script .html

↓「php5」の部分はヘテムルの管理画面より「ウェブ関連」⇒「php.ini設定」から確認できます。

エックスサーバー用の「.htaccess」を準備!

「.htaccess」の作成!

↓コードは以下になります。

AddHandler x-httpd-php5.3 .php .phps .html

↓「php5.3」の部分はエックスサーバーの管理画面より「ご契約一覧」⇒該当ドメインの「サーバーパネルをログイン」⇒「PHP Ver.切替」から確認できます。

作成した「index.html」と「.htaccess」を本番環境にアップして下さい。これで設定は完了です。必ず最後は表示されているか確認して下さい。

最後に!

静的ページで作成されているサイトはまだ数多くあるので、やむなく静的ページにWordPressの新着を読む込む機会があった時はご参考下さい。

以上「静的ページにWordPressの新着情報を表示!」でした!

それではまた。

コメント