WordPressのちょこっとレシピ（その２）

前回は静的サイトにWordPressを共存させるための前準備を行いました。
今回はhtmlで作ったお知らせページにWordPressの投稿記事を表示させてみます。

【目次】
その１）静的サイトとWordPressを共存させるための前準備
その２）お知らせページにWordPressの投稿記事を表示
その３）TOPページにWordPressの投稿記事を表示
その４）お問い合わせフォームをWordPressのContact form 7で作る

記事を表示するための静的ページを用意する

今回使用したソースは、お知らせページが用意されていなかったので、「お知らせページ」を新規作成し、「お知らせ」メニューを追加しました。

「お知らせページ」はsample.htmlをコピーしてnews.htmlというファイル名に変更します。

メインコンテンツはWordPressの記事を挿入するため削除します。
作成したnews.htmlを開くと下記のような状態です。

「お知らせ」メニューは「会社概要」があったところに入れ、news.htmlにリンクを貼ります。

静的ページの先頭でwp-load.phpを読み込む

先ほど作成した、news.htmlの１行目に下記コードを追記します。

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

これを追加することで、このhtml内にてPHPの実行が可能となります。

なお、requireの他にincludeでも読み込みが可能です。
違いとしては、requireの場合、読み込みに失敗するとエラー画面が表示されますが、includeの場合、読み込みに失敗しても特にエラーとならず、phpの部分を除いて画面表示されます。

WordPressの記事一覧を表示する

記事一覧を表示したい箇所にphpでコーディングします。
全記事のサムネ画像・カテゴリ・タイトル・投票日・著者・抜粋を表示する場合は下記のようなコードを記載します。

<?php
global $max_num_page;
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged,
);
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post();
?>

<article <?php post_class( 'article-list' ); ?>>
   <a href="<?php the_permalink(); ?>">
       <div class="img-wrap">
       <!--画像を追加-->
       <?php if( has_post_thumbnail() ): ?>
       <?php the_post_thumbnail('medium'); ?>
       <?php else: ?>
       <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
       <?php endif; ?>
       <!--カテゴリ-->
       <?php if (!is_category() && has_category()): ?>
       <span class="cat-data">
       <?php
           $postcat = get_the_category();
           echo $postcat[0]->name;
       ?>
       </span>
       <?php endif; ?>
       </div><!--end img-warp-->
       <div class="text">
       <!--タイトル-->
       <h2><?php the_title(); ?></h2>
   
       <!--投稿日を表示-->
       <span class="article-date">
           <i class="far fa-clock"></i>
           <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
           <?php echo get_the_date(); ?>
           </time>
       </span>
       <!--著者を表示-->
       <span class="article-author">
           <i class="fas fa-user"></i><?php the_author(); ?>
       </span>
       <!--抜粋-->
       <?php the_excerpt(); ?>
       </div><!--end text-->
   </a>
</article>

<?php endwhile; wp_reset_postdata(); ?>
<?php
if ($the_query->max_num_pages > 1) {
echo '<div class="pagination">';
echo paginate_links( array(
	'base' => get_pagenum_link(1).'%_%',
	'format' => 'page/%#%/',
	'current' => max(1, $paged),
	'total' => $the_query->max_num_pages,
	'type' => 'list',
	'mid_size' => '1',
	'prev_text' => '«',
	'next_text' => '»'
	) );
echo '</div>';
}
?>

この状態で一度news.htmlを見てみましょう。
PHPが正常に動いていれば下記のように表示されます。

やったー！出てきた！
と喜んだのもつかの間、記事一覧のリンクを押すとInternal Server Errorとなりました。。

最後にこのエラーを解消しましょう。

ルートディレクトリ直下の.htaccessの編集

記事詳細ページのパーマリンクは ”http://XXXXX.net/2020/03/12/hello-world/” となっています。実際のソースはwpフォルダ配下にあるため、上記URLに接続時、wp配下にリライトするように変更します。

ルートディレクトリ直下の.htaccessに下記を追記してください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

これで記事詳細ページに遷移できるようになりました。

**

今日は以上です。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

note専用コミュニティへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。