#share#XIU theme beautification tutorial: add "pinned" and "NEW" icons to pinned and articles within 24 hours

The work order the day before yesterday contacted the author of the XIU theme and wanted to add an article top function to the latest article list on the homepage. It turned out that the merchant may need to give some RMB, but they kept saying that it could not be changed, so in the end I had to do it myself, and it cost a lot. After a few hours, I finally solved it. Please see the article for details: Wordpress calls the top article and controls the quantity. Today, I will continue to increase the top and article icons within 24 hours. Please refer to the blog of Snail Boss for the content. I will record the detailed process below, because my template has changed. There are many, which may not suit you. Reference article:

https://www.wn789.com/24617.html https://www.wn789.com/16211.html

Because the big front-end and XIU are both products from the same company, they still have a lot in common,

Beautification tutorial

First create the pinned position icon. Those who have read the previous article should already know that pinned in the article list is actually a separate module, so we need to set it up separately. First, copy the excerpt.php under your template article. portion, renamed excerpt-zd.php Find echo ' in content ';

Then add: echo 'top'; Then open the style.css file and add

at the bottom /** Modify summary list positioning method */ .excerpt { position: relative; } /** Top icon text version style **/ .excerpt .zd { position: absolute; padding: 0; right: -38px; top: -16px; display: block; width: 76px; height: 20px; line-height: 20px; background: #ff5e52; color: #fff; font-size: 14px; font-weight: 400; text-align: center; transform: rotate(45deg); transform-origin: 0% 0%; } @media (max-width:640px){ .excerpt-sticky header{text-indent:0px;position: unset;} .sticky-icon { position: absolute; padding: 0; right: -38px; left: auto; top: -16px; display: block; width: 76px; height: 20px; line-height: 20px; background: #ff5e52; color: #fff; font-size: 14px; font-weight: 400; text-align: center; transform: rotate(45deg); transform-origin: 0% 0%; } }

Then look at your top article, it will appear as follows Then let’s talk about the method of displaying the NEW icon for 24 hours. In fact, it is the same as the top icon. This time it is in the excerpt.php file. Found

‘;

Add the following code directly at the end

date_default_timezone_set('PRC'); $t1=$post->post_date; $t2=date("Y-m-d H:i:s"); $diff=(strtotime($t2)-strtotime($t1))/3600; if($diff<24){echo 'New';} else{echo "";}

Then add the following content to the style.css file

/** Modify summary list positioning method */ .excerpt { position: relative; } /** NEW icon text version style **/ .excerpt .new-icon{ position: absolute; right: -38px; top: -16px; display: block; width: 76px; height: 20px; line-height: 20px; background: #4caf50; color: #fff; font-size: 14px; font-weight: 400; text-align: center; transform: rotate(45deg); transform-origin: 0% 0%; }

Refresh your homepage and you will see the NEW icon displayed on the latest published articles. Okay, that’s it for the record.

Recommended site search: rent virtual host free domain name, com domain name, Hong Kong IP, in domain name registration, vps host, Hong Kong server rental 99idc, cloud server rental, cloud server vps, Japanese server free,