WordPress（ワードプレス）のブログサイトでは、記事にタグを付けて整理するのが一般的です。特にAI生成などで多数のタグを付けている場合、「このタグとこのタグの両方がついている記事だけを見たい」というニーズが出てきます。これはプログラミング用語で「AND検索」や「積集合」と呼ばれる操作です。今回は、WordPressでこのAND検索を直感的に行えるブロックUIの開発過程について考えていきます。
タグ検索の現状と課題
通常のWordPressでは、一つのタグをクリックすると、そのタグが付いている記事のみが表示されます。しかし、複数のタグによる絞り込み（AND検索）は標準では提供されていません。
例えば「WordPress」と「プラグイン」の両方のタグがついた記事だけを見たい場合、標準の機能では簡単に実現できないのです。特に多数のタグを使っているサイトでは、この機能がないと関連性の薄い記事まで表示されてしまい、ユーザー体験が低下します。
開発の目標
今回開発するのは「タグリンク検索」という機能です。この機能には以下の目標があります：
- 複数のタグを選択してAND検索できる
- 選択したタグの組み合わせで何記事あるかをリアルタイムで表示する
- 使いやすく直感的なUIで操作できる
- WordPressのブロックエディタに対応する
これを実現するため、既存のショートコードをベースに新しいブロックを開発することにしました。
UIデザインの考察
使いやすいUIデザインは機能の良し悪しを大きく左右します。特にタグ検索のような機能は、直感的に操作できることが重要です。
チェックボックスかボタンか
最初に考えたのは、従来のチェックボックス形式です。例えば：
□ WordPress (15)
□ PHP (10)
□ プラグイン (8)
しかし、チェックボックスは小さくて押しにくいという欠点があります。特にスマートフォンでは操作しづらいでしょう。
そこで、タグ全体をボタンにする設計に変更しました：
[ #WordPress ] [ #PHP ] [ #プラグイン ]
Code language: JSON / JSON with Comments (json)タグをクリックすると色が変わり、選択状態がはっきりわかります。これは電車の座席予約や映画館の席選びのような、よく見かける選択UIに似ています。
選択状態の表示方法
選択したタグをどう表示するかも重要です。検討した結果、最近のウェブサイトでよく見かける「ピル形式」（丸みを帯びたラベル）を採用しました。
選択中: [ #WordPress ×] [ #PHP ×]
Code language: CSS (css)各ピルには「×」ボタンがついていて、簡単に選択解除できます。これはオンラインショッピングサイトでの「絞り込み条件」表示に似ています。
リアルタイムフィードバック
ユーザーがタグを選択するたびに、「該当記事: 5件」のように記事数をリアルタイムで表示する機能も重要です。これにより、ユーザーは選択の結果をすぐに確認できます。
特に該当記事が0件の場合は赤色で表示し、視覚的に警告するようにしました。こうすることで、ユーザーはすぐに別の組み合わせを試そうと思えるでしょう。
技術的な実装方法
この機能を実現するには、クライアントサイド（ブラウザで動く部分）とサーバーサイド（WordPress側で動く部分）の両方を開発する必要があります。
ハイブリッド方式の採用
検討の結果、以下のハイブリッド方式を採用しました：
- タグ選択と記事数表示: Ajax（エイジャックス）という技術を使い、ページを再読み込みせずにリアルタイムで更新
- 検索結果の表示: 通常のページ遷移で表示（SEOにも有利）
Ajaxとは、ページ全体を再読み込みせずに、必要な情報だけをサーバーから取得する技術です。例えるなら、本棚全体を取り換えるのではなく、必要な本だけを取り出して見るようなものです。
クライアントサイドの実装
ユーザーがタグをクリックすると、以下の処理が行われます：
- タグの見た目を変更（選択状態にする）
- 選択中のタグリストを更新
- サーバーに問い合わせて該当記事数を取得・表示
- 検索ボタンを有効化
これは料理のレシピを選ぶときに、「使いたい材料」をチェックしていくと、作れる料理の数がリアルタイムで表示されるイメージです。
サーバーサイドの実装
サーバー側では以下の処理を実装します：
- タグの組み合わせに該当する記事数を数える関数
- 実際に検索を実行する関数
- 検索結果ページでタグフィルターを表示・操作する機能
なかでも重要なのは「タグの組み合わせに該当する記事数を数える」機能です。これはWordPressの「WP_Query」という仕組みを使い、データベースから該当する記事を探します。
$args = array(
'tax_query' => array(
array(
'taxonomy' => 'post_tag',
'field' => 'slug',
'terms' => $tags,
'operator' => 'AND'
)
),
'posts_per_page' => -1,
'fields' => 'ids'
);
$query = new WP_Query($args);
echo $query->found_posts;
Code language: PHP (php)このコードは、選択されたすべてのタグがついている記事だけを数えます。図書館で「料理」と「健康」の両方のラベルがついた本だけを探すようなイメージです。
検索結果ページの設計
検索ボタンをクリックすると、選択したタグで絞り込まれた検索結果ページに移動します。このページでも選択したタグを表示し、簡単に調整できるようにしました。
タグフィルター: [ #WordPress ×] [ #PHP ×] [ #プラグイン ×] [ すべて解除 ]
Code language: CSS (css)各タグには「×」ボタンがついていて、クリックするとそのタグを除外した状態で検索し直します。「すべて解除」ボタンをクリックすると、すべてのタグフィルターを解除します。
これは、お店で商品を探すときのフィルター機能に似ています。「赤色」と「Mサイズ」で絞り込んだ後、「赤色」だけ解除するようなイメージです。
性能と使いやすさの両立
この機能を実装する上で、性能（パフォーマンス）と使いやすさのバランスが重要です。
Ajax呼び出しの最適化
タグを選択するたびにサーバーに問い合わせると、サーバーに負荷がかかる可能性があります。しかし、ユーザー体験を考えるとリアルタイムの更新は重要です。
そこで、Ajax呼び出しを最適化し、必要最小限のデータだけをやり取りするようにしました。検索結果そのものではなく、「該当記事数」という数字だけを返すことで、通信量を抑えています。
モバイル対応
スマートフォンでも使いやすいよう、以下の対応を行いました：
- タグボタンを大きめに設計（指でタップしやすく）
- 選択したタグとカウント表示を縦に並べる（画面幅が狭くても見やすく）
- 検索ボタンを大きく配置
まとめと今後の展望
今回開発した「タグリンク検索」ブロックは、WordPressサイトでの複数タグによるAND検索を直感的に行える機能です。特にAI生成など多数のタグを使用しているサイトで、ユーザーが欲しい情報を正確に見つけられるようになります。
技術的には、WordPressのブロックAPIとAjaxを組み合わせたハイブリッド方式を採用し、使いやすさと性能のバランスを取りました。UIデザインでは、ボタン形式の選択とピル表示を取り入れ、直感的な操作性を実現しています。
このような機能開発では、技術的な実装だけでなく、ユーザーの視点に立ったUIデザインが重要です。小さな工夫の積み重ねが、使いやすい機能につながるのです。