CMSを使ってない通常サイトでWordPressのタグを使う方法 | ホームページ制作（福岡・宗像・北九州）

コロナ禍の中、皆さんはいかがお過ごしでしょうか？
正直、ストレスが溜まりがちですが、ステイホームを前向きに捉え、新しい勉強したり、趣味に没頭したりと少しでも楽しみながら過ごそうと日々、努力しております！
本当に早く、収束してほしいものですね。

さて、今回は久々にWEBの技術系のお話です。
と言っても大したものではなないですが、「あっ、そうなの！」ってなると幸いです。

現状作ったサイトがCMSを使ってないWEBサイトで、ブログだけワードプレスを使用していることって、たま〜にありますよね。
トップページにブログの情報を表示させたいってことがたまにあります。
僕の場合、最近2、3件あったので、備忘録として記事にしておきます。

あるサイトの例

あるクライアントさんのサイトですが、こんな例です。
今までは、データベースに直接アクセスして、ああだこうだで表示してましたが、ワードプレスタグを使って簡単に表示出来ます！

対応方法について

ステップ1
使用しているファイルがhtmlの場合、phpファイルに変換

トップページのファイルが【index.html】の場合、phpに変更します。
拡張子を変換するだけなので、簡単です。

変更前：index.html
変更後：index.php

これで、phpファイルに変換完了です。

ステップ2
変換したphpファイルにwp-load.phpを読み込む

DOCTYPE宣言の直上にコードを追加、これだけです。

require_once( $_SERVER['DOCUMENT_ROOT']. '/wp/wp-load.php' );

1	require_once( $_SERVER['DOCUMENT_ROOT']. '/wp/wp-load.php' );

具体的にソースはこんな感じです。

<?
// Word Pressのタグが使えるように対応
require_once( $_SERVER['DOCUMENT_ROOT']. '/wp/wp-load.php' );


?>
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>タイトルが入ります。</title>
	<meta name="description" content="CMSを使ってない通常サイトでWordPressのタグを使う方法">
	<meta name="keywords" content="ワードプレス">
	<meta name="robots" content="index,follow,noodp,noydir" />
	<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
</head>
<body>



	<!-- blogListArea -->
	<ul class="blogListArea flexBoxKinto-2cnt">
		
		<?php
		$args = array(
					'paged'          => $paged,
					'post_type'      => 'post',
					'posts_per_page' => 4,		// 表示数
		);
		$query = new WP_Query($args);
		if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
		<li class="item_bottom">
			
			<a href="<?php the_permalink(); ?>">
				<div class="photo">
					<?php the_post_thumbnail( 'small' ); ?>
				</div>
				
				
				<!-- asideTxt -->
				<div class="txtC">
					<p class="call"><?php the_time('Y.m.d'); ?></p>
					<p class="blogT"><?php the_title(); ?></p>
				</div>
				<!-- /asideTxt -->
			</a>
		</li>
		
		<?php endwhile; else: ?>
		<div>記事がありませんでした。</div>
		<?php endif; ?>
		
		
	</ul>
	<!-- /blogListArea -->



</body>
</html>