Implement the custom default and delay loading _php technique in WordPress for commenting avatar

Source: Internet
Author: User

Customize WordPress default Comment avatar
for those who have not set Gravatra avatar, WordPress will display a default avatar that you set up in the background, it can be mystery person, blank, default Gravatar flag, and so on. But these heads have a common shortcoming, is not beautiful, animations not strong! For example, if you go to a blog to read the article, but when you rest assured that the reader's head of the article is a small monster, retro, such as a series of WordPress automatically generated "unsightly" Avatar, you still have a strong interest to read this blog article? I think the answer is YES! So, have you ever thought about designing or looking for a default WordPress avatar that belongs to your blog and is suitable for your blog? Well, Zhou Liang will not hang everyone's appetite, let me say how to do without using Plug-ins to implement custom WordPress default Comment Avatar method.

The method is simple, put the code I provided below in the subject functions.php file that 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 ');
? >


The/images/tweaker.jpg in the code above is the relative path of the custom default avatar, and you can modify the image's address yourself. It is recommended that you put the avatar under the subject images file you are using.

Lazy load WordPress Comment avatar
Modify HTML Structure

Because of the problem in the new browser, we can no longer use the usual way of writing HTML pictures, but rather to write the placeholder to the SRC attribute, and to write the real picture address on the Data-original property. So WordPress avatar code structure should be the following.


In WordPress, the original output head is as follows.

<?php Echo Get_avatar ($comment);?>

Now you need to change to fit the Lazy Load plug-in structure as follows.

<?php Echo '  ';?>

It is recommended that you use the loading picture or the default avatar as a placeholder image.

Add Lazy Load Support

Open footer.php, add Lazy Load plug-in and call before </body>.

<script src= "Jquery.lazyload.js" ></script>
<script>/
* <![ cdata[*/
$ ("Img.avatar"). Lazyload ();
*]]> * *
</script>

Of course, before you do that you need to make sure your site is loaded into jQuery. A complete description can refer to my translation of the article on Lazy Load.

Advantages and disadvantages of using Lazy Load

Why use to Lazy Load? Before you can use it, you will be able to delay loading the picture and increase the page load speed. But in fact tightly is the speed problem, its to the website SEO also very important. For example: Now there is an article page, there are more than N replies, but the head of these respondents and the content of the article is often no relationship, we do not want to search engine included so many unrelated pictures.

In other words, if we do is E-commerce site, I hope the product description has rich graphics and text information, and was crawled by search engines. But these pictures often affect the load speed, Taobao for page performance has been all delayed loading, and those who rely on the strong SEO platform this practice may not be a good thing.

It is important to balance the importance of the content and the performance of the page by choosing whether to delay loading the picture.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.