效果图
使用方法
在自己wordpress后台-外观-小工具 添加自定义html即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://a-oss.zmki.cn/2019/190616-5d05c81dbbaf5.css">
<style type="text/css">
.widget_text .aplayer {margin: -12px -16px }
.widget_text .aplayer .aplayer-info {padding: 7px 7px 7px 10px}
.widget_text .aplayer .aplayer-info .aplayer-music {margin: 0 0 13px 0}
.giligili-item {
position: relative;
width: 100%;
background: #fff;
border-radius: 4px;
overflow: hidden;
/*margin-bottom: 8px;*/ /*阴影*/
padding: 12px 16px;
-webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
box-shadow: 0 1px 3px rgba(26,26,26,.1)
}
</style>
</head>
<body style="background-color: #FFFFFF;"bgcolor="#FFFFFF">
<div class="widget_text giligili-item">
<div class="textwidget custom-html-widget">
<div style="text-align: center;">
<img src="https://api.gksir.top/zhutitupian/boytx.png" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
<i class="fa fa-heart throb" aria-hidden="true" style="color:red"></i>
<img src="https://api.gksir.top/zhutitupian/girltx.png" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
<br/>
<span id="htmer_time"></span>
</div>
<script type="text/javascript" language="javascript">function setTime() {
var create_time = Math.round(new Date(Date.UTC(2018, 4, 13, 10, 20, 0)).getTime() / 1000);
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = currentTime[0] + ' 年 ' + currentTime[1] + ' 天 ' + currentTime[2] + ' 时 ' + currentTime[3] + ' 分 ' + currentTime[4] + ' 秒';
document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
setInterval(setTime, 1000);</script>
</div>
</body>
</html>
提示:代码中的时间需提前一个月
插入wordpress小工具提示错误
由于主题不同的原因,直接插入或多或少都有可能出现问题,我们可以使用以下方法。
解决办法
1.在服务器上创建一个html文件
2.把上边的代码放到创建的html文件里
3.在小工具里放入下面的代码
<iframe src="你的html文件链接地址" width="300" height="100" frameborder="0" scrolling="No" align="center"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>