PHPのrequireを使って、WordPressの外にある静的トップページに新着記事+投稿タグを表示させてみた

「とある案件で、静的サイトの一部にWordPressを導入して、その新着情報を既存サイトのindex.htmlに表示させる、ということになりました。」という話を前回しましたが、結局どうやって解決したかを書いておきます。
同一ドメイン・同一サーバ内でのお話です。別サーバ、別ドメインでどうなるのかの検証はしていませんのであしからず。)

再説明ですが、もともとあった静的HTMLのサイトの一部(仮に /blog 以下とします)にWordPressを導入するという事例でした。

前回のJSでサクッとできれば良かったんだけど、条件がいろいろ付いていたのでJSはやめたのです。

なので、まず条件の説明を。

今回課せられた制約は大きく2つ

・/blog ディレクトリにインストールしたWordPressの新着記事をリスト表示させて、さらにjQueryで1行おきに背景色をつけてしましまにする
・さらに、そのなかでも最も新しい投稿には”New!!”と表示させてアピりたい

完成イメージはこんな感じ。

この2つの条件にかなり泣かされました。

しましまリストの実装はjQuery使って、こんな感じに書けば一瞬で出来ますね。

$(function(){
     $('li:nth-child(odd)').addClass('odd');
     $('li:nth-child(even)').addClass('even');
});

でも、これだと最初からHTMLに記述してあった部分はOKだけど、動的に書き出したfeed部分には適用できない。
JavaScriptを使って出力した部分を、さらにjQueryで操作する方法っていうのが私には分からなかったんです。

さらに”New!!”表示をどうやってやるかっていうことでまた悩み。。。

サイト全体がWordPressなら、投稿タグかカスタムフィールドつけてもらってそれを取ってくることはそこまで難しくないのですが・・・・。
今回表示させたいページは完全にWordPressの外側。

WordPressの外側のページへWP内の投稿タグとかを反映させるにはどうしたらいいんだろう。。。。。

日付を自動的に判別してどうこうするっていう方法は今回考えないこととする。
そもそも、トップページに取得してるものがもうすでに新着記事だから、さらにNewとか付ける意味ないんじゃ・・・っていう疑問は強く残るが、仕様書がそうなってたからその気持ちは心の奥へしまう。

index.htmlをindex.phpに変えてしまえ!

困った時のフォーラムあさり、ということでダメもとで巡っていたら、こんな方法が。

index.phpの先頭に

を書いてやれば、Wordpressのタグがそのまま使える

※1回よみ込めばOKなので、require_onceの方がいいかも。

な!なんと!
WordPressの外でもですか!?

そこで、既存のindex.htmlをコピーし、index.phpにリネーム。
文字コードがshift-jisだったので、とりあえずUTF-8Nに変更してから、

<?php require_once('./blog/wp-load.php'); ?>

文頭にrequire_onceを追加。

で、bodyの側には

<ul>
<?php
$posts = get_posts("numberposts=5&category=&orderby=post_date&offset=0");
foreach ($posts as $post):
setup_postdata($post);
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span class="newtag"><?php $posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {echo $tag->name . ' '; }
}?></span></li>
<?php endforeach; ?>
</ul>

こんな感じで書いてみました。

見事成功!!

カスタムフィールドは他の用途でがっつり使っているのと、投稿タグはもともと使用予定がなかったことから、New!!の部分は結局投稿タグで出力しました。

.htaccessで仕上げ

で、最後はindex.htmlへのアクセスをindex.phpへもっていくために、
.htaccessに

DirectoryIndex index.php index.html

の1行を追加。
もともと、/index.html → / へ正規化する設定がしてあったので、この1行だけでokでした。

※.htaccessに以下のような記述がもともとあった。exmpleのとこはご自分のドメインに置き換えてよしなに。
気になる人は/index.php → / へ正規化する記述も足したらいいと思う。自分はやってないけど

RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://www.example.com/$1 [R=301,L]

いやぁ。。。。。
ホント、これお金と時間もらってまるまる作り直したい案件でしたよ。。。。

文法エラーも多いし、CSSのimportとかおかしかったし。。。。。

まぁ出来たのでよし。きっとよし。

参考にしたページ

※ちなみにフォーラムで見た情報がrequire文だったんだけどincludeやinclide_onceでも出来るようだ。
参考:PHP ビギナーズレッスン!!! PHPの基本【require文とinclude文】について解説!

コメント / トラックバック 3 件

メモ PHPのrequireを使って、WordPressの外にある静的トップページに新着記事+投稿タグを表示 | たたたてテスト用2011/12/18 03:37

[…] PHPのrequireを使って、WordPressの外にある静的トップページに新着記事+投稿タグを表示させてみた | マイペースクリエイターの覚え書き via kwout 共有:共有印刷メールアドレスFacebookDiggReddi […]

omnioo lab. record | オムニオ・ラボ 画家とハッカー2013/09/29 23:31

[…] ad.php’); で、普通にWPタグというかWordpressの関数を使えるということです。 結構いろんなブログさんで書かれていました。 https://mypacecreator.net/blog/archives/983 http://the-zombis.sakura.ne.jp/wp/?p=973 […]

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索