ブログ部分だけWordPressを使ってCMS化するケースは今でもたまにあります。
その場合、静的サイトが先にあるケースがほとんどで大体がトップページに新着情報を表示する流れに。
例えばブログの新着情報を静的なトップページ(index.htmlなど)に5件表示して、『一覧はこちら』といったリンクをつけるようなケースです。
ものによってはサクッとWordPressで作り直した方が楽な案件もありますが、今回は静的ページはそのままで新着情報を追加する方法を紹介します。
CONTENTS
ブログ部分を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>
この記述では以下のような条件を設定しています。
- 新着を5件表示する
- 表示する記事がない場合は『表示する記事はありませんでした。』と表示する
- カテゴリーを取得、カテゴリー部分にクラスを付与
- 文字数が100を超える場合は100文字目以降を…と省略する
この辺りは出力する内容によって書き換えてください。
これで静的なトップページにWordPressの新着情報が表示されるようになります。