絵文字画像がPNGからSVGへ

説明

WordPressでは絵文字に対応していないブラウザ環境で絵文字を表示する仕組みをバージョン4.2から提供。絵文字に対応しているブラウザとそん色がない表示を実現する。

HTMLエンティティをimgタグに変換

その仕組みは、絵文字に該当する文字部分は😀のような文字エンティティに変換され、絵文字に対応していないブラウザでは文字エンティティを該当する画像ファイルを指定したimg要素に変換するというも。バージョン4.5.3では次のようなimg要素に変換されている。

<img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/72x72/1f600.png">

※「?」はオリジナルの絵文字。

これに対しバージョン4.6(RC2)では画像ファイルがPNGではなくSVGに変わっている。

<img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/2/svg/1f600.svg">

絵文字画像のURLをカスタマイズする

絵文字表示に関連するhead要素(一部抜粋)は次のようになっており、絵文字画像のURLが指定されていることがわかる(バージョン4.5.3の場合)。

<script type="text/javascript">
	window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/sekkyakucontest.jp\/wp\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.5.3"}};

これに対しバージョン4.6(RC2)では次に示すようにPNG用に加えSVG用のURLと拡張子の指定が追加されている。

<script type="text/javascript">
	window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.6-RC2"}};

これらのURLと拡張子はそれぞれフィルターにてカスタマイズできるようになっている。

$settings = array(
	'baseUrl' => apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/2/72x72/' ),
	'ext' => apply_filters( 'emoji_ext', '.png' ),
	'svgUrl' => apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' ),
	'svgExt' => apply_filters( 'emoji_svg_ext', '.svg' ),
);

ブラウザがSVGをサポートしている場合は絵文字画像はSVGの設定が適用されると思われるので、PNG画像をカスタマイズしているサイトは適宜対応する必要があるだろう。

また絵文字表示に関連するhead要素部分を出力する関数名は、バージョン4.5.3では print_emoji_detection_script だったが、バージョン4.6(RC2)では _print_emoji_detection_script に変更され、アクセスはプライベートに変わっている。レアケースだと思うが、独自にprint_emoji_detection_script関数を呼び出している場合はバージョンアップによりエラーになるので注意してほしい。


最終更新 : 2018年05月27日 10:44

お勧め

is_blog_admin(2011年6月23日 更新)

bool is_blog_admin( )
リクエストページがブログ管理者ページ(/wp-admin/内)か調べる。

post_class(2018年5月27日 更新)

void post_class( [ string $class = '' [ , int $post_id = null ] ] )
投稿情報の種別に応じたクラス属性(class="post-?? post ...")を表示する。具体的なクラス名は、投稿ID(post-番号)、投稿種別(postやpage)、カテゴリー(category-名前)、タグ(tag-名前)などがある。これらクラス名に合わせたCSSを準備することで、投稿ページのユニークなデザインが表現可能になる。

get_the_password_form(2014年3月3日 更新)

string get_the_password_form( [ mixed $post = 0 ] )
パスワード保護されている投稿のパスワード入力フォームを取得する。

get_template_directory_uri(2018年5月27日 更新)

string get_template_directory_uri( )
現在のテンプレートのパス名(URI)を取得する。

wp_get_single_post(2014年11月16日 更新)

mixed wp_get_single_post( [ int $post_id = 0 [ , string $mode = OBJECT ] ] )
投稿情報を取得する。取得する情報には、標準の投稿情報に区分けカテゴリーIDと投稿タグ名の配列が含まれる。