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

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

斌仔
文章字数 562 字 阅读时间 12 分钟
🤖 由 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);

图片放大

有些时候截图

  1. 主题中的 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>
  1. 在主题的 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;
}

文章显示时间差

  1. 安装插件 Code Snippets（一款快速修改function.php文件的插件），并启用
  2. 添加片段，添加如下代码：
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');
  1. 点击 Save Changes 即可保存

结果图
结果图

添加Pangu.js

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

  1. 在主题的 footer.php 添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js"></script>
<script>
  pangu.spacingPage();
</script>
  1. 结果如下

使用前
使用前

使用后
使用后

验证码回复查看全文

方法一：安装插件

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

效果图
效果图

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

添加阅读滚动进度条

  1. 首先在 scrollprogressJS 下载 scrollprogressJS.js 文件，在文件末尾加入如下代码：
document.addEventListener("DOMContentLoaded", function (event) {
    progressJS.start({
        //进度条颜色
        "color": "red"
    });
});
  1. 将 js 文件上传到主题的 js 文件夹下，或者上传到CDN上
  2. 不同主题将下面代码添加到主题文件夹的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 );    
}

首页添加标签

  1. 在主题目录的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>
  1. 给书签添加样式，修改文件为：主题目录/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;
}
  1. 给标签最右边的上下箭头添加点击事件，修改文件为：主题目录/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'
  });
})

打赏作者

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

支付宝扫码支持
微信扫码支持

扫一扫，请博主喝咖啡☕

文章作者: 斌仔
文章链接: https://www.wangdu.site/course/1111.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文武科技柜！

相关推荐

个人音乐清单
影音阅读

个人音乐清单
Jetbrains2023.3全系列产品最新激活码_破解教程（亲测有效，持续更新）
系统工具

Jetbrains2023.3全系列产品最新激活码_破解教程（亲测有效，持续更新）
Wordpress、微信公众号、微信小程序，三者合而为一
教程系列

Wordpress、微信公众号、微信小程序，三者合而为一
文件管理工具：搜索、重命名、重复清理
办公套件

文件管理工具：搜索、重命名、重复清理

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注