目次：
はじめに
求める印象を強化する構図要素を絞り込みたい
構図を学ぶ中で、画面の最終的な印象は小さな印象の積み重ねだと気づきました。
書籍や参考に見て回ったサイトでも、構図要素１つの内容はそれほど大きくなく、いくつかの構図を紹介する形で内容が組まれていました。
こういった「わかりやすい構図からいくつか説明していくから、必要な情報を拾ってください」というものが一般的なようですが、構図については最終的に求める印象を強化する構図要素を、全体から絞り込みできる仕組みがあれば便利かなと考えています。
そうした仕組みがすでにあればよかったのですが、探した中では見つからなかったので自分の情報整理もかねてWordPressで作ってみたいと思います。
仕組みづくりに向けての調査内容
仕組みを作る上で、不明だった点を下記にまとめます。
結果としては実装可能でしたので、調査内容をそれぞれまとめていきたいと思います。
- 構図カテゴリ内で使われているタグの一覧をチェックボックスで出せるか？
- 通常のサイト内検索と、今回の絞り込み検索を両立できるか？
- 絞り込み検索の結果として、構図要素記事の本文を直接表示させたいができるか？
今回の内容
ここでは「１.指定カテゴリ内で使われているタグの一覧をチェックボックスで出せるか？」について調べた内容をまとめていきたいと思います。
チェックボックスはフォームを作って表示する
構図要素の記事は「構図（スラッグ：composition）」カテゴリに分類し、印象をタグとしてつけていこうと考えています。
チェックボックス自体は独自のフォームを作ることで実装します。
仕組みの入り口として固定ページを利用したいため、ショートコードで呼び出せる様にしたいと思います。
独自のフォームはfunction.php内に記述する
cordxを参照すると、独自のフォームはfunction.php内で定義するようです。
チェックボックスはこちらの記事を参考に実装してみます。記事全体はかなり大掛かりなものなので、その中からチェックボックスフォームのみを参考にしています。
参考コードの変更点
参考のコードでは今回の実装に合わない部分もあり、下記の様に修正しています。
PHPコードを主とし、HTMLコードを戻り値にする
参考ページではHTMLを主としてPHPコードが書かれています。私の環境でfunction.phpへの実装を考えるとPHPコードを主として書いたほうが取り扱いが楽なので修正します。
bloginfo(‘url’)をhome_url()へ変更
ショートコードの動作確認をすると編集ページにエラーが出てしまうので情報の取得方法を変更します。
規定のGETパラメータを使うように修正
参考のコードはチェックボックスの情報を独自の「post_tag[]」パラメータへ入れていますが、規定の「tag」パラメータも複数の情報を扱えるようなので、検索結果の実装を楽にするために変更します。
ショートコードの実装と、引数からカテゴリを絞り込む
指定のカテゴリでの絞り込みをおこないたかったので、ショートコードの実装と引数の処理を追加。
構図カテゴリ固定でも良かったのですが、今後の流用性も考えて引数にしています。
検索結果の並び順をランダムに
検索結果が一律だと、新鮮味が薄れやすいかと思いました。今回の仕組みは構想の段階でも使いたいので、ランダム表示で思考を刺激できればと思います。
最終的な実装コード
指定されたスラッグ名のカテゴリ内で使われるタグ一覧をチェックボックスとして表示するコード
実装：function.php
// 呼び出し用ショートコードの定義
add_shortcode('tagsInCategoryCheckList', 'tags_in_category_checkList');
// 指定カテゴリ内のタグ一覧を、チェックボックスで表示する
function tags_in_category_checkList($atts) {
extract(shortcode_atts(array(
'sulg_name' => "",
), $atts));
// ショートコードの引数処理
if ($sulg_name == "") {
// 現在のカテゴリで設定
$cat_id = get_query_var( 'cat' );
$cat_slug = get_category($cat_id)->slug;
}else{
// 指定のカテゴリで設定
$cat_slug = $sulg_name;
$cat_id = get_category_by_slug($sulg_name)->cat_ID;
}
$rtn_code = $rtn_code.'<form method="get" id="searchform" action="'.home_url().'">';
$rtn_code = $rtn_code.'<label for="s" class="assistive-text">検索</label>';
$rtn_code = $rtn_code.'<input type="text" name="s" id="s" placeholder="検索" />';
// カテゴリ指定用（隠し入力欄）
$rtn_code = $rtn_code.'<input type="hidden" name="category_name" value="'.$cat_slug.'">';
// 表示順はランダム（隠し入力欄）
$rtn_code = $rtn_code.'<input type="hidden" name="orderby" value="rand">';
$rtn_code = $rtn_code.'<div>タグ</div>';
$tags = my_tags_in_cat($cat_id);
foreach($tags as $tag) {
$rtn_code = $rtn_code.'<label><input type="checkbox" name="tag" value="'.$tag->slug.'">'.$tag->name.'</label><br>';
}
$rtn_code = $rtn_code.'<input type="submit" value="検索" />';
$rtn_code = $rtn_code.'</form>';
return $rtn_code;
}
指定スラッグ名のカテゴリで使われるタグ一覧を返す関数
実装：function.php
// 指定のカテゴリ内で使われているタグの一覧を返します
function my_tags_in_cat( $cat_id ){
// 現在のカテゴリーに属する投稿のIDを配列で取得
$post_ids = get_objects_in_term( $cat_id, 'category' );
// 取得した投稿IDの配列から、公開済み以外の投稿IDを削除
foreach( $post_ids as $id ){
if( get_post_status ( $id ) != 'publish' ){
$post_ids = array_diff( $post_ids, array( $id ));
}
}
// 現在のカテゴリーに属する投稿で利用しているタグのオブジェクトを取得
$tags_object = wp_get_object_terms( $post_ids, 'post_tag' );
return $tags_object;
}
ここまでの動作風景
固定ページからショートコードを呼び出し、動作を確認します。
ページをプレビューすると、チェックボックスが表示されていますね。
検索ボタンをクリックすれば「Search.php」が呼ばれます。URLを確認すると、設定した内容が反映されているのが確認できます。
今回はひとまずここまでです。
この断片があなたの星へ続く道を、少しでも照らすことを願って
連載記事
＜参考＞
「【WordPress】特定のカテゴリ内で絞り込み検索をしたい」への1件のフィードバック