
映画のレビューサイトを作成しました。映画の製作元(国)をカテゴリーに設定し(ハリウッド映画、フランス映画、邦画など)、ジャンルをタグに設定(アクション、恋愛もの、笑える、泣けるなど)しました。
フランス映画(カテゴリ)で笑える(タグ)作品が見たい! そんなユーザーを満足させるためにはどうしたら良いですか?
ホーム 映画レビューサイト: 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
$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 に少し手を加えます。
$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 の情報を取得しておきます。
$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 を用いた送信ボタンなしのコードにしました。
<?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 の先頭に
if ( is_tag() )
return include(TEMPLATEPATH . '/tag.php');
?>
出来上がり
あとは、必要なHTMLタグを追加したり、CSSの調整をすれば出来上がりです。
これで、シングルページのタグリストからタグアーカイブに移動すると、カテゴリーが限定されたタグアーカイブページとなり、さらに「カテゴリー限定のタグアーカイブページ間の移動」もスムーズに行えるようになります。
なお、カテゴリーを限定したタグとなるので、該当記事が無い場合も考えられます。wp_dropdown_categories に除外カテゴリを設定したり、記事が無い場合の表示を加えておいた方がいいのではないかと。
// ループここまで
endwhile;
// 記事が無い場合
else :
$cat = get_category(get_query_var('cat'));
echo '<p>キーワード「' . esc_attr($term->name) . '」の「' . esc_attr($cat->cat_name) . '」なんてありません!</p>';
endif; ?>
- 表示例
- キーワード「萌」の「ハリウッド映画」なんてありません!
Google ウェブマスターツールの設定
タグアーカイブページが増えて、重複コンテンツを作ってしまいました。一応パラメータ付きURLの処理を設定しておきます。
- Google ウェブマスターツールにアクセス
- 該当サイトを選択
- サイト設定
- 設定
- パラメータ処理
- パラメータ設定を調整 »
- + パラメータを追加
- cat と入力し 無視するを選択
- 保存
タグとアーカイブで絞込みを行うために試行錯誤した素人のメモです。
誤った解釈や知識の無さから、不適切な表記や余分なコードが含まれていたり、簡単にできることを難しくしている可能性があります。
