【WordPress】タグのドロップダウンメニューを作成する方法!

WordPressで東京の紹介サイトを作成しようとした時に、遊びたい場所や落ち着く場所、ゆっくりしたい場所などジャンルを分けて作成したいと思ったことはありませんか?

もし、そのようなケースに陥った場合はタグを使用することで解決することができます。

タグとは記事の中の重要なキーワードを表現するのに使用され、タグを設定することで「遊びたい」や「ゆっくりしたい」など、キーワードに関係する記事を見つけることができるようになります。

そのため、ジャンルで検索したいと思った場合にはタグをドロップダウンメニューとして表示するとユーザーにとっては探しやすくて使いやすいサイトになります。

今回は、WordPressでタグのドロップダウンメニューを作成する方法について以下の内容で解説していきます。

⚫︎ タグのドロップダウンメニューを作成するには
⚫︎ タグのドロップダウンメニューを作成する方法

⚫︎ タグにドロップダウンメニューに記事の件数を表示する方法
⚫︎ ドロップダウンメニューの検索からそれぞれのタグのページに飛ぶ方法

タグのドロップダウンメニューを作成するには

結論をいうと、タグのドロップダウンメニューを作成するには自分で作成する必要があります。

カテゴリーにはwp_dropdown_categories()という、WordPress上で準備されているメソッドがありましたが、タグのドロップダウンメニューのメソッドはありません。

その為、タグのドロップダウンメニューの作成する場合はfunction.phpにオリジナルの関数を作成するか、作成したい場所に直接書き込む必要があります。

WordPressでカテゴリーのドロップダウンメニューの作成する方法についてはこちらをご参考ください

タグのドロップダウンメニューを作成する方法

タグのドロップダウンメニューを作成する方法について紹介します。

selectタグとoptionタグを記載する

まずは、タグのドロップダウンメニューを作成したい場所にselectタグとoptionタグを記載します。

例えば、Topページでドロップダウンメニューを作成してみます。

front-page.php

出力結果

selectタグとoptionタグを記載することでドロップダウンの骨組みを作成することができます。

selectタグとoptionタグの中にphpを追記する

ドロップダウンの骨組みを作成できましたら、selectタグとoptionタグの中に下記のようなphpを追記していきます。

front-page.php

出力結果

wordPressの関数であるgetTag()でタグ名を取得し、取得できる場合は、getTag()で取得したタグをforeachで取り出し、タグ名で表示するようにしています。

タグにドロップダウンメニューに記事の件数を表示する方法

タグにドロップダウンメニューに記事の件数を表示する方法を紹介します。

front-page.php

出力結果

28行目の$tag->countをechoで呼び出すことでそれぞれのタグの件数を表示しています。

ドロップダウンメニューの検索からそれぞれのタグのページに飛ぶ方法

ドロップダウンメニューの検索からそれぞれのタグのページに飛ぶ方法を紹介します。
タグのページに飛べるように「tag.php」を作成してください。

front-page.php

tag.php

出力結果

ドロップダウンメニューをformタグで囲むことでそれぞれのタグのページに飛ぶことができます。

今回のポイント

オリジナルでタグのドロップダウンメニューを作成

⚫︎ WordPressでタグのドロップダウンメニューを作成するには、オリジナルで作成する必要がある

⚫︎ タグのドロップダウンメニューの作り方としてはselectタグとoptionタグの中にphpでタグ名を取得するgetTag()と、foreachでgetTag()で取得したタグを取り出す

⚫︎ ドロップダウンメニューで各タグの記事の件数を表示する場合は$tag->countを指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し