WordPressでHTMLタグのインラインスタイルが消えるときはsafe_style_cssで調整

2020/09/18

(更新日:2023/10/19

WordPressでHTMLタグのインラインスタイルが消えるときはsafe_style_cssで調整

WordPressはコンテンツやコメントなどのHTMLタグを、出力時に無害化 (サニタイズ) します。
その時に、HTMLタグの種類など以外にも許可するスタイルを細かく指定しています。

よく使うスタイルは問題ないのですが、例えば「table-layout」とかレイアウト関係のものは出力時に消えてしまったりします。

今回はfunctions.phpで対応する方法を書いていきます。

許可されたstyleを確認したい場合

テーマ内の以下ファイルの一番下あたりに「safe_style_css」のフィルターで、配列で格納されています。
/wp-includes/kses.php

functions.phpの記述

safe_style_cssに許可スタイルが配列で格納されているため、テーマのfunctions.phpで、配列に使いたいスタイルを追加します。

例)table-layoutというスタイルを使いたい場合

/**
 * HTML出力時のstyle追加
 */
function my_safe_style_css( $array ) {
  $array[] = 'table-layout';
  return $array;
};
add_filter( 'safe_style_css', 'my_safe_style_css', 10, 1 );