WordPressブロックエディタでタグをチェックボックスにして使いやすくするコード

タグをチェックボックス化

WordPressのタグをチェックボックスにするには、いくつかの方法があります。

1. プラグインを利用する (推奨)

最も簡単で一般的な方法は、プラグインを使用することです。これにより、コードを直接編集することなく、視覚的に設定を変更できます。

おすすめのプラグイン:

Custom Field Suite (CFS): タグに限らず、さまざまなカスタムフィールドを柔軟に設定できます。チェックボックスも簡単に作成可能です。
Advanced Custom Fields (ACF): WordPressで最も人気のあるカスタムフィールドプラグインの一つです。ACFでもチェックボックス形式のフィールドを作成し、タグとして利用できます。
Taxonomy Checklist: これは特定の用途に特化しており、カテゴリーやタグなどのタクソノミーをチェックボックスで表示する機能を提供します。

一般的な設定手順 (ACFの場合を例に):

プラグインのインストールと有効化: WordPressの管理画面から「プラグイン」→「新規追加」に進み、「Advanced Custom Fields」を検索してインストールし、有効化します。
新規フィールドグループの作成: ACFのメニューから「フィールドグループ」→「新規追加」をクリックします。
フィールドの追加: 「フィールドを追加」ボタンをクリックし、以下の設定を行います。
- フィールドタイプ: 「チェックボックス」を選択します。
- フィールド名: 例: my_tags
- ラベル: 例: 「タグ」
- 選択肢: 「ターム」を選択し、「タクソノミー」で「タグ」を選択します。これにより、既存のタグが自動的にチェックボックスの選択肢として表示されます。
- 表示場所: このフィールドグループを表示したい投稿タイプ（例: 投稿）を設定します。
保存: フィールドグループを保存します。
テーマファイルの編集: 最後に、このチェックボックスで選択されたタグを投稿に表示するために、テーマファイル（例: single.php や content.php など）を編集し、ACFの関数を使ってフィールドの値を呼び出します。

<?php
$selected_tags = get_field('my_tags'); // フィールド名に合わせて変更

if( $selected_tags ) {
    echo '<ul class="post-tags">';
    foreach( $selected_tags as $tag_id ) {
        $term = get_term( $tag_id, 'post_tag' ); // 'post_tag'はタグのタクソノミー名
        if ( $term && ! is_wp_error( $term ) ) {
            echo '<li><a href="' . get_term_link( $term ) . '">' . $term->name . '</a></li>';
        }
    }
    echo '</ul>';
}
?>Code language: HTML, XML (xml)

2. コードで実装する (上級者向け)

プラグインを使わずに、コードで直接実装することも可能ですが、WordPressのカスタマイズに慣れている方向けです。主にカスタムメタボックスとwp_terms_checklist()関数を使うことになります。

この方法は、テーマのfunctions.phpやカスタムプラグイン内で記述する必要があります。

大まかな手順:

カスタムメタボックスの登録: add_meta_box()関数を使って、投稿編集画面に新しいメタボックス（チェックボックスを表示するエリア）を追加します。
チェックボックスの表示: メタボックス内で、wp_terms_checklist()関数を使って既存のタグをチェックボックス形式で表示します。
データの保存: 投稿が保存される際に、チェックボックスで選択されたタグを投稿に紐付けて保存するロジックを記述します。

この方法はより複雑で、エラーが発生するリスクも高いため、特別な理由がない限りプラグインの利用をおすすめします。

どちらの方法を選ぶべきか？

手軽さ、安全性、機能の豊富さを求めるなら → プラグインを利用する
WordPressの知識があり、細かなカスタマイズをしたい場合 → コードで実装する

ほとんどのユーザーにとって、プラグインを利用する方法が最も簡単で効率的です。まずプラグインを試してみて、必要に応じてより高度なカスタマイズを検討するのが良いでしょう。

WordPressのタグをチェックボックスにする際の注意点

WordPressのタグをチェックボックスで表示することは、特にカスタム投稿タイプや、タグの選択肢が限定的でユーザーに一覧から選ばせたい場合に非常に便利です。しかし、いくつか注意すべき点があります。

1. タグ数の増加によるUI/UXの悪化

タグの数が少ないうちはチェックボックスでの選択は直感的で使いやすいですが、タグの数が多くなると、チェックボックスのリストが長くなりすぎ、UI/UXを著しく損ねる可能性があります。

スクロールの手間: リストが長すぎると、ユーザーは目的のタグを見つけるために何度もスクロールする必要があります。
視認性の低下: 選択肢が多すぎると、全体像を把握しづらくなり、ユーザーは混乱する可能性があります。

対策:

タグの整理: 関連性の低いタグや使用頻度の低いタグを整理し、数を減らすことを検討しましょう。
検索機能の併用: タグの数が多い場合は、チェックボックスと同時に検索機能を提供することで、ユーザーが素早く目的のタグを見つけられるようにしましょう。
他のUIオプションの検討: タグの数が非常に多い場合は、チェックボックスではなく、以下のようなUIオプションも検討しましょう。
- オートコンプリート機能付きのテキスト入力フィールド: ユーザーが入力すると関連するタグが候補として表示される形式。
- セレクトボックス（複数選択可能）: ドロップダウン形式でタグを選択。ただし、これも数が多くなると使いづらくなります。

2. タグの柔軟性の低下

チェックボックスは、あらかじめ用意された選択肢の中から選ぶ形式のため、新しいタグを自由に追加することが難しくなります。

管理の手間: 新しいタグを追加するたびに、チェックボックスの項目をコードで追加したり、管理画面から設定を変更したりする手間が発生します。
ユーザーの制限: ユーザーが自由に新しいタグを作成できなくなるため、コンテンツの多様性が失われる可能性があります。

対策:

タグの役割を明確にする: チェックボックスで管理するタグは、ある程度固定されたカテゴリーに近いものに限定し、自由な入力が必要な場合は通常のタグ入力フィールドを利用するなど、役割分担を検討しましょう。
適切なプラグインの選定: 新しいタグの追加や削除が管理画面から簡単に行えるプラグボックス機能を提供するプラグインを選択することで、この手間を軽減できます。

3. 実装方法の検討

WordPressのタグをチェックボックスにするには、主に以下の方法があります。

カスタムタクソノミーとしての実装: タグを通常のpost_tagではなく、独自のカスタムタクソノミーとして登録し、その表示方法をチェックボックス形式に設定する方法です。register_taxonomy関数で'hierarchical' => trueを設定することで、カテゴリーのようにチェックボックスで表示されるようになります。
- メリット: WordPressのコア機能を利用するため、比較的安定しており、管理画面での操作もスムーズです。
- デメリット: 既存のpost_tagをそのままチェックボックスにするわけではないため、既存タグからの移行や併用を考慮する必要があります。
プラグインの利用: 「ACF (Advanced Custom Fields)」や「Custom Field Suite」などのカスタムフィールド系プラグインを利用して、タグ選択用のチェックボックスフィールドを作成する方法です。
- メリット: コードを書く手間が省け、直感的な操作で設定できます。豊富な機能を持つプラグインが多いです。
- デメリット: プラグインに依存するため、将来的な互換性やパフォーマンスに注意が必要です。
自作コードでのカスタマイズ: WordPressのフィルターフックなどを利用して、既存のタグ入力ボックスをチェックボックスに変更する方法です。
- メリット: 細かいカスタマイズが可能で、特定の要件に合わせた実装ができます。
- デメリット: 高度なPHP知識が必要となり、保守が大変になる可能性があります。

まとめ

WordPressのタグをチェックボックスにする際は、以下の点を総合的に考慮し、プロジェクトの要件に合った方法を選択することが重要です。

タグの数と増減の予測
ユーザーの使いやすさ（UI/UX）
タグの柔軟性（自由な追加の要否）
開発・管理の手間

これらの注意点を踏まえ、最適なタグ表示方法を検討してください。

CSSカスタマイズ: 「見出しのデザインを変えたい」「ボタンの色をグラデーションにしたい」といった要望をAIに伝えると、テーマの構造に合わせたCSSコードを生成してくれます。これを「追加CSS」欄に貼り付けるだけで反映できます。
レイアウト相談: 「GOLD MEDIAでニュースサイト風にするためのブロック配置を教えて」と聞けば、具体的な設定手順をステップバイステップで解説してくれます。
画像・ロゴ作成: DALL-E 3やMidjourneyなどの画像生成AIを使い、テーマの「ゴールド」という高級感のある世界観にマッチした素材を作成して配置できます。

テーマ名	特徴	AI活用のおすすめ度
RE:DIVER	AI特化型・多機能	★★★★★（内蔵AIが強力）
GOLD BLOG	ブロガー向け・シンプル	★★★★☆（デザイン調整にAIが便利）
GOLD MEDIA	大規模メディア向け・高機能	★★★★☆（構成案やSEO対策にAIを活用）