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は設定したものに書き換えてください。
ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス
2025/01/31
JQuery
2025/01/01
神社
御朱印
相模原
2024/10/27
ブラウザ
カスタム投稿
Wordpress
2024/08/20
神社
御朱印
2024/07/06
神社
御朱印