How to disable emojis in WordPress – Learn WordPress from a to z

Tutorials 0 lượt xem

There are tons of web performance optimization and tweaks that you can do on your WordPress site. One easy way is to disable emoji loading. Emojis are small symbols used to express ideas or emotions. While these icons are fun, are they really necessary for your WordPress site? Because this unnecessarily wastes your site loading time.

disable emojis in WordPress

When they released WordPress 4.2, they added emoji support for older browsers. The problem here is that it makes an extra HTTP request on your WordPress site, to load the wp-emoji-release.min.js file on every page of your website.

Disable Emojis in WordPress

There are several different ways to disable Emojis in WordPress. You can do it with a free plugin or with code.

1. Disable emoji with plugin

The first way to disable emojis is to use a free plugin called Disable Emojis , developed by Ryan Hellyer.

plugin disable emojis

This plugin is super lightweight, only 9 KB to be exact. It currently has over 30,000 installs and is rated 5 out of 5 stars. Note: Emojis will still work in browsers that have built-in support for them. This plugin simply removes the extra JavaScript file used to add support for emojis in older browsers.

You download it from the WordPress repository or by searching in the “Add New” section. Just install, activate and the extra JavaScript file will be gone.

There is also a free alternative plugin called Emoji setting. It gives users an option to disable the Emojis themselves.

disable emoji settings

You download it from the WordPress repository or by searching in the “Add New” section. Once activated, you can select or deselect “Enable emoji support” from within the Write settings in the WordPress dashboard.

You can also use a premium plugin like Perfmatters (developed by a team member at Kinsta), which allows you to disable emojis along with other optimizations for your WordPress site.

perfmatters plugin

2. Disable Emojis in WordPress with Code

If you don’t want to install a plugin, you can also disable emojis with code. Then add the following code to the functions.php file of your WordPress theme or child theme. Note: this code is taken from the plugin of Disable Emoji above.

/**
 * Disable the emoji's
 */
function disable_emojis() {
	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' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
	add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
   
/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param array $plugins 
 * @return array Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}
   
/**
 * Remove emoji CDN hostname from DNS prefetching hints.
 *
 * @param array $urls URLs to print for resource hints.
 * @param string $relation_type The relation type the URLs are printed for.
 * @return array Difference betwen the two arrays.
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
	if ( 'dns-prefetch' == $relation_type ) {
		/** This filter is documented in wp-includes/formatting.php */
		$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
		$urls = array_diff( $urls, array( $emoji_svg_url ) );
	}

	return $urls;
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span>
</div>

Epilogue

I hope with this little tip, you will manage your WordPress site more efficiently.

If you find it interesting, you can follow the  WordPress basics section  to know more new knowledge.

Follow fanpage to receive the latest posts:  Group

Bài viết liên quan