連載第86回
2014年7月20日
WordPress 個別記事にTAG(タグ)付けしたい

 前回のSVG画像関連からは一旦離れて、今回はWordPress個別記事毎にタグを付けたいという課題の対応です。
 当サイト「まわるフリフリのフリ」には、これまでの3年間に投稿した記事の各ジャンル合わせた総数が、現時点で418ページあるらしいのですが、検索フォームも無ければ、記事毎にタグ付けもしていないという、読者にとってこれほど情報にリーチしづらいブログは一体どうなのかという…いや、自分でも毎度苦労しているのです、参考したいページにすぐ辿り着けなくて。そういった問題を当サイトで長く放置していた反省が、今回の引っ越し先のブログでは要カイゼン点としていくつか反映されているのですが、今回の「タグ付け」も何故もっと早く設定しなかったのかと猛省しているものの一つです。

自分の中のタグ活用法

 音楽制作メモは、やはり「メモ」と言うだけあって、その日作業した内容を小まめに記録していくという、他人にとっては全くどうでもいい内容となります。僕自身が数年後のいつか、その制作メモを読み返す際、欲しい情報をたぐり寄せるキーワードとして今思い付くのは

  作業状況(録音、ミックス、TD等)
  使用機材名(Mac、OSバージョン、シンセ、エフェクター等)
  プラグイン名(使用したプリセット名やパラメータのメモ等)

くらいでしょうか。音楽制作メモ専用ブログなので、カテゴリーのリストにするとこれだけですが、使用機材で簡単に関連記事を抽出できるのはすごく便利。たぶん記事が増えるに連れ、どんどん細分化され、増えて行くことになると思います。

TAGの表示に必要なテンプレートタグ

 早速タグに関連するテンプレート・タグを調べ、表示したい箇所に挿入していきます。まず、記事作成時に付与したタグ(複数個も可)を任意の場所に表示するためのテンプレート・タグはコチラだそうな。

get_the_tag_list();

 タグはやはり記事タイトル近辺にあると便利。flfl.meでは差し当たり、記事タイトル下にある日付の横に置いてみることにして、まずはサンプルの投稿記事にテキトーなタグを追加してみました。


 index.phpとCSSの記事タイトル周り該当部分はこんな感じになっています。

タグの挿入:index.php(抜粋)

<section id="title">
	<a href="<?php the_permalink(); ?>"><img id="ICON" src="<?php echo post_icon (); ?> "></a>
	<h5><?php the_category(','); ?> ― 第<?php echo ps_number_cat( $post->post_type ); ?>回</h5>
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<h6><?php echo get_the_date(); ?><?php echo get_the_tag_list(' '); ?></h6>
</section>

5行目:echo get_the_tag_list(‘ ‘); で付与したタグのリストを表示。

タグのデザイン:style.css

#post h6 {
	font-family: "Hiragino Kaku Gothic Pro", "Lucida Grande";
	font-weight: normal;
	color: gray;
	font-size: 12px;
	margin: 8px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	vertical-align: middle;
	border:0px solid yellowgreen;
}

#post h6 a{
    margin: 0px 4px 0px 4px;
    padding:3px 4px 3px 4px;
    border-radius:4px;
    color:white;
    background:#42dcff;
    font-size:12px;
    vertical-align: bottom;
    border:0px solid red;
}

#post h6 a:hover{
    background:#ff0772;
}

同じ<h6>要素内の、1〜10行目は日付の外観設定。12行目以下が「タグ」のデザイン設定。

タグのアーカイヴページ「tag.php」の作成

 記事タイトル周りに表示されているタグをクリックしたら、そのタグの付与されている記事がズラッと一覧表示されるようにしたい。今、カテゴリーでそのように設定しているのをタグでも実現するにはどうすれば良いのかちょっと悩みました。現状、カテゴリーのアーカイヴページはindex.phpでそのまま実現出来てるので、そこで引っ掛かったのですが、実は専用のページが作れるのですね。

tag.php

 flfl.meの場合、基本的な構成内容はindex.phpをそのまま流用してしまえばOK。カテゴリーのアーカイヴページと同様、コードネームを表示させるエリアにタグ名を表示させたいので、その箇所だけ修正しておいてから、サーバーにアップロードします。「single_tag_title();」でタグ名の表示ができます。

single_tag_title();

タグ・アーカイヴページの作成:tag.php(h1部分のみの抜粋)

	<section id="code_name">
	<h1><?php single_tag_title(); ?></h1>
	</section>

2行目:single_tag_title(); でタグ名表示。

 タグをクリックした際、そのタグ・アーカイヴページのURLが英文字表記になるよう、ダッシュボードの「タグ」メニューから各タグ項目のスラッグを、それと分かるような英数文字に編集しておきます。例えば、感動ストーリーなら「story」という感じ(↑)。その個別のタグ・アーカイヴページは「〜/tag/story」というURLになります。

外部サイト参考記事
タグ個別のアーカイブページ(ワードプレスとは.com)

フリフリのThunderbolt大戦にも取り入れたい

 タグを付与することによって、格段に個別記事へのアクセスが容易となることを実感できました。いつの日か、ここの「フリフリのThunderbolt大戦」や「サーバー引っ越しメモ」にも取り入れたいのですが、思い付きで継ぎ足し増築してきたため無駄に複雑怪奇な構成と成り果てているので、抜本的な改築は非常に難しそうです。

 ところでタグの管理を効率化させるプラグインなどがいくつか存在するようで、僕も数が増えたら導入を考えますが、現状ではダッシュボードからデフォルト操作のまま様子見。それよりも「水色」に設定したタグ表記が異様に明るくて、これまでのダークな印象がガラッと変わってしまったのだけれど、果たしてそれが良いのかどうか…これも合わせて様子見とします。

 今回の対応中、必然として「タグクラウド」というものに遭遇したのですが、それは追々考えてみることにします。ようやく課題リストから1項目消えました。つづく。

 仮ロゴのジャギー原因解明の為にSVG画像に置き換えてテストしたい。
 というか、仮ロゴ自体のデザインをどうにかしたい。
 <footer>エリアの項目には自己紹介以外に何が必要か。
 タグを導入したい。
 WordPressのダッシュボードが外部と接続出来無い(保留)

記念すべき最初の日記にタグを付けようと思ったのですが、内容にこれといったキーワードが全くなくて、しばらく思案した揚げ句「メモ:memo」としました。なんだそれは。