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>';
}
?>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）
- タグの柔軟性（自由な追加の要否）
- 開発・管理の手間
これらの注意点を踏まえ、最適なタグ表示方法を検討してください。
WordPressは使いやすい
WordPressは、一般的に使いやすいと言えます。
特に、以下のような点で評価されています。
- 直感的な操作性: プログラミングの知識がなくても、見たままの操作で記事の作成や画像の挿入、レイアウト調整などがしやすいように設計されています。
- 豊富な情報とコミュニティ: 世界中で最も使われているCMS（コンテンツ管理システム）の一つであるため、使い方に関する情報がインターネット上に豊富にあり、困ったときも解決策を見つけやすいです。
- カスタマイズの自由度: 「テーマ」と呼ばれるテンプレートや、「プラグイン」という機能拡張のためのプログラムが豊富に用意されており、デザインや機能を追加・変更しやすいです。
- 複数人での管理のしやすさ: ユーザー権限を設定することで、複数の担当者で分担してウェブサイトの更新・運用が可能です。
ただし、デメリットとして、以下のような側面もあります。
- 初期設定の手間: サーバーやドメインの契約、WordPressのインストールなど、ブログサービスなどと比べると初期設定に手間がかかる場合があります。
- セキュリティ対策の必要性: 世界的なシェアが高いため、攻撃の対象になりやすく、自身でセキュリティ対策（定期的なアップデートなど）を行う必要があります。
- カスタマイズには知識が必要な場合も: 高度なデザインの変更や、特定の機能を実現するためには、HTML/CSSなどの専門知識が必要になることもあります。
コンテンツ（記事など）の更新が中心であれば、初心者の方でも比較的容易に始められるツールだと言えるでしょう。
有料WordPressテーマは使いやすい
有料のWordPressテーマは、一般的に使いやすいと言えます。
特に初心者の方にとっては、無料テーマよりも効率よく、質の高いサイトを構築しやすいというメリットが多くあります。
使いやすさに関連する主なメリットは以下の通りです。
- プロが作ったデザインテンプレート: おしゃれで洗練されたデザインが最初から用意されており、手間をかけずに見た目の良いサイトが作れます。
- 豊富な機能とカスタマイズ性:
- SEO対策や高速表示など、サイト運営に重要な機能が標準で搭載されていることが多いです。
- コードの知識がなくても、管理画面から直感的にデザインやレイアウトのカスタマイズができるテーマが多いです。
- サポート体制の充実:
- 初心者向けのマニュアルが充実していたり、購入者専用のサポートフォーラムやメールサポートが用意されていることが多く、困った時に安心です。
- アップデートの保証: セキュリティ対策や新機能への対応など、テーマの定期的なアップデートが保証されているため、長く安心して使い続けられます。
ただし、有料テーマでも高機能ゆえに設定項目が多く、最初はどこから手を付けていいか戸惑う可能性もあります。
購入前にデモサイトやマニュアルの充実度、サポート体制などを確認し、ご自身の目的やスキルレベルに合ったテーマを選ぶことが重要です。
| テーマ名 | 主な特徴・強み | 適したサイト |
| ザ・トール (THE THOR) | 国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援 | アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト |
| エマノン (Emanon) | Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium） | コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト |
| ストークSE (STORK SE) | 「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い | 商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ |
| リキッドプレス (LIQUID PRESS) | 用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能 | メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト |
