32.添加文章更新或过期失效提示
- 将下面的函数代码加入到主题目录下functions.php文件中。
//文章过期提示
function article_time_update() {
date_default_timezone_set('PRC');
$newdate=time();
$updated_date = get_the_modified_time('Y-m-d H:i:s');
$updatetime=strtotime($updated_date);
$custom_content = '';
if ( $newdate > $updatetime+86400) {
$custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示:</strong>本文最后更新于<code>'. $updated_date . '</code>,某些文章具有时效性,若有错误或已失效,请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="星语的小木屋" href="https://www.wiiuii.cn/about_me"><b>星语社长</b></a>。</div >';
}
echo $custom_content;
}
- 说明:请自己修改上面有关于本站的信息,改成自己网站信息即可,图标可以用阿里矢量图。
- 在主题目录zibll/inc/functions/zib-single.php文件中,文章分页函数(大概是178-182行,因为我的代码有改动,所有不确定行数,见下图)下面添加下方代码即可。
article_time_update();//文章过期提示
- CSS代码:(在自定义CSS样式添加下面代码)
/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
- 效果图:
33.评论框添加背景图片
- 在主题设置—》自定义CSS样式,添加下面的CSS代码:
/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://img.wiiuii.cn/img/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
- 说明:图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。
- 效果:
34.更改文章列表样式
- CSS代码:
/*文章列表样式*/
@media screen and (min-width: 768px){.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: calc(100% - 20px - 20px);}}
- 上面该样式只有电脑、平板显示(即>768px的显示),若需要手机或者全部显示,请用下面代码:
/*文章列表样式*/
.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: calc(100% - 20px - 20px);}
- 本站正在使用的CSS样式:
/*文章列表样式*/
@media screen and (min-width: 768px){.posts-item{padding: 10px;}/*.posts-item .item-heading{font-size: 22px;}*/.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: 100%;margin-left: 0px;}}
- 截图:
35.添加背景图片
- CSS代码
/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://gitee.com/xun7788/my-imagination/raw/master/cdn/background.png) top fixed;}
- 说明:图片自己换,夜间无背景,全黑。
- 新年背景图(星友:星语提供,右键保存即可)
- 效果截图
36、全站添加自适应樱花飘落的好看样式
1、 网站管理后台 —> 主题设置 —> 自定义代码 —> 自定义 javascript 代码,把下面的 js 代码复制粘贴到里面即可。
2、也可在您的任意主题目录下的 foot.php 文件最后添加下面代码
3、刚添加可能要等一会会自动显示
<!--全站樱花飘落 start-->
<!--by:异朽阁-www.xyxz2021.com-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/yinghua/yinghua.js"></script>
<!--全站樱花飘落 END-->
效果图
38.文章页底部添加【感谢您的来访,获取更多精彩文章请收藏本站+图片。】
THE END
请登录后查看评论内容