ブログにタグ一覧ページを作った(ワードプレス)

こんにちは。フライ(@flyingfry)です。

当サイトはワードプレスで運営しているのだが、サイト内で似たようなテーマの記事を探す時はタグが便利。

これまではタグ一覧ページがなかったので、サイドバーのタグクラウドから飛ぶか、どれかひとつ記事を開いてタイトル下のタグ一覧から飛ぶしかなかった。

だがサイドバーのタグクラウドはスマホで見ると下の方に出てくるのと表示タグ数が少ないのが難点。記事からタグを選ぶのはひと手間余計にかかってしまう。

本当にタグ一覧ページを導入したかったのは別サイトなのだが、まず当ブログ(ザ・バズーカ)で試しに導入してみた。»完成したタグ一覧ページ

その結果画面の一番上のアイコンが四つ並んでいるうちの、左から二番目のタグアイコンをクリック/タップするとタグ一覧ページに飛べるようになった。

スポンサーリンク

プラグインなしで実現する

そういうプラグインがあるのかどうかは知らないが、この手の改造はプラグインなしでやるのが定番である。プラグインだと動作が重くなる(気がする)し開発終了すると使えなくなるからというのがその理由。

タグ一覧ページ作成手順を書くと以下の通り。使用テーマはTwenty Twelveなのでテーマによって若干の違いはあるかも。

  1. タグ表示用のテンプレートファイルを作ってサーバにアップ
  2. 管理画面の固定ページ新規作成からタグ表示用ページを作る
  3. 公開してヘッダのリンクから飛べるようにする

タグ表示用テンプレート

タグ表示用のテンプレートファイルを作ったら作業は九割完了である。

このファイルは使用中テーマフォルダの中の「page-templates」フォルダのファイルのどれかを同じ場所にコピーして名前をtaglist.php等に変更する(テーマによってフォルダが違うかも)。ファイルの中身は最初の方のTemplate Name: の右側を任意の名前に変える。

そしてタグを取得して表示するためのPHPコードをファイル内の適切な位置にコピペする。サーバ内でコピーするのではなく一回パソコンにダウンロードしてファイル名を変えてコードを貼って再びアップするのが良い。

自分はこちらのサイトの「wp_tag_cloud() を使ってタグを表示」のコードを全面的に利用させてもらった。

作ったタグ表示用ファイルは上記ページに書いてあったコードの表示数や表示条件などを若干変更しただけ。

そのコードになくて自分で付け加えたのがひとつだけある。それは投稿数を表示する下記の記述である。上のページのリストの一番下に書き足した。1だと表示で0だと非表示らしい。

‘show_count’=> 1,

これ以外にも表示する順序(名前順か数順か昇順か降順か)、フォントの大きさ、表示するタグの数などを変更できるが、その辺は上述のページに詳しく書いてあるからそちらを見た方が間違いない。

FTPでサーバにアップロード

FTPソフトで自分が使っているテーマフォルダの中の「page-templates」フォルダにファイルを入れると、管理画面の固定ページ新規作成でテンプレートを選べるようになるから選んでページを作る。タグはPHPが出力するから入力欄にはなにも入力する必要はない。

完成ページのソースを見るとクラス名が.wp-tag-cloudとなっているから、テーマのスタイルシートでulやliにこのクラス名を加えて要素を指定すれば表示をアレンジすることができる。

無事タグ一覧ページが完成

ページを表示させると無事タグの一覧が表示されたので、画面の一番上の四つのアイコンにタグアイコンを加えてそこから飛べるようにした。

正直なところ当サイト(ザ・バズーカ)は常連がまったくいないような弱小サイトだから、タグ一覧ページもそれほど意味はないかもしれない。だがたまにスターウォーズの記事を何ページも読んでくれる一見さんがいるようだから少しは役に立つかも。

感想まとめ

ずっと欲しいと思っていたタグ一覧ページをようやく作ることができた。

だが人間のやることだから記事を書くときによってタグを入れたり入れ忘れたりするのだ。甲子園の記事でも高校野球と入っていたり入っていなかったり。

あとはできれば複数条件で絞込み検索というのをやってみたいが、難しそうなので当分無理だろう。

スポンサーリンク



あわせて読みたい