WordPressの外にあるHTMLで投稿情報を表示する
「普通に作成したHTMLにWordPressの新着情報だけ取り込んで表示したい」というようにWordPressの外にあるHTMLで投稿情報を表示したい場合には下記のように行います。
1. HTMLでPHPが動作するようにする
下記のいずれかを行うとHTMLでPHPが動作するようになります。
- HTMLの拡張子を.phpにする (index.htmlであればindex.php)
- アクセス制御ファイル(.htaccess)で設定を行う
2の場合は下記のURLなどを参考に、.htaccessファイルを作成してください。
2. wp-load.phpを読み込む
WordPressのテンプレートタグ(関数)が使用できるよう、wp-load.phpというファイルを読み込みます。下記のようなコードをHTMLファイルの先頭に配置してください。
|
1 |
<?php require_once( dirname(__FILE__) . '/wp-load.php' ); ?> |
※ HTMLファイルと同じフォルダにwp-load.phpがある場合のコードです。
例えば下記のような階層になっている場合は動作しません。
- 対象のHTMLファイル
- wp/
- wp-load.php
上記の場合は下記のように記載します。
|
1 |
<?php require_once( dirname(__FILE__) . '/wp/wp-load.php' ); ?> |
3. 投稿情報を読み込む
HTML内で投稿情報を読み込みます。表示したい場所の近くで下記のようなコードを配置してください。
|
1 |
<?php query_posts( 'posts_per_page=5' ); ?> |
※ 上記は新着5件分を新しい順で取得するコードです。
4. 投稿情報を表示するコードを埋め込む
取得した投稿情報を表示します。3の次の行あたりに下記のようなコードを配置してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- ループ --> <?php while ( have_posts() ) : the_post(); ?> <!-- 投稿 --> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- 投稿日時 --> <span class="post-date"><?php the_time( 'Y/m/d' ); ?></span> <!-- /投稿日時 --> <!-- タイトル(リンク付きタイトル) --> <span class="post-title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </span> <!-- /タイトル --> </div> <!-- /投稿 --> <?php endwhile; ?> <!-- /ループ --> |
※上記は好きな表示に書き換えてください。「WordPressテーマ用サンプルコード」も参考になるかもしれません。
サーバ上でページを表示してみて、問題なく動くようなら完了です。
完成コード (サンプル)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php require_once( dirname(__FILE__) . '/wp-load.php' ); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> </head> <body> <?php query_posts( 'posts_per_page=5' ); ?> <!-- ループ --> <?php while ( have_posts() ) : the_post(); ?> <!-- 投稿 --> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- 投稿日時 --> <span class="post-date"><?php the_time( 'Y/m/d' ); ?></span> <!-- /投稿日時 --> <!-- タイトル(リンク付きタイトル) --> <span class="post-title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </span> <!-- /タイトル --> </div> <!-- /投稿 --> <?php endwhile; ?> <!-- /ループ --> </body> </html> |