映画のレビューサイトを作成しました。映画の製作元(国)をカテゴリーに設定し(ハリウッド映画、フランス映画、邦画など)、ジャンルをタグに設定(アクション、恋愛もの、笑える、泣けるなど)しました。

フランス映画(カテゴリ)で笑える(タグ)作品が見たい! そんなユーザーを満足させるためにはどうしたら良いですか?

ホーム 映画レビューサイト: movie.example.com/

  -- カテゴリー
      -- ハリウッド映画:movie.example.com/category/usa
      -- 邦画:movie.example.com/catgory/houga
      -- フランス映画:movie.example.com/category/france

  -- タグ
      -- 恋愛: movie.example.com/tag/romance
      -- アクション: movie.example.com/tag/action
      -- 泣きたい: movie.example.com/tag/cry
      -- 笑いたい: movie.example.com/tag/lol

カテゴリーとタグの両方に該当するアーカイブページの作成です。色々な角度から実現できるので悩みましたが、僕が採用した方法は下記の通り。

簡易版

レビューページ(シングルページ)のタグリスト

single.php を修正します。タグリストをリンクつきの the_tag() ではなく、配列で取得して、URLにパラメータを付けるように変更。
http://movie.example.com/tag/lol?cid=3

<?php
$tags = get_the_tags();
if ( $tags ) {
    $home = get_option('home');
    echo '<ul>';
    foreach ( $tags as $tag ) {
        echo '<li><a href="' . $home . '/tag/' . esc_attr($tag->slug) . '?cid=' . $cat->cat_ID . '">' . esc_attr($tag->name) . '</a></li>';
    }
    echo '</ul>';
}
?>

パラメータに 「cid」 という任意の文字列を使っていますが、これを 「cat」 にすると色々面倒でした。ここでは(簡易版)利用しないほうがベターです。

tag.php テンプレートの修正

このままでは http://movie.example.com/tag/lol?cid=3 にアクセスしてもカテゴリーは限定されないので、次に tag.php に少し手を加えます。

<?php
$cid = $_GET['cid'];
if ( isset($cid) ) {
    query_posts( $query_string . '&cat=' . (int) $cid );
}
 
// 以下通常のループ
if (have_posts()) : while (have_posts()) : the_post();
?>

2行目:URLにパラメータ「cid」があるか確認
3、4行目:ある場合はその値を query_posts の cat に代入。

これで、query_posts を使ったループ制御(カテゴリーの制限)ができるので、フランス映画で笑いたい、というユーザーが希望するレビュー記事だけが表示されます。

ユーザビリティ考慮版(自己満足)

実はここからが本題。フランス映画の笑える映画リストを開いている時に、あっ、やっぱり邦画を見て笑いたい と思う閲覧者もいるはずです。

Google ウェブマスターツールで複数サイトを管理すると分かると思うのですが、例えばサイトAの「検索クエリ情報」を見ていて、サイトBの「検索クエリ情報」に切り替える場合、左上のドロップダウンメニューでサイトを選択すれば一発で表示してくれます。いちいちトップページに戻る必要がありません。

ストレスなくページを移動できる非常に配慮された作りになっているので、同じようなことを wp_dropdown_categories() を利用して再現しようと思います。

single.php

タグリストを表示するコードは簡易版と同じですが、「cid」としていたパラメータを「cat」に変更します。
http://movie.example.com/tag/lol?cat=3

tag.php

簡易版の tag.php に追加していたコード(2~5行目)は削除し、wp_dropdown_categories を使ってドロップダウンメニューを追加します。

wp_dropdown_categories を追加すると、タグのアーカイブページを表示しても、クエリが上書き(?)されてしまうのか、single_tag_title() が「カテゴリー名」になってしまいました。そこで、最初に下記コードを get_header() の上にでも追加して、tag の情報を取得しておきます。

<?php
$query = $wp_query->get('tag');
$term = get_term_by( 'slug', esc_attr($query), 'post_tag' );
get_header();
?>

echo esc_attr($term->name) でタグの名前を表示できます。
<title> や <h1> タグに single_tag_title() 使っている場合は注意。All in One SEO などのプラグインにも影響がでるかも?

ドロップダウンメニューを tag.php の必要な箇所に追加

この絞込みを行う時は、すでに検索ワード(タグ)が決定している閲覧者(状態)だと思うので、送信ボタンなしの方が好ましいのではないかと感じます。

そこで、JavaScript を用いた送信ボタンなしのコードにしました。

<form id="taglimit" method="get" action="<?php bloginfo('url'); ?>/tag/<?php echo esc_attr($term->slug); ?>">
 
<?php
$select = wp_dropdown_categories( 'show_option_all=' .__('全体から') . '&hierarchical=1&echo=0' );
$select = str_replace("<select ", "<select onchange='return this.form.submit()' ", $select);
 
echo $select;
?>
 
<noscript>
<input type="submit" class="submit" id="taglimit-submit" value="絞込み検索" />
</noscript>
</form>
1行目
タグアーカイブページのURLの後にパラメータを付けたいので、action の送信先は、ブログホーム/タグベース/現在のタグスラッグ とします。
3行目
wp_dropdown_categories に用意されている引数を必要に応じて追加。JavaScript 版は、配列で取得して一旦変数に格納するため、引数の echo=0 が必須です。
4,5行目
<select> にスクリプトを追加した後 echo。
7行目
JavaScript オフ環境時にはサブミットボタンを表示。

category.php

なお、クエリ($wp_query)に「category__in」が加わり、is_category() が有効になってしまうので、テンプレートに category.php が適用されてしまうかもしれません。その場合、タグのテンプレート(tag.php)を指定するコードを、 category.php に追加する必要があります。

// category.php の先頭に

<?php
if ( is_tag() )
    return include(TEMPLATEPATH . '/tag.php');
?>

出来上がり

あとは、必要なHTMLタグを追加したり、CSSの調整をすれば出来上がりです。

これで、シングルページのタグリストからタグアーカイブに移動すると、カテゴリーが限定されたタグアーカイブページとなり、さらに「カテゴリー限定のタグアーカイブページ間の移動」もスムーズに行えるようになります。

なお、カテゴリーを限定したタグとなるので、該当記事が無い場合も考えられます。wp_dropdown_categories に除外カテゴリを設定したり、記事が無い場合の表示を加えておいた方がいいのではないかと。

<?php
// ループここまで
endwhile;
 
// 記事が無い場合
else :
 
$cat = get_category(get_query_var('cat'));
echo '<p>キーワード「' . esc_attr($term->name) . '」の「' . esc_attr($cat->cat_name) . '」なんてありません!</p>';
 
endif; ?>
表示例
キーワード「萌」の「ハリウッド映画」なんてありません!

Google ウェブマスターツールの設定

タグアーカイブページが増えて、重複コンテンツを作ってしまいました。一応パラメータ付きURLの処理を設定しておきます。

  1. Google ウェブマスターツールにアクセス
  2. 該当サイトを選択
  3. サイト設定
  4. 設定
  5. パラメータ処理
  6. パラメータ設定を調整 »
  7. + パラメータを追加
  8. cat と入力し 無視するを選択
  9. 保存

タグとアーカイブで絞込みを行うために試行錯誤した素人のメモです。
誤った解釈や知識の無さから、不適切な表記や余分なコードが含まれていたり、簡単にできることを難しくしている可能性があります。