当前位置：文武科技柜 / 教程系列 / WordPress教程02：Autumn主题美化，让网站更美观

WordPress教程02：Autumn主题美化，让网站更美观

斌仔分类：

教程系列

文章字数 562 字阅读时间 12 分钟

文章目录

后台添加B站链接配置
图片放大
文章显示时间差
添加Pangu.js
验证码回复查看全文
添加阅读滚动进度条
首页添加标签

🤖 由 ChatGPT 生成的文章摘要

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

主题：Autumn（其余主题，请自行修改）

后台添加B站链接配置

// admin/theme-setting.php
'autumn_bilibili'       => ['title'=>'输入Bilibili链接',        'type'=>'text',     'rows'=>4],

// public/comment.php

<?php get_author_class($comment->comment_author_email,$comment->user_id); ?><?php if(user_can($comment->user_id, 1)){echo "<a title='博主' class='vip'></a>";}; ?>

// public/hook.php
wp_enqueue_style('font', 'https://fonts.loli.net/css?family=Noto+Serif+SC:wght@400;700;900&display=swap');
wp_enqueue_style('font-awesome', 'https://lib.baomitu.com/font-awesome/6.1.1/css/all.min.css');
wp_enqueue_script('pangu', "https://lib.baomitu.com/pangu/4.0.7/pangu.min.js", false, null);

图片放大

有些时候截图

主题中的 footer.php 添加如下代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <!-- 不起作用，加入下面这行代码 -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

在主题的 functions.php 添加如下代码

/**FancyBox图片灯箱自动给图片加链接**/
add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

文章显示时间差

安装插件 Code Snippets（一款快速修改function.php文件的插件），并启用
添加片段，添加如下代码：

function Bing_filter_time(){
    global $post ;
    $to = time();
    //$from = get_the_time('U') ;
    $from= get_the_modified_time('U')-28800;
    $diff = (int)abs($to - $from);
    if ($diff <= 3600) {
        $mins = round($diff / 60);
        if ($mins <= 1) {
            $mins = 1;
        }
        $time = sprintf(_n('%s 分钟', '%s 分钟', $mins), $mins) . __( '前' , 'Bing' );
    }
    else if (($diff <= 86400) && ($diff > 3600)) {
        $hours = round($diff / 3600);
        if ($hours <= 1) {
            $hours = 1;
        }
        $time = sprintf(_n('%s 小时', '%s 小时', $hours), $hours) . __( '前' , 'Bing' );
    }
    elseif ($diff >= 86400) {
        $days = round($diff / 86400);
        if ($days <= 1) {
            $days = 1;
            $time = sprintf(_n('%s 天', '%s 天', $days), $days) . __( '前' , 'Bing' );
        }
        elseif( $days > 29){
            $time = get_the_modified_time(get_option('date_format'));
        }
        else{
            $time = sprintf(_n('%s 天', '%s 天', $days), $days) . __( '前' , 'Bing' );
        }
    }
    return $time;
}
add_filter('the_modified_time','Bing_filter_time');

点击 Save Changes 即可保存

添加Pangu.js

pangu.js 用于在中文与英文、数字与符号之间加入空格。

在主题的 footer.php 添加如下代码：

<script src="https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js"></script>
<script>
  pangu.spacingPage();
</script>

结果如下

验证码回复查看全文

方法一：安装插件

<!--wechatfans start-->
隐藏内容
<!--wechatfans end-->

方法二：去openwrite注册账号，并获取博客导流公众号代码；详细教程

添加阅读滚动进度条

首先在 scrollprogressJS 下载 scrollprogressJS.js 文件，在文件末尾加入如下代码：

document.addEventListener("DOMContentLoaded", function (event) {
    progressJS.start({
        //进度条颜色
        "color": "red"
    });
});

将 js 文件上传到主题的 js 文件夹下，或者上传到CDN上
不同主题将下面代码添加到主题文件夹的functions.php 末尾或者同主题的添加到主题文件夹/public/hooks.php里

// functions.php 添加
if (is_singular()) {
wp_enqueue_script( 'scrollprogress', get_template_directory_uri() . '/assets/js/scrollprogress.js', array( 'jquery' ), '1.0.0', true );
}

//同主题添加
if(is_single()){
+ wp_enqueue_script('scrollprogress', get_template_directory_uri() . '/assets/js/scrollprogress.js', ['jquery'], '', true );    
}

首页添加标签

在主题目录的index.php添加如下代码：

    <div class="row posts-wrapper">
+                   <div class="taglists">
+                           <ul>
+                               <?php 
+                                   $tags_list = get_tags('orderby=count&order=DESC&number=30');
+                                   if ($tags_list) { 
+                                       foreach($tags_list as $tag) {
+                                       echo '<li><a class="name" href="'.get_tag_link($tag).'">'. $tag->name .'</a><b>'. $tag->count .'</b></li>'; 
+                                           } 
+                                       } 
+                                       ?>
+                           </ul>
+                           <span class="down"><i class="iconfont icon-xiangxiazhanhang"></i></span>
+                           <span class="up"><i class="iconfont icon-xiangshangzhanhang"></i></span>
+                       </div>

给书签添加样式，修改文件为：主题目录/static/css/style.css

.taglists {
  display: flex;
  flex-direction: column;
  position: relative;
}

.taglists ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: hidden;
  padding-left: 1.5rem;
  padding-right: 3rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-color: #fff;
}

.dark-mode .taglists ul{
    background-color: #18222d;
}

.taglists ul li {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-right: 0.75rem;
  position: relative;
  transition: all 0.3s ease 0s;
  outline: none;
}



.taglists ul li a {
  background-color: #f1f3f9;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  font-size: .875rem;
  line-height: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  white-space: nowrap;
}

.dark-mode .taglists ul li a{
    color: #000;
}

.taglists li b {
  background-color: #f1f3f9;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  font-size: .875rem;
  line-height: 1.25rem;
  opacity: .7;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  color: #ff0099;
  white-space: nowrap;
}

.down {
  position: absolute;
  right: 0;
  top: 3rem;
}

.open ul{
  overflow-y: initial;
  height: auto;
}

.taglists ul li:hover {
  color: #fff;
  transform: translateY(-6px);
}

.taglists ul li:active {
  transform: translateY(-1px);
}

.down,.up {
  position: absolute;
  top: 3rem;
  right: 1.25rem;
  cursor: pointer;
}

.up{
  display: none;
}

.dark-mode .icon-xiangxiazhanhang,.dark-mode .icon-xiangshangzhanhang{
    color: #fff;
}

给标签最右边的上下箭头添加点击事件，修改文件为：主题目录/footer.php

$('.down').click(function() {
  $('.taglists').toggleClass('open');
  $('.down').css({
    'display': 'none'
  });
  $('.up').css({
    'display': 'block'
  });
})

$('.up').click(function() {
  console.log('666')
  $('.taglists').toggleClass('open');
  $('.down').css({
    'display': 'block'
  });
  $('.up').css({
    'display': 'none'
  });
})

继续阅读本文相关话题

wordpress

你觉得这篇文章怎么样？

打赏作者

非常感激每一位打赏的朋友！

支付宝

微信

扫一扫，请博主喝咖啡☕

文章作者: 斌仔

文章链接: https://www.wangdu.site/course/1111.html

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

WordPress教程02：Autumn主题美化，让网站更美观

后台添加B站链接配置

图片放大

文章显示时间差

添加Pangu.js

验证码回复查看全文

添加阅读滚动进度条

首页添加标签

继续阅读本文相关话题

10款网页监控工具，再也不怕错过重要信息

jsDelivr替代品：国内外前端静态资源CDN公共库大全

共有 0 条评论

点击这里取消回复。

📄 公告

📢 活动公告

归档

WordPress教程02：Autumn主题美化，让网站更美观

后台添加B站链接配置

图片放大

文章显示时间差

添加Pangu.js

验证码回复查看全文

添加阅读滚动进度条

首页添加标签

继续阅读本文相关话题

10款网页监控工具，再也不怕错过重要信息

jsDelivr替代品：国内外前端静态资源CDN公共库大全

相关推荐

共有 0 条评论

点击这里取消回复。

📄 公告

📢 活动公告

归档