Home >Backend Development >PHP Tutorial >Implement custom default and lazy loading of comment avatars in WordPress, wordpress avatar_PHP tutorial
Implement custom default and lazy loading of comment avatars in WordPress, wordpress avatar_PHP tutorial
- WBOYOriginal
- 2016-07-12 09:04:05842browse
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.
<?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' );
?>
/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" src="占位符图片.gif" data-original="头像图片.jpg" />
In WordPress, the original output avatar is as follows.
<?php echo get_avatar($comment); ?>
Now the structure that needs to be changed to fit the Lazy Load plug-in is as follows.
<?php echo '<img class="avatar" src="占位符图片.gif" alt="" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar($comment)) . '" />'; ?>
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 36cc49f0c466276486e50c850b7e4956.
<script src="jquery.lazyload.js"></script>
<script>
/* <![CDATA[ */
$("img.avatar").lazyload();
/* ]]> */
</script>
Of course, you need to make sure that your website has jQuery loaded before doing this. For complete instructions, please refer to my translated article about Lazy Load.
Advantages and disadvantages of using Lazy Load
Why use Lazy Load? You may have known before using it that you can delay loading images and improve page loading speed. But in fact, it is mainly a speed issue, which is also very important for the SEO of the website. For example: Now there is a certain article page , there are N multiple people replying, but the avatars of these replyers often have nothing to do with the content of the article. We don’t want search engines to include so many irrelevant pictures.
To put it another way, if we are building an e-commerce website, we hope that the product description has rich graphic information and is crawled by search engines. However, these images are often large in size, which affects the loading speed. Taobao has also improved the page performance for the sake of page performance. All are lazy loaded, which may not be a good thing for platforms that are highly dependent on SEO.
Choose whether to delay loading images. To weigh the importance of the content and the performance of the page, it is important to strike a balance.