(cache)6. 固定ページを作る+サイトの保守性を高める

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

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

前回の記事はこちら↓

5thステップであるこの記事では、page.phpで固定ページを作る＋サイトの保守性を高めていきます。

1. 1. page.phpを編集し、固定ページを作る
2. 2. 共通化できるパーツをさらに細かくテンプレート化する
3. 3. 独自関数を定義する＋ファイルを分割して管理する
4. 演習課題：パーツをテンプレート化＋タグ一覧の取得を関数化する

1. page.phpを編集し、固定ページを作る

前回の記事で投稿ページ（single.php）を作りました。

固定ページ（page.php）は、タグ一覧・関連投稿・サイドバーを消してワンカラムにしただけのバージョンです！

これは特に説明する必要ないと思いますので、実装済みのsingle.phpのコードをコピペし、page.htmlと比較して完成させてください👍

2. 共通化できるパーツをさらに細かくテンプレート化する

これまでheader.phpやfooter.phpなど必須ファイルのテンプレート化を進めてきましたが、テンプレート化すべきなのは必須ファイルだけではありません。

共通化できるパーツは、できるだけ個別テンプレートに分けて管理しましょう。

具体例を説明していきます。

現在、ページネーションを表示するための記述はindex.phpとarchive.phpにそれぞれ記載されてます。

この状態では、仮にmid_sizeを2に変更した場合、index.phpとarchive.phpを両方修正しなければいけません。

コピー
<?php if (paginate_links() ) : //ページが1ページ以上あれば以下を表示 ?>
<!-- pagenation -->
<div class="pagenation">
<?php
echo
paginate_links(
array(
'end_size' => 0,
'mid_size' => 1, //もし2に変更した場合、両方のファイルを修正する必要がある
'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; ?>

いまは2箇所なのでまだいいですか、これが10箇所にもなると修正だけでかなりの手間ですよね。

どのファイルに記述したのかを把握しきれず、修正漏れのリスクも上がります。

これらを共通パーツ化していくので、まずthemesフォルダの直下に『template-parts』フォルダを作ってください。

フォルダ名は何でもいいですが、パーツ化したテンプレートが入ってるんだということが明示的にわかる名前がいいです。

『template-parts』フォルダを作ったら、その中にpagenation.phpを作り、上記のページネーションを表示するためのコードをコピペしてください。

『テーマフォルダ/template-parts/pagenation.php』という構成になりました。

このpagenation.phpを、index.phpとarchive.phpで読み込みます。

キーワード

get_template_part()

index.php、archive.phpのページネーション記述を置き換える

コピー
<?php get_template_part('template-parts/pagenation'); ?>

これでページネーションのパーツをテンプレート化できました。

こうしてテンプレート化して管理しておけば、ページネーションのコードを変更する必要が出たときも、pagenation.phpだけを編集すれば、全ての表示箇所が修正されます👍

サイトの保守性を高めるため、共通化できるパーツはテンプレートに分けて管理を心がけましょう！

また複数ファイルで使うパーツ以外にも、今後使いまわす可能性があるパーツや、関数を記述した場所を明確にする目的でもテンプレート化しておくと便利です。

これまでに作ったパーツでいうと、シェアボタンエリアや関連記事の表示などもパーツ化しておくといいですね。

3. 独自関数を定義する＋ファイルを分割して管理する

index、archive、single、これまで作ってきたファイル全てで『postが所属するカテゴリーの取得』がありました。

コピー
<?php
// カテゴリー１つ目の名前を表示
$category = get_the_category();
if ($category[0] ) {
echo '<div class="entry-item-tag">' . $category[0]->cat_name . '</div><!-- /entry-item-tag -->';
}
?>

この部分ですね。これをfunctions.phpに記述し、関数として使っていきましょう。

キーワード

global $post

functions.phpに追記するコード

コピー
<?php
/**
* カテゴリーを1つだけ表示
*
* @param boolean $anchor aタグで出力するかどうか.
* @param integer $id 投稿id.
* @return void
*/

function my_the_post_category( $anchor = true, $id = 0 ) {
global $post;
//引数が渡されなければ投稿IDを見るように設定
if ( 0 === $id ) {
$id = $post->ID;
}

//カテゴリー一覧を取得
$this_categories = get_the_category( $id );
if ( $this_categories[0] ) {
if ( $anchor ) { //引数がtrueならリンク付きで出力
echo '<a href="' . esc_url( get_category_link( $this_categories[0]->term_id ) ) . '">' . esc_html( $this_categories[0]->cat_name ) . '</a>';
} else { //引数がfalseならカテゴリー名のみ出力
echo esc_html( $this_categories[0]->cat_name );
}
}
}

これでmy_the_post_categoryという関数を使えるようになりました。

index.phpやsingle.phpの該当箇所を置き換えていきましょう！

コピー

<!-- trueを引数として渡すとリンク付き、falseを渡すとリンクなし -->
<div class="entry-item-tag"><?php my_the_post_category( false ); ?></div><!-- /entry-item-tag -->

テンプレート分割の場合と同じく、よく使うコードは関数化しておくと保守性が上がります。

こちらもテクニックとして必ず覚えておいてください。

演習課題：パーツをテンプレート化＋タグ一覧の取得を関数化する

まず、シェアボタンエリアや関連記事などをテンプレート化してみましょう。

それができたら、single.phpで使ったタグ一覧の取得を関数化してみてください。

解答例コードは以下に貼っておきますが、必ず自分でコードを書いてみてから、参考に確認するようにしてくださいね❗️

functions.phpの解答例コード

コピー

/**
* タグ取得
*
* @param integer $id 投稿id.
* @return void
*/
function my_get_post_tags( $id = 0 ) {
global $post;
//引数が渡されなければ投稿IDを見るように設定
if ( 0 === $id ) {
$id = $post->ID;
}
//タグ一覧を取得
$tags = get_the_tags( $id );

if ( $tags ) {
foreach( $tags as $tag ){
echo '<div class="entry-tag-item"><a href="'. esc_url( get_tag_link($tag->term_id) ) .'">'. esc_html( $tag->name ) .'</a></div><!-- /entry-tag-item -->';
}
}
}

single.php

コピー
<!-- entry-tag-items -->
<div class="entry-tag-items">
<div class="entry-tag-head">タグ</div><!-- /entry-tag-head -->
<?php my_get_post_tags(); ?>
</div><!-- /entry-tag-items -->