PHPのsubstr_replace()でhtml文字列に追加したstyle="text-shadow: ;"のみが適用されない

Question

よろしくお願いします。

PHPでHTMLを書き換え、動的にページのタイトルのデザインを変えようと考えています。

以下では、ページタイトルを表示する部分のスタイルを、投稿がアイキャッチ画像を設定しているのかどうかで条件分岐し、その結果によって、あらかじめ生成していたhtmlの文字列にstyle属性を追加しようとしています。

<!-- ページタイトルを表示するHTML -->
<div class="page-header">
　　<div class="page-header-inner container">
　　　　<h1 class="page-header-title">ページタイトル</h1>
　　</div>
</div>

// 以下はWordPressのLightningというテーマをカスタマイズするため、子テーマのfunction.phpに記述

/*-------------------------------------------*/
/*  .page-header の変更
/*-------------------------------------------*/

add_filter('lightning_page_header_title_html', 'show_thumb_on_page_header');
function show_thumb_on_page_header($page_header_title_html) {
    // 引数：$page_header_title_html = '<h1 class="page-header-title">ページタイトル</h1>'

    // アイキャッチ画像を設定しているか判定する
	if (has_post_thumbnail()) {
        // HTML文字列にstyle属性を追加 
		$new_page_header_title_html = substr_replace($page_header_title_html, ' style="color: #272424; text-shadow: 0 0 4px white;"', strpos($page_header_title_html, '>'), 0);

        // タイトルを表示するh1タグの親要素のスタイルも同時に変更したかったため、そのためのstyleタグを記述
		$added_style = '<style>.page-header {background-image: url("' . get_the_post_thumbnail_url() . '");} .page-header-inner {height: 100%; width: 100%; -webkit-backdrop-filter: blur(3px) brightness(110%); backdrop-filter: blur(3px) brightness(110%);}</style>';
		return $new_page_header_title_html . $added_style;
	}
	return $page_header_title_html;
}

<!-- 出力結果 -->
<div class="page-header">
  <div class="page-header-inner container">
    <h1 class="page-header-title" style="color: #272424">ページタイトル</h1>
    <style>.page-header {background-image: url("http://localhost:8080/wp-content/uploads/2021/08/cafe-talking-320x180.webp");} .page-header-inner {height: 100%; width: 100%; -webkit-backdrop-filter: blur(3px) brightness(110%); backdrop-filter: blur(3px) brightness(110%);} .page-header-title {text-shadow: 0 0 4px white;}</style>
  </div>
</div>

アイキャッチ画像を設定しているかどうかの条件分岐がうまくいっていることは確認済みです。

style属性で指定したtext-shadow以外はうまく表示されています。
colorとtext-shadowの順番を入れ替える→colorのみ出力
background-colorを追加で指定→colorとbackground-colorのみ出力

text-shadowの指定を$page_header_title_html内のh1タグにstyle属性でするのではなく、
$added_style内のstyleタグで指定するとスタイルは適用されました。(なので、今はこちらで進めています)

style属性でtext-shadowが指定できないのはなぜでしょうか？
style=""で指定してはいけないものなどがあるのでしょうか？
それともPHPのsubstr_replace関数で不具合が起こるのでしょうか？

追記

文章が冗長になってしまい申し訳ないです。
原因が判明したものの、どう解決すればいいのか分からなかったので追記します。

頂いた回答からピンときて、試しに下記のようにechoでapply_filtersを介さずに出力すると、意図した通りになりました。

$new_page_header_title_html = substr_replace($page_header_title_html, ' style="color: #272424; text-shadow: 0 0 4px white;"', strpos($page_header_title_html, '>'), 0);

echo $new_page_header_title_html;

<!-- 自分でechoして出力したもの -->
<h1 class="page-header-title" style="color: #272424; text-shadow: 0 0 4px red;">ページタイトル</h1>
<!-- Lightningのpage-header.phpのapply_filtersを介して出力されたもの -->
<h1 class="page-header-title" style="color: #272424">ページタイトル</h1>

これらのことからフィルターフックを適用しているLightningテーマのpage-header.phpの部分が原因と判明しました。

/*-------------------------------------------*/
/*	print
/*-------------------------------------------*/
$allowed_html = array(
	'i'      => array(
		'class' => array(),
	),
	'br'     => array(),
	'strong' => array(),
);
?>
<div class="page-header"><div class="page-header-inner container">
<?php echo wp_kses_post( apply_filters( 'lightning_page_header_title_html',  $page_header_title_html ) ) ;  ?>
</div></div><!-- [ /.page-header ] -->

こちらのwp_kses_post()で値が変更されてそうです。
関数リファレンス/wp kses post

最終的な質問

wp_kses_post()でh2タグのstyle="text-shadow:;"を許可するにはどうすればいいでしょうか。
上記を子テーマから行うにはどうすればいいでしょうか。

Comments

[yambejp]

HTMLに直接書いて反映されるなら、phpで出力したテキストと
比較するだけでは？

[ry0xi]

開発者ツールなどでstyle="text-shadow: 0 0 4px white;"を直接タグに追加すると適用されるのですが、PHPのsubstr_replaceでtext-shadow:0 0 4px white;の部分だけ省略されてしまい、出力できないのです。

Answer 1

ソースコードを追った方が早い案件

safecss_filter_attr

add_filter('safe_style_css',function($allowed_attr){
  return array_merge($allowed_attr,['text-shadow']);
));

Comments

[ry0xi]

ありがとうございます。
上記コードを子テーマのfunctions.phpに記述すると無事に適用されました。

「ソースコードを追う」というのは具体的にどういう風に行うのでしょうか？
リストに追加できるフィルターフックがあると見越して、該当ページでapply_filtersで検索して探す感じですか？

[KazuhiroHatano]

公式のコードリファレンスでソースコードを見て処理を追ってみる感じです

https://developer.wordpress.org/reference/functions/wp_kses/

フィルタフックを見つけるのが目的であれば
apply_filtersを検索するのが手っ取り早いことも多いですが
どのタイミングでそのフィルタが適用されているかというのを
ソースコードの処理を追って知っていると
どういうことはできてどういうことはできない
ということが正確にわかるようになります

Answer 2

ごめんなさい、どこが引っかかっているかちょっとわかりません

$page_header_title_html = '<h1 class="page-header-title">ページタイトル</h1>';
$new_page_header_title_html = substr_replace($page_header_title_html, ' style="color: #272424; text-shadow: 0 0 4px red;"', strpos($page_header_title_html, '>'), 0);
$new_page_header_title_html .= $added_style;
print $new_page_header_title_html;

普通に動作しますよね？

Comments

[yambejp]

どうしても改善しない場合は、DOMDocumentで処理するとか・・・

[ry0xi]

1度環境を変えて試してみようと思います。