🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
返回列表 发布新帖
查看: 203|回复: 0

[代码技巧] 子比主题 – 独立下载页面样式美化

[复制链接]
连续签到LV.1
起源之星
任务·年会员
累计签到LV.3
+2
00001 FLLTCN
社区贡献
344 214 23798
等级头衔
Icon组别 : 管理员
Icon等级 :

积分成就
   钻石 : 196 颗
   贡献 : 13641 点
   金币 : 4 枚
Icon在线时间 : 1924 小时
Icon注册时间 : 2024-11-22
Icon最后登录 : 2026-7-22

荣誉勋章

连续签到LV.1起源之星任务·年会员累计签到LV.3

送礼物:3 收礼物:1
00001 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-9 22:53:03 | 查看全部 |阅读模式 浙江金华

交易无需等待,成交就是现在,全面资源整合网络大咖云集,让你轻松玩转互联网!

您需要 登录 才可以下载或查看,没有账号?立即注册

×
这是子比主题自带的独立下载页面,我给他简单美化了一下,我觉得这个功能不错,在很早很早的时候我就搞了这个样式,并且我看他很简约我加了一个弹窗,这个弹窗也是我写的,话不多说喜欢的自行部署吧!
tengfei_down (86).webp tengfei_down (85).webp

代码部署



这个我们要打开独立页面按钮,定位:子比主题–>>商城&付费–>>商城配置–>>独立下载页面开关
然后我们打开按钮之后,接下来定位:/wp-content/themes/zibll/pages这个目录下面我们创建一个文件,那么这个文件的名字你随便,我建议正规点用:download.php文件,将下面的代码放里面即可!

  1. <?php

  2. /**
  3. * Template name: TF-资源下载
  4. * Description:   TF-独立资源下载页面
  5. */

  6. if (empty($_GET['post'])) {
  7.   get_header();
  8.   get_template_part('template/content-404');
  9.   get_footer();
  10.   exit;
  11. }
  12. get_header();
  13. $post_id = $_GET['post'];

  14. function zibpay_get_down_html($post_id)
  15. {
  16.   $pay_mate = get_post_meta($post_id, 'posts_zibpay', true);
  17.   $html = '';
  18.   if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') {
  19.     return get_template_part('template/content-404');
  20.   };
  21.   
  22.   //文章略缩图
  23.   $thumbnail = zib_post_thumbnail('full', '', true, $post_id);
  24.   
  25.   // 查询是否已经购买
  26.   $paid_obj = zibpay_is_paid($post_id);
  27.   $posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true);
  28.   $pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title;
  29.   $pay_doc = $pay_mate['pay_doc'];
  30.   $pay_details = $pay_mate['pay_details'];
  31.   $user_qx = zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id);
  32.   if ($paid_obj) {
  33.     //已经购买直接显示下载盒子

  34.     $paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']);
  35.     $paid_name2 = '<badge class="img-badge left jb-red" style="z-index: 2;font-size: 12px;padding: 2px 10px;line-height: 1.4;" img-badge="" left=""><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</badge>';
  36.     if($paid_name =='推广会员免费'||$paid_name =='代理会员免费'){
  37.         $dowmbox = '<div style="/*margin-bottom:3em;*/">' . $user_qx . '</div>';
  38.     }else{
  39.         $dowmbox = '<div style="/*margin-bottom:3em;*/"><span class="badg c-red btn-block">免费资源不占用会员的免费下载次数</span>' . $user_qx . '</div>';
  40.     }
  41.     $pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : '';
  42.    
  43.     if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) {
  44.       $dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免费资源,请登录后下载</b></div>';
  45.       $pay_extra_hide = '<div class="text-center pay-extra-hide">';
  46.       $pay_extra_hide .= '<p class="box-body muted-2-color">请先登录!</p>';
  47.       $pay_extra_hide .= '<p>';
  48.       $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>';
  49.       $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>';
  50.       $pay_extra_hide .= '</p>';
  51.       $pay_extra_hide .= zib_social_login(false);
  52.       $pay_extra_hide .= '</div>';
  53.     }
  54.    
  55.     $html = '<div class="download-demo">';
  56.     $html .= '<div class="download-xiyang"><div class="download-right">';
  57.     /*获取文章略缩图*/
  58.     $html .= '<div class="download-sty item-thumbnail">' . $paid_name2 . '<img src="'.$thumbnail.'" /></div>';
  59.    
  60.     $html .= '<span class="display">' . $paid_name2 . '</span><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></div>';

  61.     $html .= '<div>' . $pay_doc . '</div>';
  62.     $html .= '<div class="muted-2-color em09">' . $pay_details . '</div>';

  63.     $html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>';
  64.     $html .= '</div></div>';
  65.    
  66.   } else {
  67.     //未购买
  68.     $html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';

  69.     $html .= '<div>' . $pay_doc . '</div>';
  70.     $html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>';
  71.     $html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暂无下载权限</b></div>';
  72.     $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>';
  73.   }

  74.   return $html;
  75. }

  76. ?>
  77. <style>
  78. #smcos_mhz {
  79.     color: #555555;
  80.     overflow: hidden;
  81.     margin: 10px 0;
  82.     padding: 15px 15px 15px 35px;
  83.     box-shadow: 6px 0 12px -5px rgb(190,196,252), -6px 0 12px -5px rgb(189,196,252);
  84.     background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  85. }
  86. #smcos_tkzj {
  87.     color: #555555;
  88.     overflow: hidden;
  89.     margin: 10px 0;
  90.     padding: 15px 15px 15px 35px;
  91.     box-shadow: 6px 0 12px -5px rgb(253,223,234), -6px 0 12px -5px rgb(215,240,243);
  92.     background: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%);
  93. }

  94. .mb10{display:none;}
  95. .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;}
  96. /*下载样式*/

  97. .but-download{display: table-cell;}.download-article{margin-bottom: 40px !important;padding: 0 10px;width: 100%;margin: 0 auto;}
  98. .download-demo{margin: 10px 0;}.download-xiyang{padding: 0 0 20px;display: flex;justify-content: center;align-items: center;}
  99. .download-sty{text-align: center;height: 260px;border-radius: 8px;position: relative;}@media (max-width:530px){.but-download {display: block;}
  100. .but-download>.but, .but-download>span{min-width: 100% !important;}}@media (max-width:700px){.download-sty{display: none;}.download-right{padding: 10px !important;height: 100% !important;width: 100%;}.download-theme-box{margin-top: 24px;}}@media (min-width:700px){.display{display: none;}}@media (min-width: 1100px){.download-article{width:900px;}}@media (max-width: 950px){.download-notice{display: flex;}.head h2{font-size: 30px !important;}}.download-sty img{position: relative; }.download-theme-box{margin:10px 0 20px 0;text-align: center;}.download-right{margin-left: 6px;border: 1px solid #f04494;padding: 24px;border-radius: 8px;position: relative;}.download-file-name{font-size: 20px;}
  101. .but-download>.but,.but-download>span{min-width: 130px;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;}
  102. .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid var(--theme-color); border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
  103. .panel-heading{padding: 10px 15px;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #fff;background-color: var(--focus-color);}/*边框部分颜色*/
  104. .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
  105. .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
  106. .head{height: 80px;letter-spacing: 8px;color: #fff;background: url(//21lhz.cn/cdn/dl_head.png) center no-repeat;text-align: center;border-radius: 10px 10px 0 0;position: relative;top: -20px;margin: -10px;margin-bottom: 20px;}
  107. .head h2{line-height: 90px;font-size: 40px;}
  108. .download-notice {padding: 24px;border-top: 1px solid #e5e5e5;position: relative;margin: 0px -10px;border-radius: 0 0 8px 8px;}
  109. .download-notice-title {width: 190px;height: 100px;margin-right: 18px;margin-top: 4px;padding-top: 32px;border-right: 1px solid #ccc;text-align: center;font-size: 28px;color: #999;font-family: microsoft yahei;font-weight: 700;}
  110. .download-notice-ico {width: 36px;height: 29px;background-position: 0 -372px;}
  111. .ico {background-image: url(//21lhz.cn/cdn/ico_png24.png);background-repeat: no-repeat;}
  112. .fl {float: left;display: inline;}.red1 {color: #eb0064;font-size: 14px;}.mb5 {margin-right: 5px;margin-bottom: 5px;}.vertical-middle {vertical-align: middle;}.download-notice-detail p {font: 13px/1.25 "microsoft yahei",simsun,arial;}
  113. .popTipBox {padding: 5px 10px;text-indent: 2em;border: 1px solid #ffd8c0;background-color: #fff9f3;font-size: 13px;color: #e10074;line-height: 22px;}
  114. .but-download a{margin-left: 10px;margin-right: 4px;}
  115. </style>
  116. <main class="container">
  117.   <div class="content-wrap">
  118.     <div class="content-layout">
  119.       <?php while (have_posts()) : the_post(); ?>
  120.         <?php echo zib_get_page_header(); ?>

  121.         <div class="zib-widget article download-article">
  122.           <div class="head"><h2>狐狸资源网资源下载</h2></div>
  123.           <?php
  124.           echo zibpay_get_down_html($post_id);
  125.           $page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true);
  126.           if ($page_links_content_s) {
  127.             the_content();
  128.             wp_link_pages(
  129.               array(
  130.                 'before'           => '<p class="text-center post-nav-links radius8 padding-6">',
  131.                 'after'            => '</p>',
  132.               )
  133.             );
  134.             echo '</div>';
  135.           }
  136.           ?>
  137.         <!--开始-->
  138.       
  139.         <dl class="download-notice clearfix zib-widget">
  140.             <dt class="fl download-notice-title"><span class="inline-block vertical-middle mr5 mb5 download-notice-ico ico"></span>注意事项</dt>
  141.             <dd class="download-notice-detail">
  142.                 <p><b class="red1"><p style="text-align:center" id="tf_lgz">本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有。</p></b></p>
  143.                 <p>若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。</p>
  144.                 <p>本站发布的内容若侵犯到您的权益,请联系<b>狐狸资源网</b>删除,我们将及时处理!</p>
  145.                 <p><b>如下载有问题请重新下载,文件自下载之日起,可免费重复下载。若文件有问题,请及时联系<b>狐狸资源网</b>处理。</b></p>
  146.             </dd>
  147.         </dl>
  148.      <div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-yellow" data-isclose="" role="alert">请注意,本系统仅供学习参考,禁止进行违法使用。下载的资源使用前请仔细核对文字内容,如资源中包含国旗、国徽、党徽、天安门等图片,请在《中华人民共和国国旗法》、《中华人民共和国国徽法》等相关法律法规规定范围内使用,请保证国旗、国徽、天安门等图案的完整性,如因违规使用造成的一切经济损失及法律责任,将由您自行承担。</div></div>
  149.         <div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-blue" data-isclose="" role="alert">附:根据2013年1月30日《计算机软件保护条例》新规定:第十七条<br/>为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。<br/>鉴于此,希望大家按此说明学习以及研究程序软件! 切勿商用,切勿违法使用!!!否则后果自行承担!</div></div>
  150.         <!--下载说明开始-->
  151.         <style>
  152.                 .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;}
  153.                 .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
  154.                 .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);}
  155.                 .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;}/*边框部分颜色*/
  156.                 .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
  157.                 .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
  158.                 .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
  159.                 .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
  160.                 </style>
  161.                 <div class="panel">
  162.                      <div class="panel-heading">
  163.                           <h3>下载说明</h3>
  164.                      </div>
  165.                      <div class="panel-body">
  166.                          <div id="smcos_mhz"><ul class="help">
  167.                         <li>
  168.                             1.狐狸资源网所提供的压缩包若无特别说明,解压密码均为<em>www.tfbkw.com</em></li>
  169.                         <li>2.下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;</li>
  170.                       <li>3.文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;</li>
  171.                       <li>4.资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便狐狸资源网及时进行更新;</li>
  172.                       <li>5.其他下载问题请自行搜索教程,这里不一一讲解。</li>
  173.                       </ul></div>
  174.                      
  175.                      </div>
  176.                      </div>
  177.                      <div class="panel">
  178.                      <div class="panel-heading">
  179.                        <h3>站长声明</h3>
  180.                      </div>
  181.                      <div class="panel-body">
  182.                          <div id="smcos_tkzj"><span class="shengming"><b>本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!</b></span></div>
  183.                         
  184.                      
  185.                      </div>
  186.                     </div>
  187.                     <!--//版权提示弹窗-->
  188. <div class="web_notice" style="
  189. position: fixed;
  190. top: 0;
  191. left: 0;
  192. width: 100%;
  193. height: 100%;
  194. background: rgba(0,0,0,0.3);
  195. z-index: 99999;
  196. ">
  197. <div style="
  198. position: fixed;
  199. top: 50%;
  200. left: 50%;
  201. width: 350px;
  202. background: #FFF;
  203. transform: translate(-50%, -50%);
  204. border-radius: 40px;
  205. padding: 25px 20px;
  206. ">
  207. <h3 style="
  208. font-weight: bold;
  209. text-align: center;
  210. font-size: 30px;
  211. margin-top: 10px;
  212. margin-bottom: 15px;
  213. ">免责声明</h3>
  214. <div style="
  215. font-size: 16px;
  216. margin-top: 26px;
  217. line-height: 30px;
  218. color: #999;
  219. ">相关内容均来自网络收集与网友提供,任何涉及商业盈利目的的均不得使用,否则产生的一切后果将由您自己承担!
  220. 本平台资源仅供个人学习交流,测试使用,请勿用于任何盈利商业用途。<br>版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除下载内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件(tfblog@126.com)与我们联系。敬请谅解!</div>
  221. <div style="display: flex;justify-content: space-between;margin-top: 45px;">
  222. <a style="display: block;
  223. background: #98a3ff;
  224. color: #FFF;
  225. text-align: center;
  226. font-weight: bold;
  227. font-size: 19px;
  228. line-height: 60px;
  229. margin-right: 10px;
  230. border-radius: 32px;
  231. width: 45%;
  232. " onclick="javascript:document.querySelector('.web_notice').remove()">我同意</a>
  233. <a style="display: block; background: #f5f5f5; color: #333; text-align: center; font-weight: bold; font-size: 19px; line-height: 60px ;margin-left: 10px; border-radius: 32px; width: 45%;" href="<?php echo get_bloginfo('url').'/'.$post_id.'.html'; ?>" onclick="redirectToLink()">不同意</a>
  234. </div>
  235. </div>
  236. </div>
  237.                     
  238.         <!--下载说明结束-->
  239.         <!--结束-->
  240.         
  241.           <?php ?>
  242.         <?php endwhile; ?>
  243.         </div>
  244.         <?php comments_template('/template/comments.php', true); ?>
  245.     </div>
  246.   </div>
  247.   <?php get_sidebar(); ?>
  248. </main>

  249. <?php

  250. get_footer();
复制代码


本帖被以下淘专辑推荐:

路虽远,行则将至;事虽难,做则必成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

飞流广播+ 发布

飞流这论坛到底有没有资本给我投资一下啊!
07-20 22:07
系统消息:飞流安卓客户端APP已上线,请在QQ群(123129)群文件内获取下载。
02-21 02:22
01-24 12:40
站内通告

📢 六月份后均不在线,请悉知

提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

1.丰富功能系统,扩展社区特色玩法,打造最好的互联网聚集圈子。

2.准确信息真实交易,安全快捷又方便,让虚拟交易面对面。

3. 天上不会掉馅饼,话术骗术迷人心,切勿脱离平台线下交易,被骗与平台无关!

4. 欺诈骗钱,违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理!

官方Q群:1003810038钉推群:BAYR2383 站长QQ:3388700000

飞流论坛(FLLT.CN),一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。
  • 钉钉新帖推送群
  • 官方交流QQ群
  • 站长唯一微信号

💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

GMT+8, 2026-7-22 22:09 , Processed in 0.071841 second(s), 68 queries, MemCached On , Gzip On.

飞流论坛 HanAnalytics icp

Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

快速回复 返回顶部 返回列表