【プラグイン不要！】ターム一覧を自動で表示する方法

WordPressのカスタムタクソノミーを自動表示に対応させておくと、顧客がタームを増やしくなった際にもストレスなく作業ができるようになります。今回はプラグインを使用せずにカスタムタクソノミーのタームを自動表示する方法を見てみましょう。

そもそもタクソノミーとは？

タクソノミーとは、ウェブサイトのコンテンツを整理し、分類するためのシステムのことです。WordPressでは、投稿をカテゴリーやタグによって分類することができます。これらはWordPressのデフォルトのタクソノミーですが、ユーザーは独自のカスタムタクソノミーを作成することも可能です。
カスタムタクソノミーを利用することで、特定の投稿タイプに対してより詳細な分類やグループ化を行うことができ、サイトのナビゲーションを向上させたり、コンテンツの発見を容易にすることができます。例えば、レシピサイトであれば、「料理の種類」や「調理時間」、「食材」などのカスタムタクソノミーを設定することが考えられます。これにより、訪問者は自分の興味やニーズに応じて簡単にコンテンツを見つけることができるようになります。

プラグインを使わないメリット

WordPressサイトを運営する際、プラグインは様々な機能を簡単に追加できる便利なツールです。しかし、プラグインを使用せずに機能を実装することには、いくつかの重要なメリットがあります。

1. パフォーマンスの向上
   プラグインは便利ですが、多くの場合、サイトの読み込み時間に影響を及ぼします。特に、複数のプラグインを同時に使用すると、サーバーへの負荷が増大し、ページの表示速度が遅くなる可能性があります。プラグインを使用せずに必要な機能をコードで直接実装することで、不要なスクリプトやスタイルシートの読み込みを避け、サイトのパフォーマンスを向上させることができます。
2. セキュリティの向上
   プラグインは第三者によって開発されており、時にはセキュリティの脆弱性を含んでいることがあります。これらの脆弱性は、サイトへの攻撃や不正アクセスの入り口となり得ます。プラグインを使用しないことで、これらのリスクを最小限に抑えることができます。また、自身でコードを管理することで、セキュリティのアップデートや問題の修正に迅速に対応できます。
3. カスタマイズの自由度の向上
   プラグインは汎用的に設計されており、特定のニーズに完全に合致しない場合があります。プラグインを使わずに直接コードを書くことで、サイトの特定の要件に合わせて細かいカスタマイズが可能になります。これにより、よりユーザーのニーズに合わせたサイトを構築できます。
4. 依存性の削減
   プラグインに依存すると、そのプラグインが更新されなくなったり、互換性の問題が生じたりした場合に問題が発生します。自身で機能をコード化することで、プラグインの作者や外部の更新スケジュールに依存せずに済みます。これにより、サイトの長期的なメンテナンスと運用が容易になります。
5. 学習と成長
   自身で機能を実装する過程では、WordPressのコアとなる技術やプログラミングに関する深い理解が得られます。将来的により複雑なカスタマイゼーションや問題解決を行う際に非常に価値のあるスキルとなります。

もちろん、すべての機能を自分でコーディングすることは時間がかかる場合があるのでケースバイケースですが、今回はこういったメリットからプラグインなしでやってみます。

基礎編：ターム一覧を自動で表示する

カスタムタクソノミーを取得する

まずは、カスタムタクソノミーを表示するためのPHPコードを準備します。以下のコードをテーマファイルの適切な位置（例えばarchive-your-type.phpなど、特定のテンプレートファイル）に挿入してください。ここでは、先ほどご紹介したget_categories() 関数を利用してカスタムタクソノミーのリストを取得しています。この関数には、カスタムタクソノミーの情報を指定するための引数配列が必要です。

<?php
$argsTaxonomy = [
    'type' => 'your-type', // 投稿タイプを選択
    'taxonomy' => 'your-taxonomy', // タクソノミー名を選択
];
$taxonomyList = get_categories($argsTaxonomy);
?>

‘type’ => ‘your-type’ と ‘taxonomy’ => ‘your-taxonomy’ の部分は、表示したい投稿タイプとタクソノミー名にそれぞれ置き換えてください。
get_categories()により、この特定の投稿タイプに関連付けられたカスタムタクソノミーの項目が取得されます。

取得したカスタムタクソノミーを出力する

取得したタクソノミーのリストをウェブサイト上に表示するためには、HTMLとPHPの組み合わせを使用します。<ul>タグでリストを始め、各タクソノミー項目を<li>タグ内に配置します。
先ほどのphpの下に記述してください。

<ul class="term_list">
    <li>
        <a href="<?php echo esc_url(home_url('/your-post-slug')); ?>">すべて</a>
    </li>
    <?php if ($taxonomyList) : ?>
        <?php foreach ($taxList as $value) : ?>
            <li>
                <a href="<?php echo esc_url(get_term_link($value)); ?>"><?php echo esc_html($value->name); ?></a>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

このコードのポイントは、取得した各タクソノミー項目に対して、get_term_link($value)を使用してそのタクソノミー項目のページへのリンクを生成することです。これにより、ユーザーは各タクソノミー名をクリックすることで、そのタクソノミーに属する投稿のリストを見ることができます。

完成したコード

上記のコードを合わせて記述することで、自動表示のカスタムタクソノミーが完成しました！

<?php
$argsTaxonomy = [
    'type' => 'your-type', // 投稿タイプを選択
    'taxonomy' => 'your-taxonomy', // タクソノミー名を選択
];
$taxonomyList = get_categories($argsTaxonomy);
?>
<ul class="term_list">
    <li>
        <a href="<?php echo esc_url(home_url('/your-post-slug')); ?>">すべて</a>
    </li>
    <?php if ($taxonomyList) : ?>
        <?php foreach ($taxList as $value) : ?>
            <li>
                <a href="<?php echo esc_url(get_term_link($value)); ?>"><?php echo esc_html($value->name); ?></a>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

応用編：現在アクティブなタームにはclassを追加する

現在アクティブなタームにclassを追加するには、以下のような考え方が必要です。

1. 現在表示しているアーカイブページのタームを取得する
2. 出力したカスタムタクソノミーそれぞれのスラッグを取得する
3. 現在表示しているアーカイブページのタームと出力したカスタムタクソノミーのスラッグを比較し、同じならばclass=”current”をつける

順を追ってみてみましょう

現在表示しているアーカイブページのタームを取得する

まずは現在表示しているアーカイブページのタームを取得します。現在に関わる場所なので、ループの外に書くようにしましょう。

<?php $current_term = get_query_var('term'); ?>

get_query_var(‘term’)を使用して現在表示しているアーカイブページのタームのスラッグを取得できる理由は、WordPressがクエリ変数を通じてページに関連する情報を管理しているからです。WordPressはリクエストされたページをロードする際、URLから様々なクエリ変数を解析し、それらの情報を使用してコンテンツを取得・表示します。タームのアーカイブページにアクセスすると、そのタームに関連するクエリ変数が設定されます。get_query_var関数は、これらのクエリ変数から特定の値を取得するために使用されるため、’term’を指定することで現在のタームのスラッグを取得できるのです。

出力したカスタムタクソノミーそれぞれのスラッグを取得する

今度はそれぞれのスラッグを取得したいので、必ずループ（ foreach ）内に書くようにしましょう。

<?php $catSlug = $value->slug; ?>

$catSlug = $value->slug; をループ内に入れることでスラッグが取得できるのは、この行が各タクソノミー項目（$value）のスラッグプロパティにアクセスしているためです。WordPressでは、カスタムタクソノミー項目を含む各種のオブジェクトが様々なプロパティを持っています。ループを使用してタクソノミーのリストを表示するとき、各繰り返しで現在の項目（$value）が次の項目に更新されます。そのため、$value->slug;はその繰り返しのタクソノミー項目のスラッグを取得し、$catSlugに代入します。これにより、各タクソノミー項目のスラッグを取得し、それを後続のコードで使用することができるようになります。
これでそれぞれのスラッグ情報が取得できました。

取得した2つのスラッグを比較し、同じならばclass=”current”をつける

最後に、取得した2つのスラッグを比較し、同じならばclass=”current”というhtmlを出力します。ループ内にあるliタグ部分を以下のように書き換えます。

<li <?php if ($catSlug == $current_term) {
    echo 'class="on"';
} ?>>
    //省略
</li>

重要なのはこの部分です。

<?php if ($catSlug == $current_term) {
echo 'class="on"';
} ?>

この部分が、「出力したカスタムタクソノミーのスラッグと現在表示しているアーカイブページのタームを比較し、一致（==）ならば class=”on”を出力する」というphpです。

完成したコード

上記の工程をまとめると、このようになります。

<?php
$current_term = get_query_var('term');
$argsTaxonomy = [
    'type' => 'your-type', // 投稿タイプを選択
    'taxonomy' => 'your-taxonomy', // タクソノミー名を選択
];
$taxonomyList = get_categories($argsTaxonomy);
?>
<ul class="term_list">
    <li>
        <a href="<?php echo esc_url(home_url('/your-post-slug')); ?>">すべて</a>
    </li>
    <?php if ($taxonomyList) : ?>
        <?php foreach ($taxList as $value) : ?>
            <?php $catSlug = $value->slug; ?>
            <li <?php if ($catSlug == $current_term) {
                echo ' class="on"';
            } ?>>
                <a href="<?php echo esc_url(get_term_link($value)); ?>"><?php echo esc_html($value->name); ?></a>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

まとめ

プラグインなしでカスタムタクソノミーのタームを自動で表示する方法、および自動でアクティブなclassをつける方法をご紹介しました。この技術を利用するにはWordPressの基本的なコーディングの知識が必要ですが、この記事通りに作業すればある程度簡単に実装できます。