ブログ

WordPressで新着情報を管理し、静的HTMLに埋め込むカスタマイズ - その1


目次

  1. はじめに
  2. WordPressのインストール
  3. 新着情報の見出しをトップページに表示する
  4. htaccessを修正する
  5. 完成

1.はじめに

ホームページは静的HTMLで作り、新着情報はWordPressで管理したい。
新着情報だけをCMSで管理している会社は結構あってその需要は変わらずあります。

本記事では、具体的にどのようにすれば実現できるのか?
その手順を説明しようと思います。

個別の事例にはなりますが、
WordPressを使って弊社のホームページ上に新着情報機能を追加した際の手順を紹介します。

サンプル:組み込み先ホームページ
====================================
http://turbo-w.com/

【2017/02/08追記】
サイトリニューアルのため上記URLでは閲覧できなくなりました。
下記にて参照できます。
http://old.turbo-w.com/
====================================

WordPressは下記バージョンを使用
====================================
WordPress 4.2.2
====================================

2.WordPressのインストール

まず、静的ホームページのあるサーバ内にWordPressをインストールします。
今回はトップページが以下のようなディレクトリに配置されているケースを考えます。

/public_html/index.html

公開ディレクトリの直下に任意のディレクトリを作り、WordPressをインストールしてください。
ここでは仮にnewsという名前のディレクトリとします。

/public_html/news/

インストール後、このWordPressは投稿機能のみを利用します。

設定等は特に変更する必要はありませんが、
自分は「設定->パーマネントリンク設定->一般的な設定」を「デフォルト」に変更しました。
それ以外はデフォルトのまま使用しています。

3.新着情報の見出しをトップページに表示する

では具体的にどのようにトップページに新着情報一覧を表示させるかを説明していきます。
修正箇所は少ないです。

まず、index.htmlの先頭行に下記の一行を追加します。
これで静的HTMLとWordPressとの連携が可能になります。

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

HTMLをPHPとして動作させる必要がありますので、index.htmlの拡張子をphpに変更するか、
4.htaccessを修正する」を参考にhtaccessを修正してください。

続いて新着一覧部分をコーディングします。
下記のように日付+見出しタイトルという構成で説明していきます。

HTMLは色々な実装方法があるが、以下のようなHTMLを生成する。

<dl>
  <dt>2015/07/07</dt>
  <dd>見出しタイトルサンプル</dd>

 ~ 繰り返し ~

  <dt>2015/07/07</dt>
  <dd>見出しタイトルサンプル</dd>
</dl>

当方のホームページはdivベースで作成したため、
下記のようになっているが、繰り返し構造になっていれば問題ありません。

<div id="topics_list">
  <div class="date">2015/07/07</div>
  <div class="text">見出しタイトルサンプル</div>

 ~ 繰り返し ~

  <div class="date">2015/07/07</div>
  <div class="text">見出しタイトルサンプル</div>
</div>

公開日順に5件表示させる仕様とする例を以下に示します。
実際はカスタムフィールドにリンク先を設定していますが、今回はその説明を省略しています。

<div id="topics_list">
<?php

		$args = array( 'posts_per_page' => 5, 'order'=> 'DESC', 'orderby' => 'date' );
		$posts = get_posts($args);

		foreach ($posts as $p) :

		?>
			<div class="date"><?php echo mysql2date( 'Y/m/d', $p->post_date ) ?></div>
			<div class="text"><?php echo $p->post_title; ?></div>
		<?php endforeach; ?>
</div>

4.htaccessを修正する

サーバ上でhtmlをphpとして動作させるために、htaccessに修正を加えてください。
具体的には下記のようなAddHandlerの記述を追加してください。

AddHandler php5-script .html

※hetemlサーバの場合の記述 ※1

htaccessの記述はレンタルサーバ毎に異なるので注意してください。
レンタルサーバによってはhtaccessを変更できないこともあるので、その辺りの仕様はサーバ仕様を確認してください。

※1 拡張子 .html で PHP を動作させたい。 | よくある質問

5.完成

以下の様な日付と見出しの組合せが表示されれば完成です。

※表示イメージ
新着一覧

カスタムフィールドによるリンク先の設定、新着一覧画面の作成は次回説明します。


追記(2015/07/08)
カスタムフィールドによるリンクの設定に関する記事を追加しました。
 → WordPressで新着情報を管理 その2 – カスタムフィールドの設定  | Turbo Web Store

  • WordPressで新着情報を管理し、静的HTMLに埋め込むカスタマイズ - その1 はコメントを受け付けていません
  • WordPressカスタマイズ
  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。
ページ上部へ戻る