トップへ戻る
BLOGS

WordPress カテゴリーのドロップダウンリストを創る

WordPress カテゴリーのドロップダウンリストを創る

今回はWordPressの関数を使ってカテゴリー(タクソノミー)のドロップダウンリストを

作成し、jsも使って選択したらページ遷移するようにしたいと思います。

状況としては、、

  1. ojako
  2. ハーちゃん
  3. くじら
  4. イルカ
  5. アザラシ
  6. さば
  • カスタム投稿タイプである
  • カスタム投稿シングルページである

という状況なのでそれに適した関数を使用します。

簡単に答えのコードはこちら

<div class="category_list">
    <?php
    $categories = get_categories(array('taxonomy' => 'oja_cat'));
    if (!empty($categories)) :?>
    <select name="dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
      <option value="" selected="selected">カテゴリーを選択</option>
      <?php foreach ( $categories as $category ): ?>
      <option value="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>"><?php echo esc_html( $category->name ); ?></option>
      <?php endforeach; ?>
    </select>
  </div>
<?php endif; ?>

一つづつコードの説明をします。

カテゴリーのオブジェクトを取得する

$categories = get_categories(array('taxonomy' => 'oja_cat'));

get_categories($args)

get_categories()は、配列で指定するパラメータにマッチするカテゴリーのオブジェクトを配列として返します。

パラメータの内容は wp_list_categories とほぼ同じで、クエリ文字列形式でも配列形式でも渡すことができます。

ということなので上の例文では配列arrayにtaxonomyがoaj_catのタクソノミーを取得して変数に格納しています。

if (!empty($categories)) :

emptyはPHPの関数で、これにより変数の中身が入っているか確認しています。

<?php foreach ( $categories as $category ): ?>

foreachは先程変数に格納したオブジェクトから$categoryへ中身の値を順番に取り出すようになります。

<option value="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>"><?php echo esc_html( $category->name ); ?></option>
      <?php endforeach; ?>

esc_url esc_html

これら2つの関数はphpのechoで出力する際にhttps: などの文字や記号をHTMLとしてURLとして正しく出力させる関数になります。

_wp_specialchars() やclean_url()などにたような関数もありますがこれらは

2021.4.1現在は非推奨となっていたため使うことは避けましょう。

get_category_link( $category_id ); 


WordPress Codex 日本語版について

こちらの関数は指定したカテゴリー ID の正しい URL(カテゴリーアーカイブページへのリンク)を PHP の値として返します。

ということで引数にしていするカテゴリーIDとして先程foreachした変数から値を取り出します。

get_category_link( $category->term_id ) );

ー>の記号で配列変数$categoryからterm_idを取得表示し、get_category_link( );の引数に指定します。

echo esc_html( $category->name );

上と同じことをカテゴリーネームでも使用し<option>タグのvalueの中身として

<select>タグに渡してあげます。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA