Blog

HOME > Web > Wordpress > 投稿 > 【WordPress】WPの記事をHTML（PHP）で読み込む方法

【WordPress】WPの記事をHTML（PHP）で読み込む方法

2016/01/27

投稿 Wordpress HTML

備忘録です。

WordPressの記事一覧をHTML(PHP)で読み込む方法についてです。

参考サイト
WordPressの外にあるHTMLで投稿情報を表示する

WordPressのテンプレートタグ(関数)が使用できるよう、wp-load.phpというファイルを読み込みます。
下記のようなコードをHTMLファイルの先頭に配置してください。
●●.phpに書くことと同じサーバ内にあることを前提としています。

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

別のディレクトリにWordpressをインストールしている場合は下記になります。
wpディレクトリにインストールしている場合

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

記事一覧を読み込むタグを書きます。

<!-- WPの記事を5件表示 -->
<?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>
            <!-- /タイトル --> 
            <!-- キャッチアップ画像 -->
            <p>
            <?php if ( has_post_thumbnail() ) :?>
            <?php the_post_thumbnail('thumbnail'); ?>
            <?php else: ?>
            </p>
            <!-- /キャッチアップ画像 -->
	</div>
	<!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->

完成コード

<?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>
		<!-- /タイトル -->
                <!-- キャッチアップ画像 -->
                <p>
                <?php if ( has_post_thumbnail() ) :?>
                <?php the_post_thumbnail('thumbnail'); ?>
                <?php else: ?>
                </p>
                <!-- /キャッチアップ画像 -->
	</div>
	<!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->
 
</body>
</html>

ちなみに●●.htmlでもphpが使えるようにすれば大丈夫です。方法は割愛します。

ショートコードを使うとContact Form 7も使えます。
※Contact Form 7の問い合わせフォームを事前に用意してください。

<?php echo do_shortcode( '[contact-form-7 id="0" title="お問い合わせフォーム"]' ); ?>

IDとtitleは設定したものに書き換えてください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ