Implement custom default and lazy loading of comment avatars in WordPress, wordpress avatar_PHP tutorial

Implement custom default and lazy loading of comment avatar in WordPress, wordpress avatar

Customize WordPress default comment avatar
For commenters who have not set a Gravatra avatar, WordPress will display a default avatar you set in the background, which can be a mysterious person, blank, the default Gravatar logo, etc. However, these avatars have a common shortcoming, that is, they are not very beautiful and not very watchable! For example, if you go to a blog to read an article, but you are assured that the avatars of readers who comment on the article are all "unsightly" avatars automatically generated by WordPress such as little monsters, retros, etc., you are still very interested. Going to read this blog’s articles? I think the answer is yes! So, have you ever thought about designing or finding a default WordPress avatar that belongs to your blog and suits your blog? Okay, Zhou Liang won’t whet everyone’s appetite, let me talk about how to customize WordPress’ default comment avatar without using a plug-in.

The method is very simple, put the code I provided below in the functions.php file of the theme you are using.

<&#63;php
// Make a new default gravatar available on the dashboard
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/tweaker.jpg';
$avatar_defaults[$myavatar] = "Tweaker";
return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'newgravatar' );
&#63;>

/images/tweaker.jpg in the above code is the relative path to the customized default avatar. You can modify the image address yourself. It is recommended to put the avatar under the images file of the theme you are using.

Lazy loading of WordPress comment avatars
Modify HTML structure

Because of the problems in new browsers mentioned earlier, we can no longer use the normal way of writing HTML images. Instead, we must write the placeholder to the src attribute, and write the real image address in the data-original attribute. Above. So the WordPress avatar code structure should be as follows.

<img  class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="占位符图片.gif"  data-original="头像图片.jpg" / alt="Implement custom default and lazy loading of comment avatars in WordPress, wordpress avatar_PHP tutorial" >

In WordPress, the original output avatar is as follows.

<&#63;php echo get_avatar($comment); &#63;>

Now the structure that needs to be changed to fit the Lazy Load plug-in is as follows.

<&#63;php echo '<img class="avatar lazy"  src="/static/imghwm/default1.png"  data-src="占位符图片.gif"  alt="" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar($comment)) . '" />'; &#63;>

It is recommended to use the loading image or the default avatar as the placeholder image.

Added Lazy Load support

Open footer.php, add the Lazy Load plug-in and call it before