I am the luckiest person in the world.
我是世界上最幸运的人
前言
本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。
每个人的审美观念不一样，所以请先参考本站或测试在用。 - 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，
请一定要测试后在进行美化 。 - 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
- 子比主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放。
- 嗯…暂时想到这些，以后想到在加。
美化教程（集合）
说明：（重要）
一些老教程随机顺序，新教程排在最前面，越往后越早。 ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓ （最新版） CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式 （最新版 ） JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码 （最新版） 没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。 ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑ - 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。
- 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。
61.子比主题修改简约优雅GO外链页面
2023/1/6/ 00:2360.子比主题添加文章评论常用语功能
2022/9/20/ 20:1059.如何禁止用户以各种方式获取代码
2022/4/11/ 20:4358.子比主题下载页面添加复制提取码功能
2022/3/26/ 13:4857.左侧菜单添加背景图片（手机才能看）
代码:
/*手机侧边栏背景图片*/@media (max-width: 767px){.mobile-navbar.show,.mobile-navbar.left{background-size: cover;background-repeat: no-repeat;background-position: center center;cursor: pointer;background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://这里放自定义图);}.mobile-nav-widget .box-body {background: var(--muted-border-color) !important;}}/*手机侧边栏背景图片*/ @media (max-width: 767px){ .mobile-navbar.show,.mobile-navbar.left{ background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://这里放自定义图);} .mobile-nav-widget .box-body { background: var(--muted-border-color) !important;} }/*手机侧边栏背景图片*/ @media (max-width: 767px){ .mobile-navbar.show,.mobile-navbar.left{ background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://这里放自定义图);} .mobile-nav-widget .box-body { background: var(--muted-border-color) !important;} }
56.子比主题新下载页面美化（简单的美化）
这是简单的改动一下代码，添加了几个类，如果作者更新主题时下载页面没改动代码的话，更新主题后【复制粘贴代码】进去就能用！（更新前记得备份！记得备份！记得备份！不然就被刷新代码了）
CSS代码：（放在子比主题设置—自定义代码内，自己可以压缩一下CSS代码）
/*下载样式CSS*/.download-article{padding: 0 10px;}.download-demo{margin: 10px 0;border: 1px dashed red;border-radius: 5px;}.download-wiui{padding: 5px;display: flex;justify-content: center;align-items: center;}.download-sty{text-align: center;height: 100%;}.download-sty p{font-size: 15px !important;text-align: center;margin: 0;}.download-sty img{width: 140px;height: 100%;}.download-theme-box{margin-bottom: 20px;display: inline-flex;flex-direction: row;align-items: center;}.download-right{margin-left: 20px;}.download-file-name{font-size: 20px;}/*下载样式CSS*/ .download-article{ padding: 0 10px; } .download-demo{ margin: 10px 0; border: 1px dashed red; border-radius: 5px; } .download-wiui{ padding: 5px; display: flex; justify-content: center; align-items: center; } .download-sty{ text-align: center; height: 100%; } .download-sty p{ font-size: 15px !important; text-align: center; margin: 0; } .download-sty img{ width: 140px; height: 100%; } .download-theme-box{ margin-bottom: 20px; display: inline-flex; flex-direction: row; align-items: center; } .download-right{ margin-left: 20px; } .download-file-name{ font-size: 20px; }/*下载样式CSS*/ .download-article{ padding: 0 10px; } .download-demo{ margin: 10px 0; border: 1px dashed red; border-radius: 5px; } .download-wiui{ padding: 5px; display: flex; justify-content: center; align-items: center; } .download-sty{ text-align: center; height: 100%; } .download-sty p{ font-size: 15px !important; text-align: center; margin: 0; } .download-sty img{ width: 140px; height: 100%; } .download-theme-box{ margin-bottom: 20px; display: inline-flex; flex-direction: row; align-items: center; } .download-right{ margin-left: 20px; } .download-file-name{ font-size: 20px; }
PHP代码：（
<?php/*** Template name: Zibll-资源下载* Description: download page*/if (empty($_GET['post'])) {get_header();get_template_part('template/content-404');get_footer();exit;}get_header();$post_id = $_GET['post'];function zibpay_get_down_html($post_id){$pay_mate = get_post_meta($post_id, 'posts_zibpay', true);$html = '';if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') {return get_template_part('template/content-404');};// 查询是否已经购买$paid_obj = zibpay_is_paid($post_id);$posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true);$pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title;$pay_doc = $pay_mate['pay_doc'];$pay_details = $pay_mate['pay_details'];if ($paid_obj) {//已经购买直接显示下载盒子$paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']);$paid_name = '<b class="badg jb-red mr6" style="margin-left: 5px; font-size: 12px; padding: 2px 10px; line-height: 1.4; "><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</b>';$pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : '';$dowmbox = '<div style="/*margin-bottom:3em;*/">' . zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id) . '</div>';if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) {$dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免费资源，请登录后下载</b></div>';$pay_extra_hide = '<div class="text-center pay-extra-hide">';$pay_extra_hide .= '<p class="box-body muted-2-color">请先登录！</p>';$pay_extra_hide .= '<p>';$pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登录</a>';$pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>注册</a>';$pay_extra_hide .= '</p>';$pay_extra_hide .= zib_social_login(false);$pay_extra_hide .= '</div>';}$html = '<div class="download-demo"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 文件下载</h3></div>';$html .= '<div class="download-wiui">';/*微信公众号图片在下面的<img>里面，自己放自己的图片链接 文字自己修改*/$html .= '<div class="download-sty"><img src="https://oss.qfya.com/wp-content/uploads/2021/03/qqjSDFHKJs.png" /><p>关注站长Q群不迷路</p></div>';$html .= '<div class="download-right"><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name">[文件名] </span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div>' . $paid_name . '</div>';$html .= '<div>' . $pay_doc . '</div>';$html .= '<div class="muted-2-color em09">' . $pay_details . '</div>';$html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>';$html .= '</div></div>';} else {//未购买$html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';$html .= '<div>' . $pay_doc . '</div>';$html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>';$html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暂无下载权限</b></div>';$html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>';}return $html;}?><style>.but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}</style><main class="container"><div class="content-wrap"><div class="content-layout"><?php while (have_posts()) : the_post(); ?><?php echo zib_get_page_header(); ?><div class="zib-widget article download-article" style="/*min-height: 600px;*/"><?phpecho zibpay_get_down_html($post_id);$page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true);if ($page_links_content_s) {the_content();wp_link_pages(array('before' => '<p class="text-center post-nav-links radius8 padding-6">','after' => '</p>',));echo '</div>';}?><!--开始--><style>.but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}.panel:hover,.download-demo:hover{border: 1px dashed #FF6666;}/*框颜色背景色*/.panel:hover h3,.download-demo:hover h3{color:#fff;}.panel{margin-bottom: 10px; background-color: #fff; border: 1px dashed #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}.panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/.panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}.panel-body .help li{line-height:25px;font-size:14px;color: #000;}.panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}.panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}</style><div class="panel"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 下载说明</h3></div><div class="panel-body"><ul class="help"><li>1.清风博客所提供的压缩包若无特别说明，解压密码均为<em>www.qfya.com</em>;</li><li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li><li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li><li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便清风及时进行更新;</li><li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li></ul></div></div><div class="panel"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 站长声明</h3></div><div class="panel-body"><span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span></div></div><!--结束--><?php ?><?php endwhile; ?></div><?php comments_template('/template/comments.php', true); ?></div></div><?php get_sidebar(); ?></main><?phpget_footer();<?php /** * Template name: Zibll-资源下载 * Description: download page */ if (empty($_GET['post'])) { get_header(); get_template_part('template/content-404'); get_footer(); exit; } get_header(); $post_id = $_GET['post']; function zibpay_get_down_html($post_id) { $pay_mate = get_post_meta($post_id, 'posts_zibpay', true); $html = ''; if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') { return get_template_part('template/content-404'); }; // 查询是否已经购买 $paid_obj = zibpay_is_paid($post_id); $posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true); $pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title; $pay_doc = $pay_mate['pay_doc']; $pay_details = $pay_mate['pay_details']; if ($paid_obj) { //已经购买直接显示下载盒子 $paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']); $paid_name = '<b class="badg jb-red mr6" style="margin-left: 5px; font-size: 12px; padding: 2px 10px; line-height: 1.4; "><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</b>'; $pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : ''; $dowmbox = '<div style="/*margin-bottom:3em;*/">' . zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id) . '</div>'; if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) { $dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免费资源，请登录后下载</b></div>'; $pay_extra_hide = '<div class="text-center pay-extra-hide">'; $pay_extra_hide .= '<p class="box-body muted-2-color">请先登录！</p>'; $pay_extra_hide .= '<p>'; $pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登录</a>'; $pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>注册</a>'; $pay_extra_hide .= '</p>'; $pay_extra_hide .= zib_social_login(false); $pay_extra_hide .= '</div>'; } $html = '<div class="download-demo"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 文件下载</h3></div>'; $html .= '<div class="download-wiui">'; /*微信公众号图片在下面的<img>里面，自己放自己的图片链接 文字自己修改*/ $html .= '<div class="download-sty"><img src="https://oss.qfya.com/wp-content/uploads/2021/03/qqjSDFHKJs.png" /><p>关注站长Q群不迷路</p></div>'; $html .= '<div class="download-right"><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name">[文件名] </span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div>' . $paid_name . '</div>'; $html .= '<div>' . $pay_doc . '</div>'; $html .= '<div class="muted-2-color em09">' . $pay_details . '</div>'; $html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>'; $html .= '</div></div>'; } else { //未购买 $html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>'; $html .= '<div>' . $pay_doc . '</div>'; $html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>'; $html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暂无下载权限</b></div>'; $html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>'; } return $html; } ?> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} </style> <main class="container"> <div class="content-wrap"> <div class="content-layout"> <?php while (have_posts()) : the_post(); ?> <?php echo zib_get_page_header(); ?> <div class="zib-widget article download-article" style="/*min-height: 600px;*/"> <?php echo zibpay_get_down_html($post_id); $page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true); if ($page_links_content_s) { the_content(); wp_link_pages( array( 'before' => '<p class="text-center post-nav-links radius8 padding-6">', 'after' => '</p>', ) ); echo '</div>'; } ?> <!--开始--> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} .panel:hover,.download-demo:hover{border: 1px dashed #FF6666;}/*框颜色背景色*/ .panel:hover h3,.download-demo:hover h3{color:#fff;} .panel{margin-bottom: 10px; background-color: #fff; border: 1px dashed #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);} .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/ .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;} .panel-body .help li{line-height:25px;font-size:14px;color: #000;} .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;} .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;} </style> <div class="panel"> <div class="panel-heading"> <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 下载说明</h3> </div> <div class="panel-body"> <ul class="help"> <li>1.清风博客所提供的压缩包若无特别说明，解压密码均为<em>www.qfya.com</em>;</li> <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li> <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li> <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便清风及时进行更新;</li> <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li> </ul> </div> </div> <div class="panel"> <div class="panel-heading"> <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 站长声明</h3> </div> <div class="panel-body"> <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span> </div> </div> <!--结束--> <?php ?> <?php endwhile; ?> </div> <?php comments_template('/template/comments.php', true); ?> </div> </div> <?php get_sidebar(); ?> </main> <?php get_footer();<?php /** * Template name: Zibll-资源下载 * Description: download page */ if (empty($_GET['post'])) { get_header(); get_template_part('template/content-404'); get_footer(); exit; } get_header(); $post_id = $_GET['post']; function zibpay_get_down_html($post_id) { $pay_mate = get_post_meta($post_id, 'posts_zibpay', true); $html = ''; if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') { return get_template_part('template/content-404'); }; // 查询是否已经购买 $paid_obj = zibpay_is_paid($post_id); $posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true); $pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title; $pay_doc = $pay_mate['pay_doc']; $pay_details = $pay_mate['pay_details']; if ($paid_obj) { //已经购买直接显示下载盒子 $paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']); $paid_name = '<b class="badg jb-red mr6" style="margin-left: 5px; font-size: 12px; padding: 2px 10px; line-height: 1.4; "><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</b>'; $pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : ''; $dowmbox = '<div style="/*margin-bottom:3em;*/">' . zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id) . '</div>'; if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) { $dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免费资源，请登录后下载</b></div>'; $pay_extra_hide = '<div class="text-center pay-extra-hide">'; $pay_extra_hide .= '<p class="box-body muted-2-color">请先登录！</p>'; $pay_extra_hide .= '<p>'; $pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登录</a>'; $pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>注册</a>'; $pay_extra_hide .= '</p>'; $pay_extra_hide .= zib_social_login(false); $pay_extra_hide .= '</div>'; } $html = '<div class="download-demo"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 文件下载</h3></div>'; $html .= '<div class="download-wiui">'; /*微信公众号图片在下面的<img>里面，自己放自己的图片链接 文字自己修改*/ $html .= '<div class="download-sty"><img src="https://oss.qfya.com/wp-content/uploads/2021/03/qqjSDFHKJs.png" /><p>关注站长Q群不迷路</p></div>'; $html .= '<div class="download-right"><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name">[文件名] </span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div>' . $paid_name . '</div>'; $html .= '<div>' . $pay_doc . '</div>'; $html .= '<div class="muted-2-color em09">' . $pay_details . '</div>'; $html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>'; $html .= '</div></div>'; } else { //未购买 $html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>'; $html .= '<div>' . $pay_doc . '</div>'; $html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>'; $html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暂无下载权限</b></div>'; $html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>'; } return $html; } ?> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} </style> <main class="container"> <div class="content-wrap"> <div class="content-layout"> <?php while (have_posts()) : the_post(); ?> <?php echo zib_get_page_header(); ?> <div class="zib-widget article download-article" style="/*min-height: 600px;*/"> <?php echo zibpay_get_down_html($post_id); $page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true); if ($page_links_content_s) { the_content(); wp_link_pages( array( 'before' => '<p class="text-center post-nav-links radius8 padding-6">', 'after' => '</p>', ) ); echo '</div>'; } ?> <!--开始--> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} .panel:hover,.download-demo:hover{border: 1px dashed #FF6666;}/*框颜色背景色*/ .panel:hover h3,.download-demo:hover h3{color:#fff;} .panel{margin-bottom: 10px; background-color: #fff; border: 1px dashed #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);} .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/ .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;} .panel-body .help li{line-height:25px;font-size:14px;color: #000;} .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;} .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;} </style> <div class="panel"> <div class="panel-heading"> <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 下载说明</h3> </div> <div class="panel-body"> <ul class="help"> <li>1.清风博客所提供的压缩包若无特别说明，解压密码均为<em>www.qfya.com</em>;</li> <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li> <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li> <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便清风及时进行更新;</li> <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li> </ul> </div> </div> <div class="panel"> <div class="panel-heading"> <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 站长声明</h3> </div> <div class="panel-body"> <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span> </div> </div> <!--结束--> <?php ?> <?php endwhile; ?> </div> <?php comments_template('/template/comments.php', true); ?> </div> </div> <?php get_sidebar(); ?> </main> <?php get_footer();
- PHP文件路径：主题文件夹/zibll/pages/download.php
- 有一些文字说明比如：站长声明、下载说明，自己在代码中修改一下。
- 图片+文字，代码里面有注释提示的，自己改一下就好，可以上微信公众号或者自己喜欢的样式。
效果：
55.F12控制台添加警告标语[知识干货]
//控制台添加说明if (window.console) {var cons = console;if (cons) {console.log("\n %c 清风博客 - https://www.qfya.com","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;");console.log('%c本站：清风博客(https://www.qfya.com)\nPs：老板你好，如果您通过F12来进入控制台，想获取CSS样式或者其他内容，请自觉把所有涉及到的链接图片保存到本地，谢谢！\n站长Qq：114183287\n更多精彩文章教程和资源，请收藏本站。','color:red;font-size:20px;');}};//控制台添加说明 if (window.console) { var cons = console; if (cons) { console.log("\n %c 清风博客 - https://www.qfya.com","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;"); console.log('%c本站：清风博客(https://www.qfya.com)\nPs：老板你好，如果您通过F12来进入控制台，想获取CSS样式或者其他内容，请自觉把所有涉及到的链接图片保存到本地，谢谢！\n站长Qq：114183287\n更多精彩文章教程和资源，请收藏本站。','color:red;font-size:20px;'); } };//控制台添加说明 if (window.console) { var cons = console; if (cons) { console.log("\n %c 清风博客 - https://www.qfya.com","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;"); console.log('%c本站：清风博客(https://www.qfya.com)\nPs：老板你好，如果您通过F12来进入控制台，想获取CSS样式或者其他内容，请自觉把所有涉及到的链接图片保存到本地，谢谢！\n站长Qq：114183287\n更多精彩文章教程和资源，请收藏本站。','color:red;font-size:20px;'); } };
或者
//控制台添加说明if (window.console) {var cons = console;if (cons) {console.log("\n %c 清风博客 - https://www.qfya.com","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;");cons.log( "%c\n清风博客" , "font-size:70px;" );console.log('%c网站：清风博客(https://www.qfya.com)\n说明：如果你通过控制台的方式获取CSS样式或者其他东东，相信你可能也看到本说明。如果你想一声不吭的拿走，请自己把所有涉及到的链接图片保存到本地，谢谢！\n站长Q：1141383287\n更多精彩文章教程，请收藏本站。','color:red;font-size:20px;');console.log('%c ','background-image:url("https://www.qfya.com/wp-content/uploads/2021/12/2021121607105340.png");background-size:100% 100%;padding:30px 150px;');}};//控制台添加说明 if (window.console) { var cons = console; if (cons) { console.log("\n %c 清风博客 - https://www.qfya.com","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;"); cons.log( "%c\n清风博客" , "font-size:70px;" ); console.log('%c网站：清风博客(https://www.qfya.com)\n说明：如果你通过控制台的方式获取CSS样式或者其他东东，相信你可能也看到本说明。如果你想一声不吭的拿走，请自己把所有涉及到的链接图片保存到本地，谢谢！\n站长Q：1141383287\n更多精彩文章教程，请收藏本站。','color:red;font-size:20px;'); console.log('%c ','background-image:url("https://www.qfya.com/wp-content/uploads/2021/12/2021121607105340.png");background-size:100% 100%;padding:30px 150px;'); } };//控制台添加说明 if (window.console) { var cons = console; if (cons) { console.log("\n %c 清风博客 - https://www.qfya.com","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;"); cons.log( "%c\n清风博客" , "font-size:70px;" ); console.log('%c网站：清风博客(https://www.qfya.com)\n说明：如果你通过控制台的方式获取CSS样式或者其他东东，相信你可能也看到本说明。如果你想一声不吭的拿走，请自己把所有涉及到的链接图片保存到本地，谢谢！\n站长Q：1141383287\n更多精彩文章教程，请收藏本站。','color:red;font-size:20px;'); console.log('%c ','background-image:url("https://www.qfya.com/wp-content/uploads/2021/12/2021121607105340.png");background-size:100% 100%;padding:30px 150px;'); } };
54.WordPress给博客评论框添加一言随机语录
2022/1/6/ 16:3453.添加透明复制提醒
子比主题在主题设置-自定义-javascript代码中添加如下：
//透明复制提示document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【清风博客www.qfya.com】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};//透明复制提示 document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【清风博客www.qfya.com】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};//透明复制提示 document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【清风博客www.qfya.com】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};
在自定义底部HTML代码添加：
<!--透明复制提示开始--><script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script><!--透明复制提示开始--> <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script><!--透明复制提示开始--> <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
52.站点强制https 浏览器显示绿锁
2021/8/28/ 01:1551.WordPress添加鼠标点击和背景特效【美化】
2021/8/9/ 18:5950.很实用的WordPress主题导航代码【wp美化】
2021/8/8/ 19:3749.Zibll子比主题配置百度快捷登入的教程
2021/8/4/ 04:46
2021/8/2/ 23:0947.简单彻底关闭WordPress上传图片自动生成缩略图功能
2021/7/11/ 15:1846.WordPress侧边栏百度一下搜索小工具
2021/6/20/ 15:5345.WordPress给文章内容添加密码
2021/6/20/ 15:0144.下载页面添加声明或说明
HTML代码
<!--开始--><style>.but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}.panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/.panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}.panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/.panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}.panel-body .help li{line-height:25px;font-size:14px;color: #000;}.panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}.panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}</style><div class="panel"><div class="panel-heading"><h3>下载说明</h3></div><div class="panel-body"><ul class="help"><li>1.清风所提供的压缩包若无特别说明，解压密码均为<em>www.qfya.com</em>;</li><li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li><li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li><li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便清风及时进行更新;</li><li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li></ul></div></div><div class="panel"><div class="panel-heading"><h3>站长声明</h3></div><div class="panel-body"><span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span></div></div><!--结束--><!--开始--> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/ .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);} .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/ .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;} .panel-body .help li{line-height:25px;font-size:14px;color: #000;} .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;} .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;} </style> <div class="panel"> <div class="panel-heading"> <h3>下载说明</h3> </div> <div class="panel-body"> <ul class="help"> <li>1.清风所提供的压缩包若无特别说明，解压密码均为<em>www.qfya.com</em>;</li> <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li> <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li> <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便清风及时进行更新;</li> <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li> </ul> </div> </div> <div class="panel"> <div class="panel-heading"> <h3>站长声明</h3> </div> <div class="panel-body"> <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span> </div> </div> <!--结束--><!--开始--> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/ .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);} .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/ .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;} .panel-body .help li{line-height:25px;font-size:14px;color: #000;} .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;} .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;} </style> <div class="panel"> <div class="panel-heading"> <h3>下载说明</h3> </div> <div class="panel-body"> <ul class="help"> <li>1.清风所提供的压缩包若无特别说明，解压密码均为<em>www.qfya.com</em>;</li> <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li> <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li> <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便清风及时进行更新;</li> <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li> </ul> </div> </div> <div class="panel"> <div class="panel-heading"> <h3>站长声明</h3> </div> <div class="panel-body"> <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span> </div> </div> <!--结束-->
- 添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，新版本可能会变话，自己找下）。
- 效果
43.侧边在线征稿小工具
代码：
<style type="text/css">#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}</style><div id="update_version"><a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1431258805@qq.com" target="_blank" rel="noopener"><img title="清风博客" src="背景图放这里" alt="图片" style="border-radius:5px;" /></a><a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1141383287@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)" rel="noopener">发送邮件</a><a class="cms_link" href="https://www.qfya.com/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)" rel="noopener">点击投稿</a><a class="grid_link" href="https://www.qfya.com/" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)" rel="noopener">关于我们</a></div><div><hr><a href="https://www.qfya.com/newposts" target="_blank" rel="noopener">点击在线投稿</a><br>投稿邮箱：<b>1141383287@qq.com</b><br>交流 QQ：<b><a href="https://www.qfya.com" target="_blank" rel="noopener">123123</a></b></div><style type="text/css"> #update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041} </style> <div id="update_version"> <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1431258805@qq.com" target="_blank" rel="noopener"><img title="清风博客" src="背景图放这里" alt="图片" style="border-radius:5px;" /></a> <a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1141383287@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)" rel="noopener">发送邮件</a> <a class="cms_link" href="https://www.qfya.com/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)" rel="noopener">点击投稿</a> <a class="grid_link" href="https://www.qfya.com/" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)" rel="noopener">关于我们</a> </div> <div> <hr> <a href="https://www.qfya.com/newposts" target="_blank" rel="noopener">点击在线投稿</a> <br> 投稿邮箱：<b>1141383287@qq.com</b> <br> 交流 QQ：<b><a href="https://www.qfya.com" target="_blank" rel="noopener">123123</a></b> </div><style type="text/css"> #update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041} </style> <div id="update_version"> <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1431258805@qq.com" target="_blank" rel="noopener"><img title="清风博客" src="背景图放这里" alt="图片" style="border-radius:5px;" /></a> <a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1141383287@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)" rel="noopener">发送邮件</a> <a class="cms_link" href="https://www.qfya.com/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)" rel="noopener">点击投稿</a> <a class="grid_link" href="https://www.qfya.com/" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)" rel="noopener">关于我们</a> </div> <div> <hr> <a href="https://www.qfya.com/newposts" target="_blank" rel="noopener">点击在线投稿</a> <br> 投稿邮箱：<b>1141383287@qq.com</b> <br> 交流 QQ：<b><a href="https://www.qfya.com" target="_blank" rel="noopener">123123</a></b> </div>
- 效果
42.好看的侧边ip标签小工具
代码：
<div id="wiiuii1"><img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div><div id="wiiuii1"> <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div><div id="wiiuii1"> <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>
- 效果
41.修改主题字体（网站字体美化）
CSS代码：（字体样式一：）
/*字体*/@font-face{font-family:"wiiuii";src:url(https://uploader.shimo.im/f/adjzRQKK4rMhqM7T.ttf);}*{font-family:"wiiuii"}/*字体*/ @font-face{font-family:"wiiuii";src:url(https://uploader.shimo.im/f/adjzRQKK4rMhqM7T.ttf);} *{font-family:"wiiuii"}/*字体*/ @font-face{font-family:"wiiuii";src:url(https://uploader.shimo.im/f/adjzRQKK4rMhqM7T.ttf);} *{font-family:"wiiuii"}
CSS代码（字体样式二）：
/*全站字体美化*/@font-face{font-family: 'moe';src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf');src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf');src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont');src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot');src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg');src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff');src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2');}body{font-family:'moe';}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {.meta-right .meta-view{display: unset !important;}}/*全站字体美化*/ @font-face{ font-family: 'moe'; src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2'); } body{ font-family:'moe'; } .enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) { .meta-right .meta-view{ display: unset !important; } }/*全站字体美化*/ @font-face{ font-family: 'moe'; src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff'); src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2'); } body{ font-family:'moe'; } .enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) { .meta-right .meta-view{ display: unset !important; } }
- 注：（非常重要）font-family是自定义字体名称（自己修改），url这是字体文件的地址（自己修改），*这是全局显示。
效果：
- 懒得截图了
40.公告弹窗样式美化
代码：
其实就是一个简单的HTML代码（因为弹窗公告支持HTML代码），自己在弹窗内容里面添加代码即可。图片、信息啥的自己修改即可。
<html><body><!--文本--><a href="https://www.qfya.com/" target="_blank" title="清风博客"><img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://你的图放这里"></a><div class="text_body" style="padding-bottom: 30px;"><div class="text" id="container" style="font-weight:bold;">欢迎光临寒舍！还在使用本站《子比主题添加底部统计信息模块小工具》文章中修改版的小伙伴，出现“用户总数”不显示的，请更新一下PHP代码，我已经更新PHP代码在文章中了。另外所有教程的图片链接，请自行下载上传到本地或者上传其他图床，谢谢啦。</div></div><!--文本结束--><script type="text/javascript">var text = $("#container").text().trim();$("#container").html("");for(var i = 0;i < text.length;i++){$("#container").append("<span>"+text[i]+"</span>")}var s = 0;var tim = setInterval(function(){$("#container span").eq(s++).css("color",getColor()).show();if(s == text.length){clearInterval(tim)}}, 100)function getColor(){return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";}</script></body></html><html> <body> <!--文本--> <a href="https://www.qfya.com/" target="_blank" title="清风博客"> <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://你的图放这里"> </a> <div class="text_body" style="padding-bottom: 30px;"> <div class="text" id="container" style="font-weight:bold;"> 欢迎光临寒舍！还在使用本站《子比主题添加底部统计信息模块小工具》文章中修改版的小伙伴，出现“用户总数”不显示的，请更新一下PHP代码，我已经更新PHP代码在文章中了。另外所有教程的图片链接，请自行下载上传到本地或者上传其他图床，谢谢啦。 </div> </div> <!--文本结束--> <script type="text/javascript"> var text = $("#container").text().trim(); $("#container").html(""); for(var i = 0;i < text.length;i++){ $("#container").append("<span>"+text[i]+"</span>") } var s = 0; var tim = setInterval(function(){ $("#container span").eq(s++).css("color",getColor()).show(); if(s == text.length){ clearInterval(tim) } }, 100) function getColor(){ return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")"; } </script> </body> </html><html> <body> <!--文本--> <a href="https://www.qfya.com/" target="_blank" title="清风博客"> <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://你的图放这里"> </a> <div class="text_body" style="padding-bottom: 30px;"> <div class="text" id="container" style="font-weight:bold;"> 欢迎光临寒舍！还在使用本站《子比主题添加底部统计信息模块小工具》文章中修改版的小伙伴，出现“用户总数”不显示的，请更新一下PHP代码，我已经更新PHP代码在文章中了。另外所有教程的图片链接，请自行下载上传到本地或者上传其他图床，谢谢啦。 </div> </div> <!--文本结束--> <script type="text/javascript"> var text = $("#container").text().trim(); $("#container").html(""); for(var i = 0;i < text.length;i++){ $("#container").append("<span>"+text[i]+"</span>") } var s = 0; var tim = setInterval(function(){ $("#container span").eq(s++).css("color",getColor()).show(); if(s == text.length){ clearInterval(tim) } }, 100) function getColor(){ return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")"; } </script> </body> </html>
- 效果
39.添加右添加短视频聚合无水印解析页面
![WordPress添加短视频聚合无水印解析页面[WP页面]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/13-17qJGkUQwVsGcbEj.png)
38.底部炫酷引导卡片小工具
- 在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。
<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);"><section class="buy-container"><div class="buy-box"><div class="slogan"><h3>清风博客</h3><p>欢迎光临寒舍</p></div><ul class="actions"><li><a href="http://wpa.qq.com/msgrd?v=3&uin=1141383287&site=qq&menu=yes" target="_blank"class="buy-button primary" rel="noopener noreferrer">联系站长</a></li><li><a href="https://www.qfya.com/link" target="_blank" class="demo-button"rel="noopener noreferrer">友链通道</a></li></ul></div><span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span></section></div><style type="text/css">.buy-container {color: #ccc;padding: 60px 40px 50px 40px;margin: 0 auto;background: rgb(224, 32, 140);/*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%);background: -webkit-linear-gradient(left, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%);/*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0208c', endColorstr='#fa6400', GradientType=1);/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box {display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-box-align: center;align-items: center;max-width: 900px;margin: 0 auto;}@media screen and (max-width: 700px) {.buy-container .buy-box {display: block;text-align: center;}.buy-container .buy-box .slogan {margin-bottom: 30px;}}.buy-container .buy-box .slogan h3 {color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px) {.buy-container .buy-box .slogan h3 {font-size: 24px;}}@media screen and (max-width: 500px) {.buy-container .buy-box .slogan h3 {font-size: 20px;}}@media screen and (max-width: 400px) {.buy-container .buy-box .slogan h3 {font-size: 18px;}}.buy-container .buy-box .slogan p {color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions {display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px) {.buy-container .buy-box .actions {-webkit-box-pack: justify;justify-content: center;}}.buy-container .buy-box .actions li {margin: 0;}.buy-container .buy-box .actions li:last-child {margin-left: 10px;}.buy-container .buy-box .actions li a {position: relative;color: #fff !important;font-size: 14px;font-weight: bold;line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover {-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px);-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);-o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px) {.buy-container .buy-box .actions li a {font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after {display: none;}.buy-container .buy-box .actions li a.primary {color: #ff3b30 !important;background-color: #fff;}.buy-container .tips {border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center;max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px) {.buy-container {padding: 30px 40px 30px 40px;}}#go-fav {width: 100%;height: 100%;line-height: 30px;text-align: center;font-size: 14px;font-weight: 700;color: rgba(255, 255, 255, 1);}#go-fav span {padding: 5px 10px;background: #f0e7e2;border-radius: 8px;color: #202020;margin: 0 5px;}</style><script>document.getElementById("wiiuii").parentNode.parentNode.style.padding = 0;</script><div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);"> <section class="buy-container"> <div class="buy-box"> <div class="slogan"> <h3>清风博客</h3> <p>欢迎光临寒舍</p> </div> <ul class="actions"> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=1141383287&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a> </li> <li> <a href="https://www.qfya.com/link" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a> </li> </ul> </div> <span class="tips"> <div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div> </span> </section> </div> <style type="text/css"> .buy-container { color: #ccc; padding: 60px 40px 50px 40px; margin: 0 auto; background: rgb(224, 32, 140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/ background: -moz-linear-gradient(left, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%); background: -webkit-linear-gradient(left, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%); /*请更改此行代码，颜色为rgb模式*/ background: linear-gradient(to right, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0208c', endColorstr='#fa6400', GradientType=1); /*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/ border-radius: var(--main-radius); } .buy-container .buy-box { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto; } @media screen and (max-width: 700px) { .buy-container .buy-box { display: block; text-align: center; } .buy-container .buy-box .slogan { margin-bottom: 30px; } } .buy-container .buy-box .slogan h3 { color: #fff; font-size: 26px; margin: 0 0 10px 0; } @media screen and (max-width: 800px) { .buy-container .buy-box .slogan h3 { font-size: 24px; } } @media screen and (max-width: 500px) { .buy-container .buy-box .slogan h3 { font-size: 20px; } } @media screen and (max-width: 400px) { .buy-container .buy-box .slogan h3 { font-size: 18px; } } .buy-container .buy-box .slogan p { color: #fff; font-size: 14px; font-weight: bold; margin: 10px 0; } .buy-container .buy-box .actions { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; list-style-type: none; margin: 0; padding: 0; } @media screen and (max-width: 700px) { .buy-container .buy-box .actions { -webkit-box-pack: justify; justify-content: center; } } .buy-container .buy-box .actions li { margin: 0; } .buy-container .buy-box .actions li:last-child { margin-left: 10px; } .buy-container .buy-box .actions li a { position: relative; color: #fff !important; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; padding: 10px 20px; background-color: rgba(255, 255, 255, .1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; } .buy-container .buy-box .actions li a:hover { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); opacity: 1 !important; } @media screen and (max-width: 330px) { .buy-container .buy-box .actions li a { font-size: 12px; } } .buy-container .buy-box .actions li a:not(.primary):before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 0 0 0 1px currentColor; -moz-box-shadow: inset 0 0 0 1px currentColor; -o-box-shadow: inset 0 0 0 1px currentColor; box-shadow: inset 0 0 0 1px currentColor; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -khtml-opacity: .3; -moz-opacity: .3; opacity: .3; } .buy-container .buy-box .actions li a:after { display: none; } .buy-container .buy-box .actions li a.primary { color: #ff3b30 !important; background-color: #fff; } .buy-container .tips { border-top: 1px solid rgba(255, 255, 255, .1); display: block; color: #fff; font-size: 12px; text-align: center; max-width: 900px; margin: 30px auto 0 auto; padding-top: 30px; } @media screen and (max-width: 768px) { .buy-container { padding: 30px 40px 30px 40px; } } #go-fav { width: 100%; height: 100%; line-height: 30px; text-align: center; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 1); } #go-fav span { padding: 5px 10px; background: #f0e7e2; border-radius: 8px; color: #202020; margin: 0 5px; } </style> <script> document.getElementById("wiiuii").parentNode.parentNode.style.padding = 0; </script><div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);"> <section class="buy-container"> <div class="buy-box"> <div class="slogan"> <h3>清风博客</h3> <p>欢迎光临寒舍</p> </div> <ul class="actions"> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=1141383287&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a> </li> <li> <a href="https://www.qfya.com/link" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a> </li> </ul> </div> <span class="tips"> <div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div> </span> </section> </div> <style type="text/css"> .buy-container { color: #ccc; padding: 60px 40px 50px 40px; margin: 0 auto; background: rgb(224, 32, 140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/ background: -moz-linear-gradient(left, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%); background: -webkit-linear-gradient(left, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%); /*请更改此行代码，颜色为rgb模式*/ background: linear-gradient(to right, rgb(160, 32, 240) 0%, rgb(0, 191, 255) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0208c', endColorstr='#fa6400', GradientType=1); /*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/ border-radius: var(--main-radius); } .buy-container .buy-box { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto; } @media screen and (max-width: 700px) { .buy-container .buy-box { display: block; text-align: center; } .buy-container .buy-box .slogan { margin-bottom: 30px; } } .buy-container .buy-box .slogan h3 { color: #fff; font-size: 26px; margin: 0 0 10px 0; } @media screen and (max-width: 800px) { .buy-container .buy-box .slogan h3 { font-size: 24px; } } @media screen and (max-width: 500px) { .buy-container .buy-box .slogan h3 { font-size: 20px; } } @media screen and (max-width: 400px) { .buy-container .buy-box .slogan h3 { font-size: 18px; } } .buy-container .buy-box .slogan p { color: #fff; font-size: 14px; font-weight: bold; margin: 10px 0; } .buy-container .buy-box .actions { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; list-style-type: none; margin: 0; padding: 0; } @media screen and (max-width: 700px) { .buy-container .buy-box .actions { -webkit-box-pack: justify; justify-content: center; } } .buy-container .buy-box .actions li { margin: 0; } .buy-container .buy-box .actions li:last-child { margin-left: 10px; } .buy-container .buy-box .actions li a { position: relative; color: #fff !important; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; padding: 10px 20px; background-color: rgba(255, 255, 255, .1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; } .buy-container .buy-box .actions li a:hover { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); opacity: 1 !important; } @media screen and (max-width: 330px) { .buy-container .buy-box .actions li a { font-size: 12px; } } .buy-container .buy-box .actions li a:not(.primary):before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 0 0 0 1px currentColor; -moz-box-shadow: inset 0 0 0 1px currentColor; -o-box-shadow: inset 0 0 0 1px currentColor; box-shadow: inset 0 0 0 1px currentColor; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -khtml-opacity: .3; -moz-opacity: .3; opacity: .3; } .buy-container .buy-box .actions li a:after { display: none; } .buy-container .buy-box .actions li a.primary { color: #ff3b30 !important; background-color: #fff; } .buy-container .tips { border-top: 1px solid rgba(255, 255, 255, .1); display: block; color: #fff; font-size: 12px; text-align: center; max-width: 900px; margin: 30px auto 0 auto; padding-top: 30px; } @media screen and (max-width: 768px) { .buy-container { padding: 30px 40px 30px 40px; } } #go-fav { width: 100%; height: 100%; line-height: 30px; text-align: center; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 1); } #go-fav span { padding: 5px 10px; background: #f0e7e2; border-radius: 8px; color: #202020; margin: 0 5px; } </style> <script> document.getElementById("wiiuii").parentNode.parentNode.style.padding = 0; </script>
- 效果截图：
37.添加B站追番页面
![WordPress添加B站追番页面[WP页面]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-hED2XyIEuaG6dUB8.png)
36.添加背景图片
- CSS代码
/*背景图*/body {background: var(--body-bg-color);} :root{--body-bg-color:url() top fixed;}/*背景图*/ body {background: var(--body-bg-color);} :root{--body-bg-color:url() top fixed;}/*背景图*/ body {background: var(--body-bg-color);} :root{--body-bg-color:url() top fixed;}
- 说明：图片自己换，夜间无背景，全黑。
- 新年背景图，右键保存即可
- 效果截图
35.更改文章列表样式
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);}}/*文章列表样式*/ @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);}}/*文章列表样式*/ @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);}/*文章列表样式*/ .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);}/*文章列表样式*/ .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;}}/*文章列表样式*/ @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;}}/*文章列表样式*/ @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;}}
- 截图
34.评论框添加背景图片
- 在主题设置—》自定义CSS样式，添加下面的CSS代码：
/*评论背景图*/textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://oss.qfya.com/wp-content/uploads/2021/04/pinglun.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;}/*评论背景图*/ textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://oss.qfya.com/wp-content/uploads/2021/04/pinglun.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;}/*评论背景图*/ textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://oss.qfya.com/wp-content/uploads/2021/04/pinglun.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图片）,自己添加喜欢的背景图片。
效果：
33.添加文章更新或过期失效提示
2021/6/15/ 02:02- 将下面的函数代码加入到主题目录下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=1141383287&site=qq&menu=yese"><b>清风社长</b></a>。</div >';}echo $custom_content;}//文章过期提示 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=1141383287&site=qq&menu=yese"><b>清风社长</b></a>。</div >'; } echo $custom_content; }//文章过期提示 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=1141383287&site=qq&menu=yese"><b>清风社长</b></a>。</div >'; } echo $custom_content; }
- 说明：请自己修改上面有关于本站的信息，改成自己网站信息即可，图标可以用阿里矢量图。
- 在主题目录zibll/inc/functions/zib-single.php文件中，文章分页函数（放在321行，见下图）中添加下方代码即可。
article_time_update();//文章过期提示article_time_update();//文章过期提示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);}/*过期文章提示样式*/ .article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}/*过期文章提示样式*/ .article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
- 效果图：
32.侧边栏添加信息统计小工具
![WordPress侧边栏信息统计小工具[WP小工具]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-EgRniTB1fUaZLOMJ.png)
31.修改go外链跳转页面
- 在主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
- 更新主题和修改前记得备份go.php。
- 样式一
<?php/** @Author : Qinver* @Url : zibll.com* @Date : 2020-09-29 13:18:36* @LastEditTime: 2021-04-27 17:54:39* @Email : 770349780@qq.com* @Project : Zibll子比主题* @Description : 一款极其优雅的Wordpress主题* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！*/if (strlen($_SERVER['REQUEST_URI']) > 384 ||strpos($_SERVER['REQUEST_URI'], "eval(") ||strpos($_SERVER['REQUEST_URI'], "base64")) {@header("HTTP/1.1 414 Request-URI Too Long");@header("Status: 414 Request-URI Too Long");@header("Connection: Close");@exit;}//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好@session_start();$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);//数据处理if (!empty($t_url)) {//判断取值是否加密if ($t_url == base64_encode(base64_decode($t_url))) {$t_url = base64_decode($t_url);}//防止xss$t_url = htmlspecialchars($t_url);//对取值进行网址校验和判断preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);if ($matches) {$url = $t_url;$title = '页面加载中,请稍候...';} else {preg_match('/\./i', $t_url, $matche);if ($matche) {$url = 'http://' . $t_url;$title = '页面加载中,请稍候...';} else {$url = 'http://' . $_SERVER['HTTP_HOST'];$title = '参数错误，正在返回首页...';}}} else {$title = '参数缺失，正在返回首页...';$url = 'http://' . $_SERVER['HTTP_HOST'];}?><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript><script>function link_jump(){//禁止其他网站使用我们的跳转页面var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");if (!MyHOST.test(document.referrer)) {location.href="http://" + MyHOST;}location.href="<?php echo $url;?>";}//延时1S跳转，可自行修改延时时间setTimeout(link_jump, 1500);//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题setTimeout(function(){window.opener=null;window.close();}, 50000);</script><title><?php echo $title;?></title><style>html{height:100%;min-height:100%;overflow:hidden}html body{background:#222428;background-size:163px;font:14px/21px Monaco,sans-serif;color:#999;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;height:100%;min-height:100%}html body a,html body a:visited{text-decoration:none;color:#ff805f}html body h4{margin:0;color:#666}.scene{width:100%;height:100%;-webkit-perspective:600;perspective:600;display:flex;align-items:center;justify-content:center}.scene svg{width:240px;height:240px}.dc-logo{position:fixed;right:10px;bottom:10px}.dc-logo:hover svg{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite}.dc-logo:hover:hover:before{content:'\2764';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#00fffe;text-transform:uppercase;position:absolute;left:-70px;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4)}.dc-logo:hover:hover:after{content:'Digital Craft';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#6e6f71;text-transform:uppercase;position:absolute;right:0;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4);background-image:none}@-webkit-keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}</style></head><body><div class="scene"><svg version="1.1" id="dc-spinner" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet"><text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">加载中...<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate></text><path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20C34.797,11.841,28.159,5.203,20,5.203z"></path><path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z"></path><path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z"><animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform></path><path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203C12.875,32.922,7.078,27.125,7.078,20z"><animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform></path></svg></div></body></html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 1500); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style>html{height:100%;min-height:100%;overflow:hidden}html body{background:#222428;background-size:163px;font:14px/21px Monaco,sans-serif;color:#999;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;height:100%;min-height:100%}html body a,html body a:visited{text-decoration:none;color:#ff805f}html body h4{margin:0;color:#666}.scene{width:100%;height:100%;-webkit-perspective:600;perspective:600;display:flex;align-items:center;justify-content:center}.scene svg{width:240px;height:240px}.dc-logo{position:fixed;right:10px;bottom:10px}.dc-logo:hover svg{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite}.dc-logo:hover:hover:before{content:'\2764';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#00fffe;text-transform:uppercase;position:absolute;left:-70px;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4)}.dc-logo:hover:hover:after{content:'Digital Craft';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#6e6f71;text-transform:uppercase;position:absolute;right:0;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4);background-image:none}@-webkit-keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}</style> </head> <body> <div class="scene"> <svg version="1.1" id="dc-spinner" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet"> <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">加载中... <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate> </text> <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203 C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20 C34.797,11.841,28.159,5.203,20,5.203z"> </path> <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20 S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922 S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z"> </path> <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20 c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z"> <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform> </path> <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20 c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203 C12.875,32.922,7.078,27.125,7.078,20z"> <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform> </path> </svg> </div> </body> </html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 1500); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style>html{height:100%;min-height:100%;overflow:hidden}html body{background:#222428;background-size:163px;font:14px/21px Monaco,sans-serif;color:#999;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;height:100%;min-height:100%}html body a,html body a:visited{text-decoration:none;color:#ff805f}html body h4{margin:0;color:#666}.scene{width:100%;height:100%;-webkit-perspective:600;perspective:600;display:flex;align-items:center;justify-content:center}.scene svg{width:240px;height:240px}.dc-logo{position:fixed;right:10px;bottom:10px}.dc-logo:hover svg{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite}.dc-logo:hover:hover:before{content:'\2764';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#00fffe;text-transform:uppercase;position:absolute;left:-70px;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4)}.dc-logo:hover:hover:after{content:'Digital Craft';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#6e6f71;text-transform:uppercase;position:absolute;right:0;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4);background-image:none}@-webkit-keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}</style> </head> <body> <div class="scene"> <svg version="1.1" id="dc-spinner" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet"> <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">加载中... <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate> </text> <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203 C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20 C34.797,11.841,28.159,5.203,20,5.203z"> </path> <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20 S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922 S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z"> </path> <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20 c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z"> <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform> </path> <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20 c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203 C12.875,32.922,7.078,27.125,7.078,20z"> <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform> </path> </svg> </div> </body> </html>
- 样式二、
<?php/** @Author : Qinver* @Url : zibll.com* @Date : 2020-09-29 13:18:36* @LastEditTime: 2021-04-27 17:54:39* @Email : 770349780@qq.com* @Project : Zibll子比主题* @Description : 一款极其优雅的Wordpress主题* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！*/if (strlen($_SERVER['REQUEST_URI']) > 384 ||strpos($_SERVER['REQUEST_URI'], "eval(") ||strpos($_SERVER['REQUEST_URI'], "base64")) {@header("HTTP/1.1 414 Request-URI Too Long");@header("Status: 414 Request-URI Too Long");@header("Connection: Close");@exit;}//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好@session_start();$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);//数据处理if (!empty($t_url)) {//判断取值是否加密if ($t_url == base64_encode(base64_decode($t_url))) {$t_url = base64_decode($t_url);}//防止xss$t_url = htmlspecialchars($t_url);//对取值进行网址校验和判断preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);if ($matches) {$url = $t_url;$title = '页面加载中,请稍候...';} else {preg_match('/\./i', $t_url, $matche);if ($matche) {$url = 'http://' . $t_url;$title = '页面加载中,请稍候...';} else {$url = 'http://' . $_SERVER['HTTP_HOST'];$title = '参数错误，正在返回首页...';}}} else {$title = '参数缺失，正在返回首页...';$url = 'http://' . $_SERVER['HTTP_HOST'];}?><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript><script>function link_jump(){//禁止其他网站使用我们的跳转页面var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");if (!MyHOST.test(document.referrer)) {location.href="http://" + MyHOST;}location.href="<?php echo $url;?>";}//延时1S跳转，可自行修改延时时间setTimeout(link_jump, 2250);//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题setTimeout(function(){window.opener=null;window.close();}, 50000);</script><title><?php echo $title;?></title><style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db;}#loader-container{width:188px;height:188px;color:white;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out;}#loadingText{font-family:'Raleway',sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}@-webkit-keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}@keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}</style><body><div id="loader-container"><p id="loadingText">页面加载中...</p></div></body></html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 2250); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style type="text/css"> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db;}#loader-container{width:188px;height:188px;color:white;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out;}#loadingText{font-family:'Raleway',sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}@-webkit-keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}@keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}} </style> <body> <div id="loader-container"><p id="loadingText">页面加载中...</p></div> </body> </html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 2250); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style type="text/css"> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db;}#loader-container{width:188px;height:188px;color:white;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out;}#loadingText{font-family:'Raleway',sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}@-webkit-keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}@keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}} </style> <body> <div id="loader-container"><p id="loadingText">页面加载中...</p></div> </body> </html>
- 样式三、
<?php/** @Author : Qinver* @Url : zibll.com* @Date : 2020-09-29 13:18:36* @LastEditTime: 2021-04-27 17:54:39* @Email : 770349780@qq.com* @Project : Zibll子比主题* @Description : 一款极其优雅的Wordpress主题* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！*/if (strlen($_SERVER['REQUEST_URI']) > 384 ||strpos($_SERVER['REQUEST_URI'], "eval(") ||strpos($_SERVER['REQUEST_URI'], "base64")) {@header("HTTP/1.1 414 Request-URI Too Long");@header("Status: 414 Request-URI Too Long");@header("Connection: Close");@exit;}//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好@session_start();$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);//数据处理if (!empty($t_url)) {//判断取值是否加密if ($t_url == base64_encode(base64_decode($t_url))) {$t_url = base64_decode($t_url);}//防止xss$t_url = htmlspecialchars($t_url);//对取值进行网址校验和判断preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);if ($matches) {$url = $t_url;$title = '页面加载中,请稍候...';} else {preg_match('/\./i', $t_url, $matche);if ($matche) {$url = 'http://' . $t_url;$title = '页面加载中,请稍候...';} else {$url = 'http://' . $_SERVER['HTTP_HOST'];$title = '参数错误，正在返回首页...';}}} else {$title = '参数缺失，正在返回首页...';$url = 'http://' . $_SERVER['HTTP_HOST'];}?><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript><script>function link_jump(){//禁止其他网站使用我们的跳转页面var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");if (!MyHOST.test(document.referrer)) {location.href="http://" + MyHOST;}location.href="<?php echo $url;?>";}//延时1S跳转，可自行修改延时时间setTimeout(link_jump, 2250);//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题setTimeout(function(){window.opener=null;window.close();}, 50000);</script><title><?php echo $title;?></title><style type="text/css">.flex-container{width: 100%;height: 100%;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}body{background:#fff;/*背景*/background-image:url(https://api.66mz8.com/api/rand.acg.php?type=%E7%BE%8E%E5%A5%B3&format=jpg);background-repeat:no-repeat;background-position:center center;}.unit{text-align: center;}.unit p{margin-top: 120px;font-family: 'Lato', sans-serif;text-transform: uppercase;color: #6cc;}.heart{position: relative;font-size: 0;width: 138px;}[class*="heart-piece-"]{position: absolute;top: -5px;width: 10px;height: 10px;border-radius: 5px;}.heart-piece-4{-webkit-animation: piece-4 1.0s infinite;animation: piece-4 1.0s infinite;}.heart-piece-3,.heart-piece-5{-webkit-animation: piece-3 1.0s infinite;animation: piece-3 1.0s infinite;}.heart-piece-2,.heart-piece-6{-webkit-animation: piece-2 1.0s infinite;animation: piece-2 1.0s infinite;}.heart-piece-1,.heart-piece-7{-webkit-animation: piece-1 1.0s infinite;animation: piece-1 1.0s infinite;}.heart-piece-0,.heart-piece-8{-webkit-animation: piece-0 1.0s infinite;animation: piece-0 1.0s infinite;}.heart-piece-0{left: 0px;-webkit-animation-delay: 0s;animation-delay: 0s;background-color: #57f1f1;}.heart-piece-1{left: 16px;-webkit-animation-delay: 0.05s;animation-delay: 0.05s;background-color: #3ed6d6;}.heart-piece-2{left: 32px;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;background-color: #42c3e0;}.heart-piece-3{left: 48px;-webkit-animation-delay: 0.15s;animation-delay: 0.15s;background-color: #07ead5;}.heart-piece-4{left: 64px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;background-color: #42c3e0;}.heart-piece-5{left: 80px;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;background-color: #07ead5;}.heart-piece-6{left: 96px;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;background-color: #42c3e0;}.heart-piece-7{left: 112px;-webkit-animation-delay: 0.35s;animation-delay: 0.35s;background-color: #3ed6d6;}.heart-piece-8{left: 128px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;background-color: #57f1f1;}@-webkit-keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@-webkit-keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@-webkit-keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@-webkit-keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@-webkit-keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}}@keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}}</style></head><body><div class="flex-container"><div class="unit"><div class="heart"><div class="heart-piece-0"></div><div class="heart-piece-1"></div><div class="heart-piece-2"></div><div class="heart-piece-3"></div><div class="heart-piece-4"></div><div class="heart-piece-5"></div><div class="heart-piece-6"></div><div class="heart-piece-7"></div><div class="heart-piece-8"></div></div><p style="font-weight:700;">正在检查链接安全....</p></div></div></body></html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 2250); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style type="text/css"> .flex-container{width: 100%;height: 100%;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}body{background:#fff;/*背景*/background-image:url(https://api.66mz8.com/api/rand.acg.php?type=%E7%BE%8E%E5%A5%B3&format=jpg);background-repeat:no-repeat;background-position:center center;}.unit{text-align: center;}.unit p{margin-top: 120px;font-family: 'Lato', sans-serif;text-transform: uppercase;color: #6cc;}.heart{position: relative;font-size: 0;width: 138px;}[class*="heart-piece-"]{position: absolute;top: -5px;width: 10px;height: 10px;border-radius: 5px;}.heart-piece-4{-webkit-animation: piece-4 1.0s infinite;animation: piece-4 1.0s infinite;}.heart-piece-3,.heart-piece-5{-webkit-animation: piece-3 1.0s infinite;animation: piece-3 1.0s infinite;}.heart-piece-2,.heart-piece-6{-webkit-animation: piece-2 1.0s infinite;animation: piece-2 1.0s infinite;}.heart-piece-1,.heart-piece-7{-webkit-animation: piece-1 1.0s infinite;animation: piece-1 1.0s infinite;}.heart-piece-0,.heart-piece-8{-webkit-animation: piece-0 1.0s infinite;animation: piece-0 1.0s infinite;}.heart-piece-0{left: 0px;-webkit-animation-delay: 0s;animation-delay: 0s;background-color: #57f1f1;}.heart-piece-1{left: 16px;-webkit-animation-delay: 0.05s;animation-delay: 0.05s;background-color: #3ed6d6;}.heart-piece-2{left: 32px;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;background-color: #42c3e0;}.heart-piece-3{left: 48px;-webkit-animation-delay: 0.15s;animation-delay: 0.15s;background-color: #07ead5;}.heart-piece-4{left: 64px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;background-color: #42c3e0;}.heart-piece-5{left: 80px;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;background-color: #07ead5;}.heart-piece-6{left: 96px;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;background-color: #42c3e0;}.heart-piece-7{left: 112px;-webkit-animation-delay: 0.35s;animation-delay: 0.35s;background-color: #3ed6d6;}.heart-piece-8{left: 128px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;background-color: #57f1f1;}@-webkit-keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@-webkit-keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@-webkit-keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@-webkit-keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@-webkit-keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}}@keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}} </style> </head> <body> <div class="flex-container"> <div class="unit"> <div class="heart"> <div class="heart-piece-0"></div> <div class="heart-piece-1"></div> <div class="heart-piece-2"></div> <div class="heart-piece-3"></div> <div class="heart-piece-4"></div> <div class="heart-piece-5"></div> <div class="heart-piece-6"></div> <div class="heart-piece-7"></div> <div class="heart-piece-8"></div> </div> <p style="font-weight:700;">正在检查链接安全....</p> </div> </div> </body> </html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 2250); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style type="text/css"> .flex-container{width: 100%;height: 100%;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}body{background:#fff;/*背景*/background-image:url(https://api.66mz8.com/api/rand.acg.php?type=%E7%BE%8E%E5%A5%B3&format=jpg);background-repeat:no-repeat;background-position:center center;}.unit{text-align: center;}.unit p{margin-top: 120px;font-family: 'Lato', sans-serif;text-transform: uppercase;color: #6cc;}.heart{position: relative;font-size: 0;width: 138px;}[class*="heart-piece-"]{position: absolute;top: -5px;width: 10px;height: 10px;border-radius: 5px;}.heart-piece-4{-webkit-animation: piece-4 1.0s infinite;animation: piece-4 1.0s infinite;}.heart-piece-3,.heart-piece-5{-webkit-animation: piece-3 1.0s infinite;animation: piece-3 1.0s infinite;}.heart-piece-2,.heart-piece-6{-webkit-animation: piece-2 1.0s infinite;animation: piece-2 1.0s infinite;}.heart-piece-1,.heart-piece-7{-webkit-animation: piece-1 1.0s infinite;animation: piece-1 1.0s infinite;}.heart-piece-0,.heart-piece-8{-webkit-animation: piece-0 1.0s infinite;animation: piece-0 1.0s infinite;}.heart-piece-0{left: 0px;-webkit-animation-delay: 0s;animation-delay: 0s;background-color: #57f1f1;}.heart-piece-1{left: 16px;-webkit-animation-delay: 0.05s;animation-delay: 0.05s;background-color: #3ed6d6;}.heart-piece-2{left: 32px;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;background-color: #42c3e0;}.heart-piece-3{left: 48px;-webkit-animation-delay: 0.15s;animation-delay: 0.15s;background-color: #07ead5;}.heart-piece-4{left: 64px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;background-color: #42c3e0;}.heart-piece-5{left: 80px;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;background-color: #07ead5;}.heart-piece-6{left: 96px;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;background-color: #42c3e0;}.heart-piece-7{left: 112px;-webkit-animation-delay: 0.35s;animation-delay: 0.35s;background-color: #3ed6d6;}.heart-piece-8{left: 128px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;background-color: #57f1f1;}@-webkit-keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@-webkit-keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@-webkit-keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@-webkit-keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@-webkit-keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}}@keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}} </style> </head> <body> <div class="flex-container"> <div class="unit"> <div class="heart"> <div class="heart-piece-0"></div> <div class="heart-piece-1"></div> <div class="heart-piece-2"></div> <div class="heart-piece-3"></div> <div class="heart-piece-4"></div> <div class="heart-piece-5"></div> <div class="heart-piece-6"></div> <div class="heart-piece-7"></div> <div class="heart-piece-8"></div> </div> <p style="font-weight:700;">正在检查链接安全....</p> </div> </div> </body> </html>
- 最最最好看的go跳转：
<?php/** @Author : Qinver* @Url : zibll.com* @Date : 2020-09-29 13:18:36* @LastEditTime: 2021-04-27 17:54:39* @Email : 770349780@qq.com* @Project : Zibll子比主题* @Description : 一款极其优雅的Wordpress主题* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！*/if (strlen($_SERVER['REQUEST_URI']) > 384 ||strpos($_SERVER['REQUEST_URI'], "eval(") ||strpos($_SERVER['REQUEST_URI'], "base64")) {@header("HTTP/1.1 414 Request-URI Too Long");@header("Status: 414 Request-URI Too Long");@header("Connection: Close");@exit;}//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好@session_start();$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);//数据处理if (!empty($t_url)) {//判断取值是否加密if ($t_url == base64_encode(base64_decode($t_url))) {$t_url = base64_decode($t_url);}//防止xss$t_url = htmlspecialchars($t_url);//对取值进行网址校验和判断preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);if ($matches) {$url = $t_url;$title = '页面加载中,请稍候...';} else {preg_match('/\./i', $t_url, $matche);if ($matche) {$url = 'http://' . $t_url;$title = '页面加载中,请稍候...';} else {$url = 'http://' . $_SERVER['HTTP_HOST'];$title = '参数错误，正在返回首页...';}}} else {$title = '参数缺失，正在返回首页...';$url = 'http://' . $_SERVER['HTTP_HOST'];}?><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript><script>function link_jump(){//禁止其他网站使用我们的跳转页面var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");if (!MyHOST.test(document.referrer)) {location.href="http://" + MyHOST;}location.href="<?php echo $url;?>";}//延时1S跳转，可自行修改延时时间setTimeout(link_jump, 2250);//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题setTimeout(function(){window.opener=null;window.close();}, 50000);</script><title><?php echo $title;?></title><style>html, body { width: 100%; height: 100%; margin: 0; background: #270F34; overflow: hidden; display: flex; align-items: center; justify-content: center } css-doodle { --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569); --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } :container { perspective: 30vmin; } :after, :before { content: ''; background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart; } @place-cell: center; @size: 100%; box-shadow: @m(2, (0 0 50px var(--color))); background: @m(100, (radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat)); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 95% { transform: translateZ(35vmin) rotateZ(@var(--deg)); } } ) }</style></head><body><css-doodle use="var(--rule)"></css-doodle><script src='https://www.wiiuii.cn/cdn/js/go-min.js'></script></body></html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 2250); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style>html, body { width: 100%; height: 100%; margin: 0; background: #270F34; overflow: hidden; display: flex; align-items: center; justify-content: center } css-doodle { --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569); --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } :container { perspective: 30vmin; } :after, :before { content: ''; background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart; } @place-cell: center; @size: 100%; box-shadow: @m(2, (0 0 50px var(--color))); background: @m(100, (radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat)); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 95% { transform: translateZ(35vmin) rotateZ(@var(--deg)); } } ) }</style></head> <body> <css-doodle use="var(--rule)"></css-doodle> <script src='https://www.wiiuii.cn/cdn/js/go-min.js'></script> </body> </html><?php /* * @Author : Qinver * @Url : zibll.com * @Date : 2020-09-29 13:18:36 * @LastEditTime: 2021-04-27 17:54:39 * @Email : 770349780@qq.com * @Project : Zibll子比主题 * @Description : 一款极其优雅的Wordpress主题 * @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。 * @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！ */ if ( strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64") ) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } //通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好 @session_start(); $t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]); //数据处理 if (!empty($t_url)) { //判断取值是否加密 if ($t_url == base64_encode(base64_decode($t_url))) { $t_url = base64_decode($t_url); } //防止xss $t_url = htmlspecialchars($t_url); //对取值进行网址校验和判断 preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches); if ($matches) { $url = $t_url; $title = '页面加载中,请稍候...'; } else { preg_match('/\./i', $t_url, $matche); if ($matche) { $url = 'http://' . $t_url; $title = '页面加载中,请稍候...'; } else { $url = 'http://' . $_SERVER['HTTP_HOST']; $title = '参数错误，正在返回首页...'; } } } else { $title = '参数缺失，正在返回首页...'; $url = 'http://' . $_SERVER['HTTP_HOST']; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript> <script> function link_jump() { //禁止其他网站使用我们的跳转页面 var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>"); if (!MyHOST.test(document.referrer)) { location.href="http://" + MyHOST; } location.href="<?php echo $url;?>"; } //延时1S跳转，可自行修改延时时间 setTimeout(link_jump, 2250); //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题 setTimeout(function(){window.opener=null;window.close();}, 50000); </script> <title><?php echo $title;?></title> <style>html, body { width: 100%; height: 100%; margin: 0; background: #270F34; overflow: hidden; display: flex; align-items: center; justify-content: center } css-doodle { --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569); --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } :container { perspective: 30vmin; } :after, :before { content: ''; background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart; } @place-cell: center; @size: 100%; box-shadow: @m(2, (0 0 50px var(--color))); background: @m(100, (radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat)); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 95% { transform: translateZ(35vmin) rotateZ(@var(--deg)); } } ) }</style></head> <body> <css-doodle use="var(--rule)"></css-doodle> <script src='https://www.wiiuii.cn/cdn/js/go-min.js'></script> </body> </html>
- 说明：上方js文件是调用我自己网站的，你自己下载或者打开复制到自己网站目录下使用。
30.回到顶部悬挂猫咪
![WordPress添加回到顶部悬挂猫咪[WP教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-QRHTVAKLSGP765JO.png)
29.底部添加蓝色波浪
- 在zibll主题目录下，footer.php文件中的“</footer>”（重要）下面添加下面的代码：
<!--底部波浪开始--><div class="wiiuii_layout"><svg class="editorial"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 24 150 28"preserveAspectRatio="none"><defs><path id="gentle-wave"d="M-160 44c30 058-18 88-18s58 18 88 1858-18 88-1858 18 88 18v44h-352z" /></defs><g class="parallax"><use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/><use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/><use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/></g></svg></div><style type='text/css'>.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}</style><!--底部波浪结束--><!--底部波浪开始--> <div class="wiiuii_layout"> <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/> <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/> <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/> </g> </svg> </div> <style type='text/css'> .parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;} </style> <!--底部波浪结束--><!--底部波浪开始--> <div class="wiiuii_layout"> <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/> <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/> <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/> </g> </svg> </div> <style type='text/css'> .parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;} </style> <!--底部波浪结束-->
- 截图：
28.顶部导航栏添加背景图片
- CSS代码：
/*导航栏图片背景*/.header-layout-1{position:relative;background-image:url(https://img.wiiuii.cn/img/huacao.png);background-position:center right;background-size:auto 100%;}/*导航栏图片背景*/ .header-layout-1{position:relative;background-image:url(https://img.wiiuii.cn/img/huacao.png);background-position:center right;background-size:auto 100%;}/*导航栏图片背景*/ .header-layout-1{position:relative;background-image:url(https://img.wiiuii.cn/img/huacao.png);background-position:center right;background-size:auto 100%;}
说明：图片背景是透明的，然后我自己乱搞的花花，你可以自己弄更好看的图片，图片大小是1800*80、2000*80（后这者感觉可能优于前者，O(∩_∩)O哈哈~）
- 截图:
- 感谢网友图片提供素材：（见下图）
- 说明：右键保存即可。
27.文章页面添加文章字数和阅读时间
- 教程：
1、在主题目录下functions.php文件把下面的代码添加进去：
// 文章字数和阅读时间function count_words_read_time () {global $post;$text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');$read_time = ceil($text_num/300); // 修改数字300调整时间$output .= '共计' . $text_num . '字，阅读大约' . $read_time . '分钟。';return $output;}// 文章字数和阅读时间 function count_words_read_time () { global $post; $text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8'); $read_time = ceil($text_num/300); // 修改数字300调整时间 $output .= '共计' . $text_num . '字，阅读大约' . $read_time . '分钟。'; return $output; }// 文章字数和阅读时间 function count_words_read_time () { global $post; $text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8'); $read_time = ceil($text_num/300); // 修改数字300调整时间 $output .= '共计' . $text_num . '字，阅读大约' . $read_time . '分钟。'; return $output; }
2.在主题目录zibll/inc/functions/zib-single.php,把下面代码添加到132行处（如下图）
<!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?><!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?><!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?>
- 截图：
- 说明：（必看）文章字数和阅读时间都不是很准，同时用处也不是很大…喜欢的话自己拿去试试吧！
26.添加疫情分布地图小工具
![WordPress添加疫情情况地图小工具[WP教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-I5XsAGD4hSZWEjuF.png)
2021/6/19/ 22:3825.底部可爱底线提示
- 在主题目录—>footer.php的“<footer class….>”上方加入以下代码：
<!--底部可爱底线提示--><div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src=https://oss.qfya.com/wp-content/uploads/2021/06/19-BmxkBwdiGmUMfYoW.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text" style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div><!--底部可爱底线提示--> <div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src=https://oss.qfya.com/wp-content/uploads/2021/06/19-BmxkBwdiGmUMfYoW.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text" style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div><!--底部可爱底线提示--> <div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src=https://oss.qfya.com/wp-content/uploads/2021/06/19-BmxkBwdiGmUMfYoW.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text" style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>
- CSS代码：
/*底部可爱底线提示*/.lastpagenotice_noticewrap{color:hsla(0, 2.1%, 18.8%, 0.6);}.lastpagenotice_noticewrap img{height:73px; width:88px; margin:0 auto}.lastpagenotice_noticewrap .lastpagenotice_text{display:block; position:absolute; font-size:15px; line-height:20px; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:-webkit-calc(50% + 60px); left:calc(50% + 60px)}.lastpagenotice_noticewrap .lastpagenotice_line{width:100%; height:1px; background-color:hsla(0,0%,100%,.05); position:absolute; bottom:0}.app_normal{text-align:center; position:relative}/*底部可爱底线提示*/ .lastpagenotice_noticewrap{color:hsla(0, 2.1%, 18.8%, 0.6);}.lastpagenotice_noticewrap img{height:73px; width:88px; margin:0 auto}.lastpagenotice_noticewrap .lastpagenotice_text{display:block; position:absolute; font-size:15px; line-height:20px; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:-webkit-calc(50% + 60px); left:calc(50% + 60px)}.lastpagenotice_noticewrap .lastpagenotice_line{width:100%; height:1px; background-color:hsla(0,0%,100%,.05); position:absolute; bottom:0}.app_normal{text-align:center; position:relative}/*底部可爱底线提示*/ .lastpagenotice_noticewrap{color:hsla(0, 2.1%, 18.8%, 0.6);}.lastpagenotice_noticewrap img{height:73px; width:88px; margin:0 auto}.lastpagenotice_noticewrap .lastpagenotice_text{display:block; position:absolute; font-size:15px; line-height:20px; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:-webkit-calc(50% + 60px); left:calc(50% + 60px)}.lastpagenotice_noticewrap .lastpagenotice_line{width:100%; height:1px; background-color:hsla(0,0%,100%,.05); position:absolute; bottom:0}.app_normal{text-align:center; position:relative}
- 截图
24.文章添加版权声明
在子比主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码：
<div><!--网站声明代码start--><div><fieldsetstyle="border: 1px dashed #008cff;padding: 10px;border-radius: 5px;line-height: 2em;color: #6d6d6d;"><legendalign="center"style="width: 30%;text-align: center;background-color: #008cff;border-radius: 5px;background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;"">文章版权声明</legend>1、本网站名称：<span style="color: #3333ff"><span style="color: #FF6666; font-size: 18px"><strong>清风博客</strong></span></span><br />2、本站永久网址：<font color="#FF6666">https://www.qfya.com</font><br />3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ1141383287进行删除处理。<br />4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br /></fieldset></div><!--网站声明代码end--><br /></div><div> <!--网站声明代码start--> <div> <fieldset style=" border: 1px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em; color: #6d6d6d; " > <legend align="center" style=" width: 30%; text-align: center; background-color: #008cff; border-radius: 5px; background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" " > 文章版权声明 </legend> 1、本网站名称：<span style="color: #3333ff" ><span style="color: #FF6666; font-size: 18px" ><strong>清风博客</strong></span ></span ><br /> 2、本站永久网址：<font color="#FF6666">https://www.qfya.com</font ><br /> 3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ1141383287进行删除处理。<br /> 4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br /> 5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br /> 6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br /> </fieldset> </div> <!--网站声明代码end--><br /> </div><div> <!--网站声明代码start--> <div> <fieldset style=" border: 1px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em; color: #6d6d6d; " > <legend align="center" style=" width: 30%; text-align: center; background-color: #008cff; border-radius: 5px; background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" " > 文章版权声明 </legend> 1、本网站名称：<span style="color: #3333ff" ><span style="color: #FF6666; font-size: 18px" ><strong>清风博客</strong></span ></span ><br /> 2、本站永久网址：<font color="#FF6666">https://www.qfya.com</font ><br /> 3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ1141383287进行删除处理。<br /> 4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br /> 5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br /> 6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br /> </fieldset> </div> <!--网站声明代码end--><br /> </div>
注：自行修改代码中的文字内容。
- 截图
23.顶部添加彩色进度条
- CSS代码：
/*进度条加载显示*/#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}/*进度条加载显示*/ #percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}/*进度条加载显示*/ #percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
- javascript代码：
//进度条加载显示$(window).scroll(function() {var a = $(window).scrollTop(),c = $(document).height(),b = $(window).height();scrollPercent = a / (c - b) * 100;scrollPercent = scrollPercent.toFixed(1);$("#percentageCounter").css({width: scrollPercent + "%"});}).trigger("scroll");//进度条加载显示 $(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c - b) * 100; scrollPercent = scrollPercent.toFixed(1); $("#percentageCounter").css({ width: scrollPercent + "%" }); }).trigger("scroll");//进度条加载显示 $(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c - b) * 100; scrollPercent = scrollPercent.toFixed(1); $("#percentageCounter").css({ width: scrollPercent + "%" }); }).trigger("scroll");
- 在主题目录header.php中，添加以下代码，放在body标签下（最后一行）
<div id="percentageCounter"></div><div id="percentageCounter"></div><div id="percentageCounter"></div>
22.添加复制提示框
- javascript代码：
//复制提示document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};//复制提示 document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};//复制提示 document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};
子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
- 截图
21.首页文章列表浮出
- CSS代码：
/*列表依次进入*/posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}/*列表依次进入*/ posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}/*列表依次进入*/ posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}
- javascript代码：
// 列表依次进入let lis = $('posts');Array.from(lis).forEach((item, index) => {setTimeout(() => {$(item).addClass('fadeIn');}, 150 * index);});// 列表依次进入 let lis = $('posts'); Array.from(lis).forEach((item, index) => { setTimeout(() => { $(item).addClass('fadeIn'); }, 150 * index); });// 列表依次进入 let lis = $('posts'); Array.from(lis).forEach((item, index) => { setTimeout(() => { $(item).addClass('fadeIn'); }, 150 * index); });
两个都要添加，暂无截图，效果可看看本站（需刷新）或自行测试
20.首页主内容上方添加跑马灯公告小工具
- 网站后台—>外观—>小工具—>自定义HTML，然后添加到合适位置集合即可。
- 代码：
<!--跑马灯公告--><style>#nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }</style><div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;"><marquee><b id="nr">欢迎来到代清风博客 - 专注技术教程和源码资源分享。</b> </marquee></div><!--跑马灯公告--> <style> #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} } </style> <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;"> <marquee> <b id="nr">欢迎来到代清风博客 - 专注技术教程和源码资源分享。</b> </marquee> </div><!--跑马灯公告--> <style> #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} } </style> <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;"> <marquee> <b id="nr">欢迎来到代清风博客 - 专注技术教程和源码资源分享。</b> </marquee> </div>
截图：
19.添加鼠标样式
CSS代码：（本站的样式）
/** 鼠标样式 开始**//** 普通指针样式**/body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;}/** 链接指针样式**/a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;}/** 鼠标样式 结束**//** 鼠标样式 开始**/ /** 普通指针样式**/ body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;} /** 链接指针样式**/ a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;} /** 鼠标样式 结束**//** 鼠标样式 开始**/ /** 普通指针样式**/ body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;} /** 链接指针样式**/ a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;} /** 鼠标样式 结束**/
18.设置网站动态标题
![WordPress设置网站动态标题[WP教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-ynFRfHzIwVZqwL5K.png)
2021/6/19/ 22:0117.首页文章列表悬停上浮
- CSS代码：
/*首页文章列表悬停上浮*/@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);}}/*首页文章列表悬停上浮*/ @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);}}/*首页文章列表悬停上浮*/ @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);}}
- 截图
16.头像呼吸光环和鼠标悬停旋转放大
- CSS代码：
/*头像呼吸光环和鼠标悬停旋转放大*/.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}/*头像呼吸光环和鼠标悬停旋转放大*/ .avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}/*头像呼吸光环和鼠标悬停旋转放大*/ .avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
- 截图
15.导航栏标题字体加粗
- CSS代码：
/*导航栏字体加粗*/ul.nav {font-weight: 700;}/*导航栏字体加粗*/ ul.nav {font-weight: 700;}/*导航栏字体加粗*/ ul.nav {font-weight: 700;}
- 截图
14.主题logo扫光
- CSS代码：
/* logo扫光 */.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}/* logo扫光 */ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}/* logo扫光 */ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
效果请看本站左上角的LOGO处。
13.页文章点击更多按钮样式美化
CSS代码：
/点击更多/.theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 0; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}/点击更多/ .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 0; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}/点击更多/ .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 0; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}
- 截图
12.引用阿里巴巴矢量图标库彩色图标
2021/6/19/ 21:4311.添加侧边彩色滚动条
2021/6/19/ 20:4710.添加点击彩色效果
2021/6/19/ 20:429.文章标签美化
2021/6/19/ 20:398.添加底部统计信息模块小工具
- 想不到啥标题好，标题有点懵的话，请看截图：
<!--信息统计开始--><div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);"><div class="siteCount"><div class="wrapper"><div class="p-wh"><ul><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p><span><script type="text/javascript" >document.write(tj_jstext);</script></span><p>星友总数</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p><span><script type="text/javascript" >document.write(tj_rzzs);</script></span><p>文章总数</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p><span><script type="text/javascript" >document.write(tj_view);</script></span><p>浏览总数</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p><span></span><span><script type="text/javascript" >document.write(tj_24h);</script></span><p>今日发布</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p><span><script type="text/javascript" >document.write(tj_wdyx);</script></span><p>稳定运行</p></li></ul></div><div class="join"><p style="text-align:center">欢迎光临星语的小木屋，快速获取优质IT资源吧！<br><br>By：星语社长</p></div></div></div></div><style type="text/css">/*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://oss.qfya.com/wp-content/uploads/2021/06/19-JYj9cPCaSKUOCsTb.png) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}/*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;}/*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;}/*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;}@media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}}</style><script>//document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent"document.getElementById("nuandao").parentNode.parentNode.style.padding=0</script><!--信息统计结束--><!--信息统计开始--> <div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);"> <div class="siteCount"> <div class="wrapper"> <div class="p-wh"> <ul> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_jstext); </script></span> <p>星友总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_rzzs); </script></span> <p>文章总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_view); </script></span> <p>浏览总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p> <span></span> <span><script type="text/javascript" > document.write(tj_24h); </script></span> <p>今日发布</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_wdyx); </script></span> <p>稳定运行</p> </li> </ul> </div> <div class="join"> <p style="text-align:center">欢迎光临星语的小木屋，快速获取优质IT资源吧！<br><br>By：星语社长</p> </div> </div> </div> </div> <style type="text/css"> /*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://oss.qfya.com/wp-content/uploads/2021/06/19-JYj9cPCaSKUOCsTb.png) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;} /*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;} /*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;} /*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;} @media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}} </style> <script> //document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent" document.getElementById("nuandao").parentNode.parentNode.style.padding=0 </script> <!--信息统计结束--><!--信息统计开始--> <div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);"> <div class="siteCount"> <div class="wrapper"> <div class="p-wh"> <ul> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_jstext); </script></span> <p>星友总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_rzzs); </script></span> <p>文章总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_view); </script></span> <p>浏览总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p> <span></span> <span><script type="text/javascript" > document.write(tj_24h); </script></span> <p>今日发布</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_wdyx); </script></span> <p>稳定运行</p> </li> </ul> </div> <div class="join"> <p style="text-align:center">欢迎光临星语的小木屋，快速获取优质IT资源吧！<br><br>By：星语社长</p> </div> </div> </div> </div> <style type="text/css"> /*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://oss.qfya.com/wp-content/uploads/2021/06/19-JYj9cPCaSKUOCsTb.png) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;} /*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;} /*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;} /*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;} @media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}} </style> <script> //document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent" document.getElementById("nuandao").parentNode.parentNode.style.padding=0 </script> <!--信息统计结束-->
2021/6/19/ 20:35本站使用的版本，PHP代码自己看文章里面的，图标是阿里巴巴矢量图库，自己弄图标，然后修改<li>标签里面的代码即可，背景图片自己修改或者下载到本地：
<!--信息统计开始--><div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);"><div class="siteCount"><div class="wrapper"><div class="p-wh"><ul><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p><span><script type="text/javascript" >document.write(tj_jstext);</script></span><p>用户总数</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p><span><script type="text/javascript" >document.write(tj_rzzs);</script></span><p>文章总数</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p><span><script type="text/javascript" >document.write(tj_view);</script></span><p>浏览总数</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p><span></span><span><script type="text/javascript" >document.write(tj_24h);</script></span><p>今日发布</p></li><li><p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p><span><script type="text/javascript" >document.write(tj_wdyx);</script></span><p>稳定运行</p></li></ul></div><div class="join"><p style="text-align:center">欢迎光清风博客，快速获取优质IT资源吧！<br><br>By：清风社长</p></div></div></div></div><style type="text/css">/*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://oss.qfya.com/wp-content/uploads/2021/06/10-91U7FcZBjN6tdIUv.png) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}/*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;}/*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;}/*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;}@media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}}</style><script>//document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent"document.getElementById("nuandao").parentNode.parentNode.style.padding=0</script><!--信息统计结束--><!--信息统计开始--> <div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);"> <div class="siteCount"> <div class="wrapper"> <div class="p-wh"> <ul> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_jstext); </script></span> <p>用户总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_rzzs); </script></span> <p>文章总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_view); </script></span> <p>浏览总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p> <span></span> <span><script type="text/javascript" > document.write(tj_24h); </script></span> <p>今日发布</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_wdyx); </script></span> <p>稳定运行</p> </li> </ul> </div> <div class="join"> <p style="text-align:center">欢迎光清风博客，快速获取优质IT资源吧！<br><br>By：清风社长</p> </div> </div> </div> </div> <style type="text/css"> /*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://oss.qfya.com/wp-content/uploads/2021/06/10-91U7FcZBjN6tdIUv.png) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;} /*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;} /*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;} /*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;} @media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}} </style> <script> //document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent" document.getElementById("nuandao").parentNode.parentNode.style.padding=0 </script> <!--信息统计结束--><!--信息统计开始--> <div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);"> <div class="siteCount"> <div class="wrapper"> <div class="p-wh"> <ul> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_jstext); </script></span> <p>用户总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_rzzs); </script></span> <p>文章总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p> <span><script type="text/javascript" > document.write(tj_view); </script></span> <p>浏览总数</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p> <span></span> <span><script type="text/javascript" > document.write(tj_24h); </script></span> <p>今日发布</p> </li> <li> <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p> <span><script type="text/javascript" > document.write(tj_wdyx); </script></span> <p>稳定运行</p> </li> </ul> </div> <div class="join"> <p style="text-align:center">欢迎光清风博客，快速获取优质IT资源吧！<br><br>By：清风社长</p> </div> </div> </div> </div> <style type="text/css"> /*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://oss.qfya.com/wp-content/uploads/2021/06/10-91U7FcZBjN6tdIUv.png) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;} /*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;} /*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;} /*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;} @media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}} </style> <script> //document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent" document.getElementById("nuandao").parentNode.parentNode.style.padding=0 </script> <!--信息统计结束-->
7.添加热门标签页面
![子比主题添加热门标签页面[子比主题教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-pg4ZF02IUqaCMunu.png)
2021/6/19/ 20:276.添加VIP视频在线解析页面
2021/6/19/ 16:315.自定义后台路径参数及伪后台
![WordPress自定义后台路径参数及伪后台[WP教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-SvbaTJnX4B2z02iR.png)
2021/6/19/ 20:174.侧边栏添加简单的小模块
![WordPress侧边栏添加简单的小模块[WP小工具]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-qqtcQSWirbL3whHf.png)
2021/6/19/ 20:103.添加滚动播报小工具
![WordPress添加滚动播报小工具[WP小工具]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/20-w0bHkoX1UZ3H88Vw.png)
2021/6/19/ 20:052.添加FPS帧率显示
![WordPress添加FPS帧率显示[WP教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-9JMUMmbYRbYbzsoX.png)
2021/6/19/ 20:021.添加微语页面
![子比主题添加微语页面[子比主题教程]-清风博客](https://oss.qfya.com/wp-content/uploads/2021/06/19-8Yrb79PHSypYczur.png)
2021/6/19/ 19:56© 版权声明
THE END
![表情[guzhang]-清风博客](https://www.qfya.com/wp-content/themes/zibll/img/smilies/guzhang.gif)
- 最新
- 最热
只看作者