本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
主题美化说明
此页主题美化根据【子比主题】而来,可修改一下来提升个人博客的魅力
- 主题美化和小工具可能会引起一系列问题,如网站加载缓慢和CSS的全局污染等。美化前请一定要测试。
- 主题美化可能会修改主题文件。更新时,请及时备份主题美化文件,或收藏此站点,以免丢失部分主题页面或美化效果。
不会的看下面
- CSS 代码添加到后台:子比主题设置—>自定义代码—>自定义 CSS 样式
- JS 即 javascript 代码添加到:后台子比主题设置—>自定义代码—>自定义 javascript 代码
- 没有特殊说明的小工具,自定义 HTML 小工具:添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去,保存即可
- 其他添加方式的,我会在教程里告知,若只需添加 CSS+JS 的教程,我可能不重复告知了,请注意看上面的方法。
- 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。
更新站长推荐的美化,让子比更炫起来!!
1、首页文章列表悬停上浮代码
/*首页文章列表悬停上浮开始*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*首页文章列表悬停上浮结束*/
2、文章底部添加最后更新时间或过期失效提示
1.将下面的 PHP 代码加入到主题目录下:themes/zibll/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="http://wpa.qq.com/msgrd?v=3&uin=1426239465&site=qq&menu=yes"><b>觅知社长</b></a>。</div >';
}
echo $custom_content;
}
//文章过期提示结束
2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中,文章分页函数(我的是在 317 行,因为我的代码有改动,所有不确定行数,见下图)搜索文章分页或者添加钩子,下面添加下方代码即可。
PHP代码
article_time_update();//文章过期提示
3.CSS 代码:(在自定义 CSS 样式添加下面代码)
/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
效果图
3、子比主题外链修改 go 外链跳转页面
第一个样式
主题目录下go.php文件里面的全部代码清空,然后把下面的代码复制进去即可。替换原来的即可。
更新主题和修改前记得备份go.php。
第二个样式
主题目录下go.php文件里面的全部代码清空,然后把下面的代码复制进去即可。替换原来的即可。
更新主题和修改前记得备份go.php。
4、子比主题子比主题文章标签美化
复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里,即可完成。
CSS代码
/*文章随机彩色标签*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
5、子比主题添加热门标签页面
教程如下
1、进入子比主题目录—>pages这个目录下创建PHP文件,然后把下面的代码添加进去。
2、把上面的代码添加进行保存后,进入到后台—>页面—>新建页面—->选择热门标签页面即可使用。
3、如果懒得创建添加PHP文件的话,可以下载下面我创建好的PHP文件,上传到子比主题的pages这个目录下,然后按照第2点进行创建页面就好了
© 版权声明
THE END
暂无评论内容