ブログ
7.72015
WordPressで新着情報を管理し、静的HTMLに埋め込むカスタマイズ - その1
目次
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