[ 解決済 ] 「お問い合わせ情報として表示するHTML」に入れたSVG形式の画像がヘッダーで表示されない件

[ヤマモトイワオ]

■ WordPress のバージョン
6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.9.0

■ Pro Unit のバージョン
0.24.1

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
VK All in One Expansion Unit 9.88.2.0
VK Blocks Pro 1.55.0.0

■ 期待する動作
＜ExUnitのメイン設定 → 連絡先情報 → 高度な設定 → お問い合わせ情報として表示するHTML＞
上記にSVG形式の画像を記述した際、ヘッダー右側に正しく表示してほしい。

■ 自分で試した事
【実際の症状】項を先に御覧ください。

客先の稼働中サイトですので、本番環境では試しておりません。クローンサイトをローカルで再現しております。
なおかつ、下記のように新規サイトもつくって試してみましたらそちらも症状が出ております。

1. Local by Flywheelにて、WordPress6.2新規インストールし、LightningとG3ProUnitとExUnitとVkBlocksProのみそれぞれ最新をインストール

2. 外観のカスタマイズ → Lightningヘッダー設定 → ヘッダーレイアウトを、「ヘッダーウィジェットあり＆ナビ貫通」を選択

3. ExUnitのメイン設定 → 連絡先情報 → 高度な設定 → お問い合わせ情報として表示するHTMLに、SVGタグによる画像を記入

本番用のSVGでも、以下のような単純なSVGでも表示されませんでした。
<svg xmlns=”http://www.w3.org/2000/svg”&gt;
<rect x=”0″ y=”0″ width=”100″ height=”60″ fill=”#ddd” />
<polygon points=”50 10, 70 30, 50 50, 30 30″ fill=”#99f” />
</svg>

ちなみにこの新規サイトですと、ヘッダーでは部分的に書き換えられるのではなくSVGが親のdivごとすっぽりと消えております。
クローンサイトでは以下のような構成になってます。
<div id=”site-header-container” ~>
<h1 class=”site-header-logo” ~> ~ </h1>
<div class=”site-header-sub”>この中にSVGが表示されるはず</div>　← 新規サイトではdivタグごと存在しない
</div>

■ 症状が発生するブラウザ
chrome, safari, edge

■ 実際の症状
【期待する動作】項に書いたように、ヘッダー右側にSVG画像が表示されません。
SVGの内容が書き換えられているように見受けられます。
一部もしくは全部が削除されているようです。

私の環境では以下を確認しました。
<path>タグに終了タグを付加
<g><rect><polygon>を削除
<svg>内のx,y座標やwidthとheightを削除

私の今回の問題に限って言えば、ブラウザでソースにwidthとheightを書き足せば正常に表示されます。

VK All in One Expansion Unitが、9.85.0.1まではなんら問題ありませんでした。
それよりあとのバージョンから発生しております。

■ その他特記事項
クローンサイトと新規サイトでバージョン等は合わせておりますが中身が違うので症状に違いが出てしまいしっくり来ませんが、どちらにしても、
ExUnitのメイン設定 → 連絡先情報 → 高度な設定 → お問い合わせ情報として表示するHTML
の中に書いたHTMLがそのままサイトに表示させることができれば解決するのかなあと思います。

以上、初めて投稿いたします。
的はずれなことを述べておりましたら申し訳ありません。

ご相談に載っていただけると幸いです。
よろしくお願いいたします。

[うなこ]

「ヘッダーウィジェットあり＆ナビ貫通」を選択しますと、【ヘッダー右側エリア】が表示されます。
【外観】>【カスタマイズ】>【ウィジェット】の【ヘッダー右側エリア】に「カスタムHTML」ブロックを配置して、そこにsvgのコードを貼り付けると表示されますでしょうか？

[ヤマモトイワオ]

うなこ様、返信ありがとうございます。

ご指南いただいた箇所にSVGコードを記述しましたら、期待通りの結果（SVG画像がヘッダー右側エリアに表示される）となりました。
助かりました、ありがとうございます。

諸々確認し状況が把握できました。

サイト作成当初（WordPress5.8）から、【外観】>【カスタマイズ】>【ウィジェット】の【ヘッダー右側エリア】には「VKお問い合わせセクション」ブロックが登録されてまして（そもそもここの存在を失念してました）、それが現行WordPressではうまく機能しないということかと理解しました。

上記ブロック（WordPressでは「従来のウィジェット」と表記されています）は削除し、「カスタムHTML」ブロックを新たに配置してそこにSVGコードを記述しました。

試しにあらためて現行版の「お問い合わせセクション」を登録してみましたがこれも表示されませんでした。先の投稿での症状と同じようにSVGコードが改ざんされていました。

全てのウィジェットを調べたわけではありませんが、他のウィジェットでは「お問い合わせセクション」を登録すると問題なくSVG画像を表示しました。

ExUnitのメイン設定 → 連絡先情報 → 高度な設定 → 【お問い合わせ情報として表示するHTML】欄にSVG形式で記述した場合、【ヘッダー右側エリア】に限ってはうまく表示されない、ということのようです。

貴重なお時間を割いてご助言いただき、本当にありがとうございました。

[うなこ]

確認ありがとうございます。
カスタムHTMLからは表示されたようで安心しました。

ExUnitのメイン設定 → 連絡先情報 → 高度な設定 → 【お問い合わせ情報として表示するHTML】欄にSVG形式で記述した場合、【ヘッダー右側エリア】に限ってはうまく表示されない、ということのようです。

たしかに、ここにsvgコードを設置しても表示されないようでしたので、確認させていただきます。

▼社内確認用issue
https://github.com/vektor-inc/vk-all-in-one-expansion-unit/issues/957

今後ともよろしくお願いいたします。

[投稿者]

投稿