静的なトップページなどにWordPressの新着情報を表示する方法

静的なトップページなどにWordPressの新着情報を表示する方法

ブログ部分だけWordPressを使ってCMS化するケースは今でもたまにあります。
その場合、静的サイトが先にあるケースがほとんどで大体がトップページに新着情報を表示する流れに。
例えばブログの新着情報を静的なトップページ(index.htmlなど)に5件表示して、『一覧はこちら』といったリンクをつけるようなケースです。

ものによってはサクッとWordPressで作り直した方が楽な案件もありますが、今回は静的ページはそのままで新着情報を追加する方法を紹介します。

ブログ部分をWordPressで準備する

まずはWordPressを準備して任意のディレクトリに設置します。
今回は例として/public_html/wp/の場所に設置することにします。

静的ページでphpを読めるようにする

通常phpを使用する場合、拡張子は.htmlではなく.phpを使用します。
が、今回は静的ページをそのまま活かしてphpを読めるようにする必要があるので『.htaccess』などにhtmlファイルでもphpを読める記述を追加する必要があります。
記述する内容はサーバーによって異なりますのでご注意ください。
例として『お名前.comサーバー』を使用している場合の方法を紹介します。

お名前.comサーバーを使用している場合

『.htaccess』と『php.cgi』を用意して/public_html/index.htmlと同じ階層にアップロードします。

.htaccess
Action myphp-cgi /php.cgi
AddHandler myphp-cgi .html
php.cgi
#! /usr/bin/bash
exec /usr/local/bin/php-cgi

『php.cgi』をアップしたらパーミッション(属性)を705に変更。

index.html(トップページ)に WordPress の”wp-load.php”をインクルードする記述を追加

/public_html/index.htmlを開いて一番上(先頭、1行目)に以下のコードを追記してアップロードします。

<?php include_once("./wp/wp-load.php"); ?>

/wp/の部分はWordPressをアップロードしたフォルダ名が入ります。
これでindex.htmlでWordPressのタグが読めるようになります。

index.html(トップページ)にWordPressの新着情報を表示するコードを追加

例えばこんな感じに記述します。
使っているエディタ(ソフト)によってはhtmlファイル内にphpファイルを書き込むので、コードの色があれ?ってなる場合もありますが気にしなくて大丈夫です。

<?php
	$args = array(
	'posts_per_page' => 5,
	'paged' => $paged,
	'post_type' => array(
	'post',
	),
	);
	$the_query = new WP_Query( $args );
?>
	<ul>
		<?php if($the_query->have_posts()): ?>
		<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
		<?php
		$category = get_the_category();
		$cat_name = $category[ 0 ]->cat_name;
		$cat_slug = $category[ 0 ]->category_nicename;
		?>
		<li>
		<p class="titleWrap"> <span class="cat <?php echo $cat_slug; ?>"> <?php echo $cat_name; ?> </span> <span class="title"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></span> <span class="date">
		<?php the_time( get_option( 'date_format' ) ); ?>
		</span> </p>
		<!-- .titleWrap -->
		<div class="text">
		<p>
		<?php
			if ( mb_strlen( $post->post_content, 'UTF-8' ) > 100 ) {
			$content = str_replace( '\n', '', mb_substr( strip_tags( $post->post_content ), 0, 100, 'UTF-8' ) );
			echo $content . '…';
			} else {
			echo str_replace( '\n', '', strip_tags( $post->post_content ) );
			}
		?>
		</p>
		</div>
		<!-- .text --> 
		</li>
		<?php endwhile; ?>
		<?php else : ?>
		<p>表示する記事はありませんでした。</p>
		<?php endif; ?>
	</ul>
<?php wp_reset_postdata(); ?>
<a class="btn" href="/news/"><span>NEWS一覧はこちら</span></a>

この記述では以下のような条件を設定しています。

  1. 新着を5件表示する
  2. 表示する記事がない場合は『表示する記事はありませんでした。』と表示する
  3. カテゴリーを取得、カテゴリー部分にクラスを付与
  4. 文字数が100を超える場合は100文字目以降を…と省略する

この辺りは出力する内容によって書き換えてください。

これで静的なトップページにWordPressの新着情報が表示されるようになります。

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM