子比主题美化教程(备忘录)[更新时间:2022年11月12日] 

 子比主题美化教程(备忘录)[更新时间:2022年11月12日] 

140612

前言

本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。

美化说明：

  • 每个人的审美观念不一样，所以请先参考本站或测试在用。
  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请要测试后在进行美化。
  • 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
  • 子比主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放。
  • 嗯…暂时想到这些，以后想到在加。

美化教程（集合）

说明：（重要）

  • 一些老教程随机顺序，新教程排在最后，越往后越新。
  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • （最新版）CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式
  • （最新版）JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码
  • （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。
  • ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑
  • 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。
  • 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。
1.文章上一篇/下一篇封面图

一、PHP代码

在主题目录下“func.php”文件合适位置添加下面的代码【默认图片url自己改】：

/**
* 子比文章上一篇/下一篇背景图函数
*/
function wiiuii_prev_next_cover($wiui_post){
    if(!empty($wiui_post)){
        $wiui_post_cover = get_post_meta($wiui_post->ID, 'cover_image', true);
        if(empty($wiui_post_cover)){
            $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $wiui_post->post_content, $matches);
            $wiui_post_cover = $matches[1][0];
        }
    }else{
        // 默认图片
        $wiui_post_cover = "https://www.wiiuii.cn/wp-content/uploads/2022/08/3d16bac247231101.jpg";
    }
    return '<img class="wiiuii-prev_next-cover" src="' . $wiui_post_cover . '" />';
}

在主题目录“zibll/inc/functions/functions.php”文件【自己看图中的代码，位置】添加下面的代码

图片[1]- 子比主题美化教程(备忘录)[更新时间:2022年11月12日] -时尚博客
添加代码位置
<?php echo wiiuii_prev_next_cover($prev_post);/*455行a标签上方->上一篇文章封面*/ ?>
<?php echo wiiuii_prev_next_cover($next_post);/*466行a标签上方->下一篇文章封面*/ ?>

二、CSS代码

css样式代码就不说哪里添加了，聪明人都知道…..

/*文章上一篇/下一篇背景图*/
.content-wrap>.content-layout>.theme-box>.article-nav{height:100%}
.article-nav>.main-bg.box-body.main-shadow{position:relative;overflow:hidden;height:100%}
.article-nav>.main-bg.box-body.main-shadow>a{position:absolute;z-index:2}
.article-nav>.box-body+.box-body>a{right:15px}
.wiiuii-prev_next-cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.article-nav>.main-bg.box-body.main-shadow::before,.wiiuii-prev_next-cover{position:absolute;top:0;left:0;right:0;bottom:0}
.article-nav>.main-bg.box-body.main-shadow::before{content:"";transition:opacity .5s cubic-bezier(.4,.01,.165,.99);z-index:1;background:var(--main-shadow);-webkit-backdrop-filter:saturate(0) blur(3px);backdrop-filter:saturate(0) blur(3px)}
.article-nav>.main-bg.box-body.main-shadow:hover::before{opacity:0}

三、效果

图片[2]- 子比主题美化教程(备忘录)[更新时间:2022年11月12日] -时尚博客
效果图
2.文章列表右上角添加文章置顶+新文章发布ICON图标
  • PHP代码

在子比主题目录下“func.php”(子比主题推荐放这里）或者“functions.php”，在合适位置放下面PHP代码

/**
* 新文章发布New小图标
*/
function wiiuii_post_newicon($post){
    //date_default_timezone_set('PRC');
    $wiui_date = date("Y-m-d H:i:s");
    $wiui_post_date = get_the_time('Y-m-d H:i:s', $post);
    $wiui_diff = (strtotime($wiui_date)-strtotime($wiui_post_date))/3600;
    if($wiui_diff<24){
        $wiui_new_icon = '<div class="wiiuii-new-icon"><img src="https://img.wiiuii.cn/img/new.png" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $wiui_new_icon = '<div class="wiiuii-new-icon"><img src="https://img.wiiuii.cn/img/xin-top.png" draggable="false" alt="置顶文章" /></div>';
    }else{
        $wiui_new_icon = '';
    }
    //开始输出
    return $wiui_new_icon;
}

上面《img》标签icon图标链接自己修改。

  • 最关键的PHP代码及放置位置

在子比主题目录下“/zibll/inc/functions/zib-posts-list.php”文件中，大概440行的文章放入下面PHP代码（看图）

$html .= wiiuii_post_newicon($post);//星语新文章+置顶文章icon图标函数
图片[2]-子比主题美化教程(备忘录)[更新时间:2022年11月12日]-星语的小木屋

440行的文章放入

CSS代码

/*新文章发布图标样式*/
.posts-item{position: relative !important;}
.wiiuii-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.wiiuii-new-icon img{-webkit-user-drag: none;}
  • 效果
图片[3]-子比主题美化教程(备忘录)[更新时间:2022年11月12日]-星语的小木屋
图标效果
3.子比主题下载页面美化（简单的美化）

说明:

这是简单的改动一下代码，添加了几个类，如果作者更新主题时下载页面没改动代码的话，更新主题后【复制粘贴代码】进去就能用！（更新前记得备份！记得备份！记得备份！不然就被刷新代码了）

代码:（一些说明请仔细看）

  • 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;
}

PHP代码：（这是整个文件的代码，粘贴时记得把那个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://img.wiiuii.cn/img/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B71.png" /><p>关注星语公众号不迷路</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.wiiuii.cn</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
  • 有一些文字说明比如：站长声明、下载说明，自己在代码中修改一下。
  • 微信公众号的图片+文字，代码里面有注释提示的，自己改一下就好。
  • 有疑问请留言。

效果:

图片[9]-子比主题美化教程(备忘录)[更新时间:2022年11月12日]-星语的小木屋
下载页面美化
3.敬请期待….

时尚博客站长正在努力学习中…..

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

© 版权声明
版权声明 1 本网站名称：时尚博客(lishishang.cn)
2 本站永久网址：https://lishishang.cn/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ3572069413进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
技术教程
喜欢就支持一下吧
点赞12 分享
时尚博客站长的头像-时尚博客超级大会员
不影响收录不降权情况下该怎么去做网站备案？-时尚博客
不影响收录不降权情况下该怎么去做网站备案？
不影响收录不降权情况下该怎么去做网站备案？
9个月前 12.9W+
微信朋友圈折叠图片，广告会被放入消息盒子-时尚博客
微信朋友圈折叠图片，广告会被放入消息盒子
微信朋友圈折叠图片，广告会被放入消息盒子
1年前 1.6W+
应用宝上架所需《安全评估报告》《互联网信息服务安全承诺书》模板-时尚博客
应用宝上架所需《安全评估报告》《互联网信息服务安全承诺书》模板
应用宝上架所需《安全评估报告》《互联网信息服务安全承诺书》模板
1年前 1.6W+
PHP横幅广告店标LOGO制作源码 在线生成广告网站-时尚博客
PHP横幅广告店标LOGO制作源码 在线生成广告网站
PHP横幅广告店标LOGO制作源码 在线生成广告网站
1年前 8464
苹果cms10Mxone5.1多功能模板带后台-时尚博客
苹果cms10Mxone5.1多功能模板带后台
苹果cms10Mxone5.1多功能模板带后台
1年前 6896
图片加密网络平台系统源码 附带配置说明及教程-时尚博客
图片加密网络平台系统源码 附带配置说明及教程
图片加密网络平台系统源码 附带配置说明及教程
1年前 6450
相关推荐
评论 共1条

请登录后发表评论

    只看作者
    • 时尚博客站长的头像-时尚博客超级大会员时尚博客站长徽章-资深玩家-时尚博客等级-LV6-时尚博客作者0
      
import random
import cv2
import numpy as np
 
def cal(point,here):
    # 计算樱花中的坐标在屏幕中投影的坐标
    # here不断增大，delta不断减少
    delta = point[0] - here
    if delta==0:
        return [-1, -1, 1, 0, 0]
    x = point[1]/delta   # 投影在屏幕上x坐标
    y = point[2]/delta   # 投影在屏幕上y坐标
    r = point[3]/delta   # 星球半径
    return [x, y, r]
 
def display_all(sakura,here):
      result=[]
      for i in range(sakura_num):
            position = cal(sakura[i],here)
            result.append(position)
      return result
 
if __name__ == "__main__":
     height=1080
     width=1920
     step = 0.5
     min_r = 1
     max_r = 200
     sakura_num = 150
     x_far = 100*2
     y_far = width*x_far
     z_far = height*x_far
     here = 0
     sakura = [[0,0,0,0,0] for i in range(sakura_num)]
     cv2.namedWindow('sakura',0)
     while True:
           canvas=np.zeros((height,width,3),dtype=np.uint8)
           here+=step
           for i in range(sakura_num):
                  while True:
                          position = cal(sakura[i],here)
                          if (0 <= position[0] < width and
                              0 <= position[1] here):
                              break
                          else:
                              sakura[i][0] = random.randint(x_far, 2*x_far)+here
                              sakura[i][1] = random.randint(0, 2*y_far)
                              sakura[i][2] = random.randint(0, 2*z_far)
                              sakura[i][3] = random.randint(min_r, max_r)
           result=display_all(sakura,here)
           result=np.uint16(result).tolist()
           for i in range(sakura_num):
                radius=np.random.randint(3,15,size=(1,2)).tolist()[0]
                cv2.ellipse(canvas,tuple(result[i][0:2]),tuple(radius),30,0,360,color=(233,192,255),thickness = -1)
           cv2.imshow('sakura',canvas)
           if cv2.waitKey(10)==27:
               cv2.destroyAllWindows()
               break
      4个月前
- -
加载中...
换一句
默认头像

换一句
     ——更多教程，关注时尚博客——
点击在线投稿
投稿邮箱：3572069413@qq.com
交流 QQ：3572069413
 
排行榜
标签
软件工具视频福利视频热舞福利行业新闻网站源码精品源码电脑软件游戏源码洛丽塔汉服资讯汉服礼仪汉服百科汉服形制汉服图片汉服发型汉服水手服最新资讯技术教程手机软件