子比主题美化教程(备忘录)

1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 :我是添加在首页侧边栏

标题文本:☀当前时间

<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>
图片[1]-子比主题美化教程(备忘录)-梦境学习站
图片[2]-子比主题美化教程(备忘录)-梦境学习站

演示图片

图片[3]-子比主题美化教程(备忘录)-梦境学习站

1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分,这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框

2、 网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码,把下面的 css 代码复制粘贴到里面即可。

里面的 8px 大小可自行调节,颜色代码#63B8FF 也可自行设置

/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏

<div class="gn_box">
    <h2><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>2</font><font
            color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
            color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
    </center></h2>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2022/01/01 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>

效果预览:

图片[4]-子比主题美化教程(备忘录)-梦境学习站

在主题设置—》自定义CSS样式,添加下面的CSS代码:

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://img.godgy.xyz/phbed/2022/10/07/63402cfc7f71a.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图片),自己添加喜欢的背景图片。

图片[5]-子比主题美化教程(备忘录)-梦境学习站

代码:(一些说明请仔细看)

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://blog.godgy.xyz/666666/meihua/xxxx.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>blog.godgy.xyz</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

有一些文字说明比如:站长声明、下载说明,自己在代码中修改一下。

微信公众号的图片+文字,代码里面有注释提示的,自己改一下就好。

在写文章的时候,发布之前你会设置很多标签,比如模板啊,源码,等等,这些关键词,往往需要搜索才能找到,社长给大家分享这个是只要你的文章中包含了你网站的关键词,就会自动添加超链接,也是更好的协助网站收录优化,提高内页收录

1.将下面的 PHP 代码加入到主题目录下:themes/zibll/functions.php 文件中。

// 文章添加关键词链接开始
function wpkj_auto_add_tag_link($content){
$limit = 1; // 设置同一个标签添加几次链接
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
$link = get_tag_link($tag->term_id);
$keyword = $tag->name;
$cleankeyword = stripslashes($keyword);
$url = '<a target="_blank" href="'.$link.'" title="'.str_replace('%s', addcslashes($cleankeyword, '$'), __('View all posts in %s')).'">'.addcslashes($cleankeyword, '$').'</a>';
$regEx = '\'(?!((<.*?)|(<a.*?)))('. $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))\'s';
$content = preg_replace($regEx,$url,$content,$limit);
}
}
return $content;
}
add_filter( 'the_content', 'wpkj_auto_add_tag_link', 1 );  
// 文章添加关键词链接结束

效果演示:

图片[6]-子比主题美化教程(备忘录)-梦境学习站

教程分为两步,添加 css 样式和添加 HTML 代码即可如下

1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:

/*CSS 代码网站底部按钮美化 */
:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    margin-bottom: 5px;
}
.badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .bg-blue {
    background-color: #007ec6;
}
.github-badge .bg-brightgreen {
    background-color: #4dc820;
}
.github-badge .bg-blueviolet {
    background-color: #8833d7;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-orange {
    background-color: orange;
}
/*CSS 代码网站底部按钮美化结束 */

2、子比主题设置—>页面&显示—>底部页脚—>板块二,添加以下 HTML 代码:

<!--网站底部按钮美化 html 开始 -->
<div class="github-badge">
  <span class="badge-subject bg-blue">
     <a style="color:#fff" href="https://blog.godgy.xyz/links" target="_blank">友链申请</a>
  </span>-
  <span class="badge-subject bg-brightgreen">
     <a style="color:#fff" href="https://v6.51.la/land/JfXMxzGBONWZbiiM" target="_blank">网站统计</a>
  </span>-
  <span class="badge-subject bg-orange">
     <a style="color:#fff" href="http://wpa.qq.com/msgrd?v=3&uin=361080778&site=qq&menu=yes" target="_blank">广告合作</a>
  </span>-
  <span class="badge-subject bg-green">
     <a style="color:#fff" href="https://dreamwld.top" target="_blank">关于我们</a>
  </span>-
    <span class="badge-value bg-blueviolet">
     <a style="color:#fff" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">免责申明</a>
  </span>-
</div>
<!--网站底部按钮美化 html 结束 by -->

效果展示:

图片[7]-子比主题美化教程(备忘录)-梦境学习站
/*友链头像圆角*/
.link-only-img img{border-radius: var(--main-radius);}
.link-img img{border-radius: var(--main-radius);}

1 2 3 4 5

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片