はじめに

どうも、Juemingです。前日、弊社の石井さんから既存の静的サイトにお知らせを導入したいと依頼されました。真水さんが書いた「静的サイトに載せるお知らせをHeadless CMSで管理する」を参照してみましたら、仕様がちょっと違い、Wordpressに選定しました。

Headless CMSのメリット：

• S3などにも動作可能
• メンテ不要
• 開発時間が短い

デメリット：

• お知らせことで単独のURLを付けることが難しい
• 前項を搭載するため、サーバ側の変更が必要で、S3が使えなくなる

以上の理由から、Wordpressにした方が作業しやすいと思います。

WordPressのインストール

今回の場合は、/newsに配置するため、そのままこのフォルダーにWordpressをインストールします。

WordPressのテーマを作成

index.htmlをコピーして、index.php single.php 二つのファイルを作成してください。

index.phpに

<!-- Blog Post -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post mb-6">
<!-- Post Data -->
<p class="sub gothic text-black-50"><?php the_time('Y年n月j日') ?></p>
<!-- Post Title -->
<h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<!-- Post Content -->
<?php the_excerpt(); ?>
<!-- Read More Button -->
<a href="<?php the_permalink(); ?>" class="button right gothic">詳しく見る<i class="fe fe-arrow-right ml-1"></i></a>
</div>
<hr>
<div class="hr clearfix">&nbsp;</div>
<?php endwhile; ?>
<!-- Blog Navigation -->
<p class="clearfix"><?php previous_posts_link('Previous post', 0); ?> <span class="float right"><?php next_posts_link('Next post', 0); ?></span></p>
<?php else : ?>
<h3 class="title"><a href="#" rel="bookmark">見つかりませんでした</a></h3>
<p>表示する記事はありませんでした。</p>
<?php endif; ?>

single.phpに

<!-- Blog Post -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p class="sub gothic text-black-50"><?php the_time('Y年n月j日') ?></p>
<h2 class="title text-orange border-bottom mb-6">
<?php the_title(); ?>
</h2>
<div class="post mb-6">
<!-- Post Content -->
<?php the_content(); ?>
</div>
<div class="hr clearfix">&nbsp;</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

また両方のタイトル部分に、需要を合わせて変更してください

<?php the_title(); ?>
<?php bloginfo('name'); ?>

最後は index.php と single.php を同じフォルダーにして、Wordpressの/wp-content/themesに移動し、ダッシュボードからテーマを変更してください。

静的のトップページにお知らせ欄を追加

まずはindex.htmlの最初に、この文言を追加します。

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

またお知らせを追加した部分に

<?php
$args = array(
'posts_per_page' => 3,
'paged' => $paged,
'post_type' => array(
'post',
),
);
$the_query = new WP_Query( $args );
?>
<ul class="row gothic text-center d-flex justify-content-between pl-0">
<?php if($the_query->have_posts()): ?>
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
<li class="news col-12 col-md-4">
<div class="titleWrap">
<span><?php the_time( 'Y/m/d'); ?></span>
<div class="font-weight-bold mb-2" style="font-size: 1.2rem;"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></div>
</p>
<!-- .titleWrap -->
<div class="text">
<p class="text-black-50">
<?php
if ( mb_strlen( $post->post_content, 'UTF-8' ) > 70 ) {
$content = str_replace( '\n', '', mb_substr( strip_tags( $post->post_content ), 0, 70, '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(); ?>

実際の状況に合わせて、CSSと読み取り数を変更してください。

最後は.htaccessに、以下の内容を追加して、index.htmlをphpで処理するようにします。

<files index.html>
AddType application/x-httpd-php .html
</files>

以上で終了となります、実際のデザインに合わせてコードを変えてください。