WordPressのちょこっとレシピ(その2)
前回は静的サイトにWordPressを共存させるための前準備を行いました。
今回はhtmlで作ったお知らせページにWordPressの投稿記事を表示させてみます。
【目次】
その1)静的サイトとWordPressを共存させるための前準備
その2)お知らせページにWordPressの投稿記事を表示
その3)TOPページにWordPressの投稿記事を表示
その4)お問い合わせフォームをWordPressのContact form 7で作る
記事を表示するための静的ページを用意する
今回使用したソースは、お知らせページが用意されていなかったので、「お知らせページ」を新規作成し、「お知らせ」メニューを追加しました。
「お知らせページ」はsample.htmlをコピーしてnews.htmlというファイル名に変更します。
メインコンテンツはWordPressの記事を挿入するため削除します。
作成したnews.htmlを開くと下記のような状態です。
「お知らせ」メニューは「会社概要」があったところに入れ、news.htmlにリンクを貼ります。
静的ページの先頭でwp-load.phpを読み込む
先ほど作成した、news.htmlの1行目に下記コードを追記します。
<?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円となります。
この記事が気に入ったらサポートをしてみませんか?