前回はサイト構成とトップページについてお話ししましたが、今回はデフォルトの投稿タイプについて解説していきます。
前回の記事はこちらからどうぞ↓
前回策定したサイトマップを再掲しておきます。
| ページ名 | URL | テンプレートファイル |
|---|---|---|
| トップページ | / | front-page.php |
| ブログ （デフォルトの投稿タイプ） | /blog/ /blog/カテゴリー名/ /blog/カテゴリー名/ブログのスラッグ/ | archive.php category.php single.php |
| 新着情報 （カスタム投稿タイプ） | /news/ /news/タクソノミー名/ /news/タクソノミー名/新着のスラッグ/ | archive-news.php taxonomy.php single-news.php |
| 会社情報 | /company/ | page-company.php |
| お問い合わせ | /contact/ | page-contact.php |
| プライバシーポリシー | /privacy-poricy | page.php |
今回解説していくのはこちらの「ブログ」になります。
アーカイブページ（/blog/）
archive.php
簡単なページ構成はこちら
<h2><?php post_type_archive_title(); ?>一覧</h2>
<ul class="post-contents">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<li>
<a href="<?php the_permalink(); ?>">
<dl>
<dt class="blog-image"><?php categories_label() ?>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/common/images/no-image.jpg" alt="画像が設定されていません">
<?php endif; ?>
</dt>
<dd class="blog-text">
<span class="date"><?php the_time('Y-m-d'); ?></span>
<dl>
<dt><?php title_excerpt(40); ?></dt>
<dd><?php the_excerpt(); ?></dd>
</dl>
</dd>
</dl>
</a>
</li>
<?php
endwhile;
endif;
?>
</ul>
<div id="pager">
<ul class="pager-contents">
<?php page_navi(); ?>
</ul>
</div>まず<?php post_type_archive_title(); ?>で投稿のスラッグをh2で見出しとして使用しています。
投稿のループはメインループが使用できるので、
（ループについての記事はこちらから）
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<li>
<!-- ループしたい投稿の内容 -->
</li>
<?php
endwhile;
endif;
?>こちらでループを回します。
最初なので細かく解説しますが、
<?php the_permalink(); ?>こちらで投稿のurlを取得
<?php categories_label() ?>こちらでclass付きのカテゴリーのターム名を取得ラベルとして使用。
詳しくはこちらの記事を参照して下さい。
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/common/images/no-image.jpg" alt="画像が設定されていません">
<?php endif; ?>こちらではアイキャッチ画像が指定されていれば、サムネイルとして使用し、なければ指定されたノーイメージ画像を表示させています。
<?php the_time('Y-m-d'); ?>こちらで投稿の日付を表示。「Y-m-d」で「2023-11-09」のように表示されます。例えばこちらを「Y/m/d」とすれば「2023/11/09」と変わります。
<?php title_excerpt(40); ?>こちらは自作の関数を呼び出しています。タイトルの文字数制限を（）内の文字に指定する（ここでは40文字）functions.phpに記入した以下の関数になります。
// タイトルの文字数が$num文字を超えたら省略して[…]を付与する
function title_excerpt($num)
{
echo wp_trim_words( get_the_title(), $num , '…' );
}こちらについてはこちらの記事で詳しく解説してますので参考にしてください。
<?php the_excerpt(); ?>こちらで記事の抜粋を表示させています。抜粋を入力していない場合は投稿内容の最初の 55個の単語までを表示しますが、日本語のように語句の間を半角スペースで区切らない言語だとうまく表示されず全文表示されてしますこともあるそう。基本的には抜粋で管理することが望ましいです。
<?php page_navi(); ?>こちらもページャーを読み込むfunctions.phpに記載した自作の関数を呼び出しており、関数は以下になります。
//ページネーションを追加
function page_navi()
{
the_posts_pagination(array(
'mid_size' => 2,
'prev_next' => false,
));
}カテゴリーのアーカイブ（/blog/カテゴリー名/）
category.php
内容はarchive.phpとほぼ変わりません。
<h2><?php single_cat_title(); ?>一覧</h2>
<ul class="post-contents">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<li>
<a href="<?php the_permalink(); ?>">
<dl>
<dt class="blog-image"><?php categories_label() ?>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php else : ?>
<img src="<?php echo get_template_directory_uri(); ?>/common/images/no-image.jpg" alt="画像が設定されていません">
<?php endif; ?>
</dt>
<dd class="blog-text">
<span class="date"><?php the_time('Y-m-d'); ?></span>
<dl>
<dt><?php
title_excerpt(40);
?></dt>
<dd><?php the_excerpt(); ?></dd>
</dl>
</dd>
</dl>
</a>
</li>
<?php
endwhile;
endif;
?>
</ul>
<div id="pager">
<ul class="pager-contents">
<?php
page_navi();
?>
</ul>
</div>変更点はカテゴリー名を呼び出す以下の記述のみです。
<?php single_cat_title(); ?>投稿ページ（/blog/カテゴリー名/ブログのスラッグ/）
single.php
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<?php
$cats = get_the_category();
$cat = $cat[0];
$cat_id = $cat->cat_ID;
$cat_slug = $cat->slug;
$cat_name = $cat->name;
?>
<p><a href="<?php echo esc_url(get_category_link($cat_id)); ?>"><span class="cate-label <?php echo esc_html($cat_slug); ?>">
<?php echo esc_html($cat_name); ?></span></a></p>
<h1><?php the_title(); ?></h1>
<div class="flex-between">
<ul class="sns-icon">
<li>
<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-width="" data-layout="button" data-action="" data-size="" data-share="true"></div>
</li>
<li><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-lang="ja" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
</ul>
<p class="date"><?php the_time('Y-m-d'); ?></p>
</div>
<?php if (has_post_thumbnail()) : ?>
<figure>
<?php the_post_thumbnail(); ?>
</figure>
<?php endif; ?>
<div id="contents-area">
<?php the_content(); ?>
</div>
<?php
endwhile;
endif;
?>投稿に関してはあまりテンプレ化した内容もないので作りたいページによってまちまちかと思います。
今回私が疑似で作成したブログページにはカテゴリ―ページにリンクするカテゴリーのラベル、facebookとツイッターへの公式SNSシェアボタンを設けています。
カテゴリ―ページにリンクするカテゴリーのラベル
<?php
$cats = get_the_category();
$cat = $cats[0];
$cat_id = $cat->cat_ID;
$cat_slug = $cat->slug;
$cat_name = $cat->name;
?>
<p><a href="<?php echo esc_url(get_category_link($cat_id)); ?>"><span class="cate-label <?php echo esc_html($cat_slug); ?>">
<?php echo esc_html($cat_name); ?></span></a></p>こちらで現投稿のカテゴリー名をリンク付きで取得して表示してます。カテゴリー名をリンク付きで表示するのみならば
<?php the_category(' '); ?>が使えるのでもっと簡単に実装できそうなのですが、複数のカテゴリーに所属している記事の場合すべてのターム名を取得してしまします。そのため今回
$cats = get_the_category();
$cat = $cats[0];とすることでカテゴリーの配列から一番目のカテゴリーのみを取り出しています。
SNSアイコン
<ul class="sns-icon">
<li>
<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-width="" data-layout="button" data-action="" data-size="" data-share="true"></div>
</li>
<li><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-lang="ja" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
</ul>アイコンはそれぞれFacebookとTwitterの公式アイコンを表示していますので難しいことはありませんが、一点引っ越しなども考慮して現在のページURLをget_permalink();で取得してURLエンコードに代入して表示させています。
コメント