【唐诗】《江雪》 柳宗元：千山鳥飛絕，萬逕人蹤滅。孤舟蓑笠翁，獨釣寒江雪。

永夜

没有不值得去解决的问题，也没有不值得去学习的技术！

Emoji Display Issues in WordPress Code Blocks? Fix Them in Three Steps

As shown in Figure 3: Emoji turns into HTML entities in the front-end code block

作者：

永夜

在

, , , , , , , , ,
Views: 77

When displaying code snippets containing Emoji in WordPress, you often encounter the issue of Emoji being converted into &#x1f389; or <img> tags. This article documents a complete troubleshooting and resolution process.

Issue Description

In a WordPress Gutenberg editor code block, write the following PHP code, as shown in Figure 1:

In a WordPress Gutenberg editor code block, write the following PHP code, as shown in Figure 1
PHP
echo "\n🎉 全部处理完成！\n";
echo "📊 统计：\n";
echo "   已处理新标签: {$processed}\n";
echo "   已跳过已有翻译: {$skipped}\n";
echo "\n✅ 所有标签都已经处理完毕，和手动添加的完全一样！\n";

After saving the post, the front end displays:

PHP
echo "\n🎉 全部处理完成！\n";
echo "📊 统计：\n";
...

Or worse, the Emoji turns into a long <img> tag:

PHP
echo "\n<img draggable="false" ... src=".../1f389.svg"> 全部处理完成！\n";

As shown in Figure 2: Emoji displays normally in the editor

As shown in Figure 2: Emoji displays normally in the editor

As shown in Figure 3: Emoji turns into HTML entities in the front-end code block

As shown in Figure 3: Emoji turns into HTML entities in the front-end code block

As shown in Figure 8: Emoji turns into img tags in the front-end code block

As shown in Figure 8: Emoji turns into img tags in the front-end code block

Cause Analysis

This issue is caused by the combination of two independent mechanisms:

  1. Database character set does not support Emoji
    The utf8 character set in older versions of MySQL only supports 3-byte characters, while Emoji occupies 4 bytes. When a table or field uses utf8, WordPress automatically converts Emoji into HTML entities (e.g., 🎉 → &#x1f389;) before saving to avoid database errors. As shown in Figure 4: Query reveals the core table character set is utf8_general_ci
  2. Front-end Emoji image replacement during output
    Even if the database already supports utf8mb4, WordPress still replaces Emoji characters with SVG images loaded from a CDN (via the wp_staticize_emoji filter) by default, causing <img> tags to appear inside code blocks.
As shown in Figure 4: Query reveals the core table character set is utf8_general_ci

For users of code highlighting plugins like SyntaxHighlighter Evolved, both of these conversions completely ruin the exact display of the code.

Solution

Step 1: Check and upgrade the database character set

Ensure your WordPress database uses the utf8mb4 character set.

  1. Check the current table character set via phpMyAdmin or an SQL query:
SQL
   SELECT TABLE_NAME, TABLE_COLLATION
   FROM information_schema.TABLES
   WHERE TABLE_SCHEMA = '你的数据库名';

As shown in Figure 4: Example query results (some tables use utf8_general_ci)

As shown in Figure 4: Example query results (some tables use utf8_general_ci)
  1. If core tables like wp_posts, wp_options, and wp_terms show utf8_general_ci, you need to convert them:
SQL
-- SELECT TABLE_NAME, TABLE_COLLATION FROM information_schema.TABLES WHERE TABLE_SCHEMA = '你的数据库名'; 的查询结果如下：
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_cky_banners','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_cky_cookie_categories','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_cky_cookies','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_cmplz_cookiebanners','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_cmplz_cookies','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_cmplz_services','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_commentmeta','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_comments','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_links','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_options','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_orgseriesicons','utf8mb4_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_post_views','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_postmeta','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_posts','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_term_relationships','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_term_taxonomy','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_termmeta','utf8mb4_unicode_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_terms','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_usermeta','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_users','utf8_general_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_yoast_indexable','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_yoast_indexable_hierarchy','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_yoast_migrations','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_yoast_primary_term','utf8mb4_unicode_520_ci');
INSERT INTO `TABLES` (`TABLE_NAME`,`TABLE_COLLATION`) VALUES ('wp_yoast_seo_links','utf8_general_ci');


-- 需要转换的 SQL 如下：

-- 文章相关表
ALTER TABLE wp_posts CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE wp_postmeta CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 选项表（可能存有包含 Emoji 的选项值）
ALTER TABLE wp_options CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 分类/标签表
ALTER TABLE wp_terms CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE wp_term_taxonomy CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE wp_term_relationships CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;


-- 评论表（如果评论可能包含 Emoji）
ALTER TABLE wp_comments CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE wp_commentmeta CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 用户表（可选）
ALTER TABLE wp_users CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE wp_usermeta CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 友情链接表（如果有）
ALTER TABLE wp_links CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

ALTER TABLE wp_yoast_seo_links CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

As shown in Figure 5: Execute ALTER TABLE to convert

As shown in Figure 5: Execute ALTER TABLE to convert

As shown in Figure 6: Result after executing ALTER TABLE conversion
  1. Force the character set in wp-config.php, as shown in Figure 7:
PHP
   define('DB_CHARSET', 'utf8mb4');
   define('DB_COLLATE', 'utf8mb4_unicode_ci');
Force the character set in wp-config.php, as shown in Figure 7:

⚠️ Note: Always back up your database before performing these operations!

Step 2: Disable front-end Emoji image replacement

Add the following code to your theme’s functions.php:

PHP
// 彻底禁用 WordPress 前端 Emoji 转换为图片
remove_filter( 'the_content', 'wp_staticize_emoji' );
remove_filter( 'the_excerpt', 'wp_staticize_emoji' );
remove_filter( 'comment_text', 'wp_staticize_emoji' );

// 同时移除 Emoji 的 JS/CSS（提升加载速度）
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

As shown in Figure 10: Add the disabling code in functions.php

As shown in Figure 10: Add the disabling code in functions.php

Step 3: Clean up abnormal content in existing posts

  • New posts: After configuring the previous two steps, simply saving with Emoji will display them normally.
  • Old posts: If they were previously converted to HTML entities or <img> tags, you need to manually re-edit them, replace the entities (e.g., &#x1f389;) back to the original Emoji characters (🎉), and then update the post.

As shown in Figure 9: Replace entities with Emoji in the Gutenberg editor

As shown in Figure 9: Replace entities with Emoji in the Gutenberg editor

As shown in Figure 11: Final front-end display result (Emoji displayed as-is)

As shown in Figure 11: Final front-end display result (Emoji displayed as-is)

Summary

IssueCauseSolution
Emoji turns into &#x...; after savingDatabase character set is not utf8mb4Upgrade tables to utf8mb4
Front end displays <img> tagswp_staticize_emoji filterRemove the filter in functions.php

By following these three steps, your WordPress site will perfectly display code snippets containing Emoji within code blocks, without being disrupted by any conversions. If you are using SyntaxHighlighter Evolved or other code highlighting plugins, this solution applies equally well.

This article is based on real troubleshooting records, and all operations have been verified in a WordPress 7.x + PHP 8.x environment.

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者，自 2013 年起持续运营个人技术博客，记录工作与个人项目中遇到的真实问题，以及解决问题过程中的探索、实践和思考。

除了技术写作，我也在持续开发和维护自己的独立项目，探索新技术和新工具在实际场景中的应用。我始终相信，没有不值得去解决的问题，也没有不值得去学习的技术。

如果这篇文章对你有所帮助，欢迎浏览博客中的其他文章，也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系

评论

一条对“Emoji Display Issues in WordPress Code Blocks? Fix Them in Three Steps”的回复

  1. WordPress Theme Migration: Does Emoji Process Code Need to Keep? – Eternal Night

    […] In old themes, emoji can be displayed normally in the code block using the SyntaxHighlighter Evolved plugin. This is because disabling the code will prevent WordPress from generating emoji in the form of pictures, so that the emoji (Unicode character) in the form of text is not converted and can be displayed normally. Reference:Emoji display exception in WordPress code block? Three-step solution […]

更多文章