(cache)4. フックを使ったカスタマイズを覚える＋アーカイブページを作る

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

4thステップであるこの記事では、WordPressのフックを使ったカスタマイズを覚えつつ、アーカイブページを作っていきます。

1. 0.アーカイブページ（archive.php）の役割をおさらい
2. 1. 投稿のカテゴリーを作る
3. 2.index.phpと同じ手順でarchive.phpの記事一覧を作る
4. 3.パンくず表示用のプラグイン「BreadcrumbNavXT」インストールする
5. 4.パンくず・表示中の一覧ページ名・説明を動的に表示する
6. 5.フックを使ってthe_archive_title( )をカスタムする
7. 演習課題：カテゴリー一覧・日付別一覧を作り、優先表示されてることを確認する
- 7.1. category.phpを作った途端に画面が真っ白になって困ったという方へ

0.アーカイブページ（archive.php）の役割をおさらい

『1.WordPressテーマの初期設定＋テンプレートファイルを作成』で、WordPressにはテンプレート階層という優先順位があると説明しました。

これから中身を作っていくarchive.phpはどんな役割かというと、一覧ページを表示するための最もベースになるテンプレートです。

表示優先度の概念も、まだ掴みきれてないと思いますので、この演習を進める中で理解していきましょう！

まずは「一覧系テンプレートの大元なんだ」と思ってもらえればOKです👍

1. 投稿のカテゴリーを作る

アーカイブページの動作確認用に、わかりやすいカテゴリーを1つ作っておきます。

『投稿 > カテゴリー』から、名前・スラッグ・説明を入力してカテゴリーを作ってください。

キーワード

スラッグ（slug）

カテゴリーを作ったら、今あるテスト投稿のうち、2~3件をそのカテゴリーに所属させてください。

これで表示確認用の準備は完了です。

2.index.phpと同じ手順でarchive.phpの記事一覧を作る

それでは、まずarchive.phpの記事一覧パーツを作っていきます。

category.htmlのソースをarchive.phpにコピペし、index.phpを作った時と同じ手順で記事一覧を表示させてください。

一応ソースコード貼っておきますが、コピペ厳禁です❗️

あくまで自分で作ったあとに、答えあわせで使ってくださいね。

entriesからページネーションまで

コピー
<?php
//記事があればentriesブロック以下を表示
if (have_posts() ) :
?>
<!-- entries -->
<div class="entries m_horizontal">
<?php
//記事数ぶんループ
while ( have_posts() ) :
the_post();
?>

<!-- entry-item -->
<a href="<?php the_permalink(); //記事のリンクを表示 ?>" class="entry-item">
<!-- entry-item-img -->
<div class="entry-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてれば大サイズで表示
the_post_thumbnail('large');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div><!-- /entry-item-img -->

<!-- entry-item-body -->
<div class="entry-item-body">
<div class="entry-item-meta">
<?php
// カテゴリー１つ目の名前を表示
$category = get_the_category();
if ($category[0] ) {
echo '<div class="entry-item-tag">' . $category[0]->cat_name . '</div><!-- /entry-item-tag -->';
}
?>
<!-- 公開日時を動的に表示する -->
<time class="entry-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y/n/j'); ?></time><!-- /entry-item-published -->
</div><!-- /entry-item-meta -->
<h2 class="entry-item-title"><?php the_title(); //タイトルを表示 ?></h2><!-- /entry-item-title -->
<div class="entry-item-excerpt">
<?php the_excerpt(); //抜粋を表示 ?>
</div><!-- /entry-item-excerpt -->
</div><!-- /entry-item-body -->
</a><!-- /entry-item -->
<?php
endwhile;
?>

</div><!-- /entries -->
<?php endif; ?>

<?php if (paginate_links() ) : //ページが1ページ以上あれば以下を表示 ?>
<!-- pagenation -->
<div class="pagenation">
<?php
echo
paginate_links(
array(
'end_size' => 0,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '<i class="fas fa-angle-left"></i>',
'next_text' => '<i class="fas fa-angle-right"></i>',
)
);
?>
</div><!-- /pagenation -->
<?php endif; ?>

正しく一覧表示できてるかの確認は、先ほど作ったカテゴリーのURL「ドメイン/category/slug/」で確認してください👍

「正しく作ったはずなのに、画面が真っ白だ！」という方は、テンプレート階層と表示の優先順位をもう一度確認してください。

3.パンくず表示用のプラグイン「BreadcrumbNavXT」インストールする

パンくずの表示には、僕はプラグイン『BreadcrumbNavXT』を使っています。

キーワード

パンくず

※わからない人は調べてくださいね

cssだけ用意しておけばインストール時のデフォ設定で事足りますし、表示の編集が必要になった時も設定で変えられるので愛用してます。

今回もデフォルト設定のまま使うので、インストールするだけでOKです。

カスタマイズする場合は、こちらの記事を参考にどうぞ。

4.パンくず・表示中の一覧ページ名・説明を動的に表示する

それでは、パンくず・表示中の一覧ページ名・説明を、それぞれ動的にしていきます。

キーワード

bcn_display( )
the_archive_title( )
the_archive_description( )

コピー
<!-- breadcrumb -->
<div class="breadcrumb">
<?php bcn_display(); //BreadcrumbNavXTのパンくずを表示するための記述 ?>
</div><!-- /breadcrumb -->

<div class="archive-head m_description">
<div class="archive-lead">ARCHIVE</div>
<h1 class="archive-title m_category"><?php the_archive_title(); //一覧ページ名を表示 ?></h1><!-- /archive-title -->
<div class="archive-description">
<p><?php the_archive_description(); //説明を表示 ?></p>
</div><!-- /archive-description -->
</div><!-- /archive-head -->

ここまで書けたら、カテゴリーページを確認してみてください。

表示か変わってれば、これでarchive.phpの必須設定は完了です👍

5.フックを使ってthe_archive_title( )をカスタムする

WPにはアクションフック・フィルターフックというカスタマイズ用の仕組みがあります。

WordPressのコアファイルやプラグインの機能に何か付け足したりしたいとき、フックを使うことで、そのコアファイルを直に編集しなくても機能をカスタマイズすることができます。

このアクションフック・フィルターフックの仕組みこそ、「WPが最も拡張性が高いCMS」と言われる所以です。

ざっくり実例で解説すると、初日に作った「my_script_init()」という関数も、wp_enqueue_scripts をアクションフックにして、読み込ませたいスタイルシートやjsをwp_head()で表示させるというカスタマイズを行なっています。

wp_head()を定義しているコアファイルをいじることなく、上記のカスタマイズができましたよね。

アクションフック・フィルターフックはこんな風に使います。

【フィルターフック一覧】
プラグイン API/フィルターフック一覧

【アクションフック一覧】
プラグイン API/アクションフック一覧

アクションフック、フィルターフックは種類も多いので、覚える必要はありません。

都度「こんなカスタマイズがしたい」と調べたものを使い回せばOKです！

参考になるリンク

もう開発で苦しまない！「フック」を理解したらWordPressは最強のCMSになる

WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方

ここら辺をしっかり理解するには技術書を読んだ方がいいので、本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版を読みましょうー！

それでは前置きが長くなりましたが、フィルターフックを使ってthe_archive_title( )をカスタムします。

the_archive_title( )を出力した時に、タイトルの前につく『カテゴリー: 』を消します。

キーワード

is-category()
is_tag()
is_date()

コピー
/**
* アーカイブタイトル書き換え
*
* @param string $title 書き換え前のタイトル.
* @return string $title 書き換え後のタイトル.
*/
function my_archive_title( $title ) {

if ( is_category() ) { // カテゴリーアーカイブの場合
$title = '' . single_cat_title( '', false ) . '';
} elseif ( is_tag() ) { // タグアーカイブの場合
$title = '' . single_tag_title( '', false ) . '';
} elseif ( is_post_type_archive() ) { // 投稿タイプのアーカイブの場合
$title = '' . post_type_archive_title( '', false ) . '';
} elseif ( is_tax() ) { // タームアーカイブの場合
$title = '' . single_term_title( '', false );
} elseif ( is_author() ) { // 作者アーカイブの場合
$title = '' . get_the_author() . '';
} elseif ( is_date() ) { // 日付アーカイブの場合
$title = '';
if ( get_query_var( 'year' ) ) {
$title .= get_query_var( 'year' ) . '年';
}
if ( get_query_var( 'monthnum' ) ) {
$title .= get_query_var( 'monthnum' ) . '月';
}
if ( get_query_var( 'day' ) ) {
$title .= get_query_var( 'day' ) . '日';
}
}
return $title;
};
add_filter( 'get_the_archive_title', 'my_archive_title' );