[ 解決済 ] 電話アイコン（任意の画像）を使用していましたが、表示されなくなりました。

[ひろみ]

■ WordPress のバージョン
6.0

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

■ テーマの種類
Lightning ( G3 )

■ テーマのバージョン
14.22.1

■ スキンの種類
Origin III

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

■ プラグインの種類・バージョン
■ Pro Unit のバージョン
0.19.10

■ 期待する動作
Lightning ヘッダー上部設定 [お問い合わせ電話用アイコン]について、「Font Awesome 6」から選ぶのが正しい利用方法だとは存じております。ただ、以前は、サイトデザインに合わせた画像をイメージタグにて、カスタマイザーに入れることにより表示可能でしたので、複数のサイトで、便利に利用させていただいていました。

WordPress6.0になった際のアップデートの仕様変更にて、この方法では表示されなくなったことを確認しましたが、もし、今後も利用できると、ありがたく思います。

よろしくお願い致します。

■ 自分で試した事
旧バージョンに戻すと設定できました。
Lightning G3 Pro Unit 0.1.4

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
電話アイコン（任意の画像）を使用していましたが、表示されなくなりました。

[石川＠Vektor,Inc.]

i タグではなく img タグを入れて使っていたということでしょうか？

[ひろみ]

はい、そうです。

[ひろみ]

追記ですみません…メールアイコンも同じように使用していました。

[石川＠Vektor,Inc.]

■ 原因

アイコンフォントを指定する入力欄に入力する内容は、
初期の頃は Font Awesome のクラス名のみを入力する方式だったが、
後に Font Awesome 5 の時にクラス名のルール変更や、の Font Awesome のサイト自体が i タグ全体をコピーする前提のUIのため、それに対応するため、アイコンフォント登録フォームを新規実装した箇所では i タグ全体を入力する方式で実装に変更

→ 入力場所によってクラス名だけ入力するケースと i タグ全体を入力するケースがあったり、Font Awesome のバージョンが古い場合はクラス名だけ入力、 Font Awesome 5 以降の場合は　i タグ全体で入力などバラバラになってユーザーが混乱する状態になった

→ ユーザーがどちらの形式でアイコンフォントを指定（入力）してあっても適切な i タグに変換して出力するように Font Awesome 制御用の独自ライブラリを使用して出力するように、 G3 Pro Unit の仕様変更

→ Font Awesome のアイコンフォントを出力するためのライブラリなので、iタグしか出力しないのが仕様として正しい

→ img タグは表示されなくなる。

—

■ 従来通り標準で入力欄に img タグも使えるように Font Awesome 出力用のライブラリを仕様変更できないか？

→ 「Font Awesome を適切に扱うためのライブラリ」なので、img タグを使えるように変更するのは間違っている

■ そのほかの対策

G3 Pro Unit の「ヘッダートップの電話アイコン」と「ヘッダートップの問い合わせアイコン」 に改変用のフィルターフックを追加して、管理画面で入力された内容をそのフィルターを通してそのまま出力するように改変用プラグインを用意するのでそれを各サイトに適用して運用いただくというのが一番妥当ではないかと思います。
ただし、この方法は改変する場所を決め打ちで変更するので、上記２箇所以外に、後からここもあそこもとなると手間なので、本当にその２箇所で良いか確認願います。

[ひろみ]

わかりやすいご返答をありがとうございます。
改変用プラグインを用意していただけるとのこと、大変ありがたいです。

Lighningを利用させていただいてるサイトで、入力欄に img タグを使用しているのは、その2箇所のみです。

どうぞよろしくお願い致します。

[石川＠Vektor,Inc.]

G3 Pro Unit を 0.20.0 にバージョンアップした上で、
下記の子テーマの functions.php などに貼り付けるか…

add_filter(
	'header_top_tel_icon',
	function( $header_top_tel_icon ) {
		$options = get_option( 'lightning_header_top_options' );
		if ( ! empty( $options['header_top_tel_icon'] ) ) {
			$header_top_tel_icon = $options['header_top_tel_icon'];
		}
		return $header_top_tel_icon;
	}
);
add_filter(
	'header_top_contact_icon',
	function( $header_top_contact_icon ) {
		$options = get_option( 'lightning_header_top_options' );
		if ( ! empty( $options['header_top_contact_icon'] ) ) {
			$header_top_contact_icon = $options['header_top_contact_icon'];
		}
		return $header_top_contact_icon;
	}
);

プラグインとして扱いたい場合は
1. 下記を lightning-g3-pro-unit-allow-header-top-image.php みたいな名前で保存
2. lightning-g3-pro-unit-allow-header-top-image 似たいなフォルダを作って1のファイルを入れる
3. zip に圧縮して管理画面からインストールするか、サーバーに直接アップロードして有効化

でいけると思います。

<?php
/**
 * Plugin Name:     Lightning G3 Pro Unit allow Header Top icon image
 * Description:     アイコンフォントの入力欄で img タグを利用できるようにします
 * Version:         0.0.0
 * License:         GNU General Public License v2 or later
 * License URI:     http://www.gnu.org/licenses/gpl-2.0.html
 */

add_filter(
	'header_top_tel_icon',
	function( $header_top_tel_icon ) {
		$options = get_option( 'lightning_header_top_options' );
		if ( ! empty( $options['header_top_tel_icon'] ) ) {
			$header_top_tel_icon = $options['header_top_tel_icon'];
		}
		return $header_top_tel_icon;
	}
);
add_filter(
	'header_top_contact_icon',
	function( $header_top_contact_icon ) {
		$options = get_option( 'lightning_header_top_options' );
		if ( ! empty( $options['header_top_contact_icon'] ) ) {
			$header_top_contact_icon = $options['header_top_contact_icon'];
		}
		return $header_top_contact_icon;
	}
);

[ひろみ]

表示できました。
ご対応いただき、大変助かりました。
ありがとうございました！

[ひろみ]

度々、申し訳ありません。
Lighning pro も同じように変更されたかと思います。
こちらも同じように対応いただけるようでしたら、ありがたいです。
よろしくお願い致します。

[石川＠Vektor,Inc.]

Lightning Pro アップデートいたしました。
よろしくお願いいたします。

[ひろみ]

表示できました。
何度も対応いただき、大変助かりました。
ありがとうございました！

[投稿者]

投稿