カテゴリー、タグ、カスタムタクソノミーの説明文でHTMLを使用できるようにする

公開日:2024(令和6)年11月1日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressでは、タグ、カテゴリー、カスタムタクソノミーなど、何かを「分類(WordPressでは分類の塊をタクソノミー、個々の分類をタームと言います)」する機能があるのはご存じですね。

そして、サイドバーなどへカテゴリーやタグの一覧を表示させ、リストのリンクをクリックするとその分類に該当する投稿の一覧ページ(いわゆるアーカイブページ)が生成されるのもご存じかと思います。

さらに、アーカイブページにはカテゴリーやタグの設定画面で「説明」欄に入力した文章が表示されるテーマがあったり、ブロック形式のテーマでは「タームの説明」ブロックを挿入することでそれを表示させることもできます。

この「分類(ターム・タクソノミー)」で各コンテンツをリンクで自動的に繋ぐ機能を持っていることが、WordPressが検索エンジンからの認識に強い(リンクをたどって巡回されることでページの正確な認識をしてもらえる可能性が高い)所以だと思います。

さて、今回はこの分類ごとに設定できる説明文の話。説明文には文字列は問題なく挿入することができますが、HTMLタグはある程度のものを除き、保存時にすべて削除されてしまいます。

実は私もこの説明文の中に、どこかのページへのリンクを挿入したくてリンクタグ(aタグ)を入れたものの、aタグ内に入れたtargetなどの属性が更新時に削除されることで、この制限に気づきました。

リンクをクリックした時に別タブで開くようにしたいのに..と検索したら、以下のコードで無効にできるという情報がたくさん出てきて、テーマのfunctions.phpへ追加することで、説明文内でHTMLが使えるようになりました。

remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'pre_link_description', 'wp_filter_kses' );
remove_filter( 'pre_link_notes', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );

でもこれ、本当に正しいの?何か悪影響や危険性はないの?ということでいろいろ調べた結果、ほとんどの行が不要だったり、これを追加すると起こる危険性が分かりました。

そこで本ページでは、上記のコードのうち、ターム(タグ・カテゴリー・カスタムタクソノミー)の説明文でHTMLを使えるようにするために本当に必要なのはどれ?どんな危険性があるの?より確実かつ安全にする方法は何?ということについて紹介していきます。

タクソノミーの説明文でHTMLを使えるようにする際に本当に必要なコード

もう一度巷でたくさん紹介されているタクソノミーの説明文でHTMLを許可するコードを掲載します。

remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'pre_link_description', 'wp_filter_kses' );
remove_filter( 'pre_link_notes', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );

多分これを追加して「できた!」で終わっている方は多いと思います。

これらは例えば1行目であれば「pre_term_description」にかかっている「wp_filter_kses」というフィルター(制限)を解除(remove_filter())しなさいというもので、いわばその部分を無法地帯にしなさいというちょっと恐ろしいコードです。

証拠に、これを追加した後でタームの説明文で確かにHTMLが使えるようになったものの、scriptタグも使えるようになっていて、フロントエンドに出力できるようになってしまっています(実際にHTMLソースで確認済)。scriptタグが使えるということは、何かの動作をさせることが可能になってしまう、つまりセキュリティの大きな穴をあけてしまうことになるのです。

まあ、ログインしたユーザーがタームの説明文の編集をしなければ大丈夫でしょ!と思われるかも知れませんね。

でも、セキュリティは可能な限り悪意を持ってサイトを改ざんされることを防ぐための措置であり、この部分もセキュリティ上で不正なコードが実行されないようにするために制限されているのですから、そこに自身で穴をあけることを承知の上でコードの追加をしてください。

さて、なんとなく今回の件に関して安易にremove_filter()で無効にする危険性を理解いただいた上で、実際にこの4行が必要なのかという点に触れます。

こちらは解説しなくても、自身のサイトで1つ追加してはタクソノミーの設定画面をリロードし、説明文で今まで保存時に削除されていたタグや属性が保持(使える)ようになるかを試せば分かります。

実際に試していくと、必要なのは1行目のみであることが分かります。

2行目、3行目はどこに対してのフィルターを削除するものなのかが不明ですし、4行目はterm_description()という分類の説明文に入力されたものを出力するための関数なのになぜフィルターを無効にする?というものです。

従って、以下をfuncitons.phpへ追加すれば済むという結果になりました。

remove_filter( 'pre_term_description', 'wp_filter_kses' );

この行は「pre_term_description」に掛かっている「wp_filter_kses」という制限を「remove_filter()」で無効にしなさいというものであるのはここまで読めばお分かりになると思います。つまりこの状態では「term_description(タクソノミーの説明欄)」には何を入力してもそのまま処理されるようになりましたよ!ということになります。

これでは前述したようにセキュリティ的に危険性が残るので、次項の方法を取ればより安全になると思います。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
QA Analytics QA Analytics

より安全にタームの説明文でHTMLを許可するようにする方法

以下が前項のコードの代わりに使用したほうがいいと考えて作成したコードです。

/*** タームの説明欄でHTMLを許可 ***/
/* 管理者権限を持つユーザーのみに投稿で使用できるHTMLタグの使用を許可 */
function pwcn_manage_term_description_filter() {
// 管理画面、かつ、現在のユーザーが管理者かどうかを確認
	if (is_admin() && current_user_can('administrator')) {
		// pre_term_description フィルターを無効化
		remove_filter('pre_term_description', 'wp_filter_kses');
		add_filter('pre_term_description','wp_kses_post');
	}
}
add_action('init', 'pwcn_manage_term_description_filter');

コード中同じように「remove_filter(‘pre_term_description’, ‘wp_filter_kses’);」でタームの説明文に対する入力制限を無効にしていますが、次の行の「add_filter(‘pre_term_description’,’wp_kses_post’);」で改めて投稿エディターで使えるHTMLタグのみを許可し直しています。

そして、「if (is_admin() && current_user_can(‘administrator’)) {}」で囲むことで、管理画面上であり、かつ、管理者権限を持つユーザーが操作する場合のみという風に制限を指定しなおすことを限定しています。

これにより、タームの説明文の場所では以下のような動作をします。

  • 管理画面でなければWordPress標準の制限のままにする
  • 管理者権限を持つユーザーが編集していない場合は標準の制限のままにする
  • 一旦無法地帯にするが、改めて投稿エディターで許可されたHTMLタグと属性のみを許可する(スクリプトが挿入されていれば削除する)

管理者権限を持つユーザーであれば今まで通りスクリプトも、許可されていないタグや属性も更新時に削除されるので、管理者が責任をもって管理することができ、より無法になってしまう状態を限定できます。


以上、タームの説明文でHTMLを許可する方法の紹介でした。

先般紹介した1行のコードで済ませるか、このページで提案しているコードで済ませるかはお任せしますし、いずれにしても自身のサイトで十分にテストをしてから使用するようにしてくださいね。

余談 タームとタクソノミーという語句の使い分け

英語ではタクソノミーは「Taxonomy」、タームは「Taxonomy term」と表記します。

WordPressに関する情報を収集していると、特に英語ページではこの用語が結構出てくるのですが、この2つにどんな違いがあるの?と思ったことありませんか?

最後に余談として、この2つの違いについて紹介しておきます。

以下は「wordpress taxonomy term difference」というキーワードで得た、AIによる回答です。

In WordPress, a taxonomy term is a specific category or tag within a taxonomy, which is a grouping of words used to organize website content:

  • TaxonomyA grouping of words that classifies and organizes website content. Taxonomies can be hierarchical or non-hierarchical.
  • Taxonomy termAn individual tag or category within a taxonomy. For example, if you have a custom taxonomy for a doctor’s specialty, a term would be a specific category within your taxonomy, such as “Pediatrics”. 

Here are some other things to know about taxonomies in WordPress:

  • WordPress has two default taxonomies: categories and tags. 
  • You can create custom taxonomies for post types. 
  • You can assign multiple terms to the same post. 
  • A single post can have terms coming from different taxonomies. 
  • Taxonomies have archives, with each taxonomy and term getting their own archive page. 
  • You can use plugins to import an external taxonomy to WordPress, merge terms, and delete unused terms. 
  • You can change the order of taxonomy terms using the “Taxonomy Terms Order” plugin. 
  • To find a taxonomy term’s ID, you can:
    1. Browse to the taxonomy edit screen. 
    2. Hover over a term. 
    3. Look for its tag_ID value in the browser window’s status bar at the bottom. 

要約すると、WordPressで標準で備わっている「カテゴリー」「タグ」という分類の仕方をタクソノミーといい、例えばカテゴリーの中にある分類のことを「タクソノミーターム」と呼ぶとされています。

つまり、「カテゴリー」「タグ」、それからサイト運営者が後から追加できる「カスタムタクソノミー」を「タクソノミー」と言い、例えば「カテゴリー」の中にある「すべて」という分類を「ターム」と呼ぶということなんですね。

前述したように英語表記だと「Taxonomy」「Taxonomy term」と表記するため、どちらかを明確に指定する場合を除いてはどちらにも共通の「Taxonomy」という語句が使われるケースがあり、また、翻訳ツールなどを使うと「Taxonomy」は「分類」、「Taxonomy term」は「用語」、さらに「分類」に紐づくコンテンツの一覧のことをアーカイブ(「分類法」)と日本語に訳されるため、結構混乱することがあるのですね。

また、有志の方などで行っているプラグインやテーマの日本語翻訳では、これらを間違えて訳していたり、そもそも翻訳対象となる文字列ソースが誤っていたりして、設定時に混乱することもありますから、よく文章を読んで判断することが必要かと思います。

ブロックエディターが出た当初、本ページでも出てくる「タームの説明」というブロック名の翻訳に違和感を感じましたが、このブロックは「カテゴリー」「タグ」「カスタムタクソノミー」を指定して、その中にある「ターム」の説明文を表示させるためのブロックなので、恐らく「タームの説明」と訳すしかないのでしょう。

私も微力ながらWordPressの翻訳提案をさせていただいていますが、もしもこの翻訳を提案するなら、いろいろ悩んだ挙句にやはり「タームの説明」とすると思います..。

本ページや本サイト内のページでは正しく用語の使い分けをしているつもりではありますが、もし間違っていたら前後の文章から読み取っていただけるとありがたいです。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
特定のボタンがクリックされた時にカウントアップする機能を設ける方法