教程丨美好的明天 WordPress 主题、插件及优化汇总

每次单开文章介绍新增的功能太麻烦,也为了给自己做个备份,给大家做个参考,本文会详细介绍本站目前使用的插件及优化,因数据较多,还在一直更新中。

本站的架构

WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统(CMS)来使用。

WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的,用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。

本站的主题

CorePress主题,强大的WordPress定制主题, 体积小,性能强,功能多,不可多得的一款高性能,高颜值主题。

本站的插件

Baidu TextCensor For Comments(百度文本内容审核)

插件地址:Baidu TextCensor For Comments – WordPress 插件 | WordPress.org China 简体中文

基于百度文本内容审核技术来提供WordPress评论内容审核,对网站用户的评论信息检测,一旦发现用户提交恶意垃圾内容,可以做到文本的自动审核与实时过滤。

  • 基于百度Api,一站式检测文本中夹杂的色情、推广、辱骂、违禁、涉政、灌水等垃圾内容,净化网络环境;
  • 用户可以在平台上自助选择审核维度、审核标签,审核松紧度、自定义文本黑白名单,让文本按照勾选的维度、松紧度进行审核。
来源:百度网盘 | 提取码:jitg

Database Backup for WordPress(数据库备份)

插件地址:Database Backup for WordPress – WordPress 插件 | WordPress.org China 简体中文

WordPress的数据库备份允许您快速备份核心WordPress数据库表,并将备份下载为gzip压缩文件,或通过电子邮件将其发送到您选择的地址。

默认情况下,该插件将始终备份所有核心WordPress数据库表。但是,您也可以有选择地备份可能由其他插件创建的任何自定义表

其他选项包括从评论表中排除垃圾评论的功能,或从帖子表中发布修订的功能,从而节省您的空间和带宽。

您还可以使计划备份按设置的时间间隔自动运行,并配置要将计划备份发送到的电子邮件地址。

来源:百度网盘 | 提取码:k8vh

WP-China-Yes(WordPress本土化)

插件地址:LitePress – 本土的 WordPress 衍生版

此插件将全面替换WP访问官方服务的链接为高速稳定的大陆节点,以此加快站点更新版本、安装升级插件主题的速度,并彻底解决429报错问题。

加速节点是直接为你的站点与WordPress总部服务器的一切通信做加速,加速范围包括但不限于:插件、主题商城的资源下载、作品图片、作者头像、主题预览等……

来源:百度网盘 | 提取码:wm88

WP-PostViews(访问计数统计)

插件地址:WP-PostViews – WordPress 插件 | WordPress.org China 简体中文

该插件由 GaMerZ 开发,主要是实现单篇文章阅读数量统计、显示浏览数量最多文章排行、分类下浏览数量最多的文章排行等功能效果。

来源:百度网盘 | 提取码:qakl

WP-Sweep(数据库优化)

插件地址:WP-Sweep – WordPress 插件 | WordPress.org China 简体中文

WordPress网站MySQL数据库优化

来源:百度网盘 | 提取码:0lk4

WPReplace(数据库字符批量替换插件)

插件官方介绍:WPReplace内容字符替换插件 – WordPress 插件 | WordPress.org China 简体中文

WordPress内容字符替换插件(简称:WPReplace),可视化帮助网友快速替换WordPress网站文章标题、内容、评论用户名和评论内容的指定字符。

来源:百度网盘 | 提取码:4cml

WP Super Cache(超级缓存)

插件官方介绍:WP Super Cache – WordPress 插件 | WordPress.org China 简体中文

该插件可以从您的动态WordPress博客中生成静态html文件。生成html文件后,您的WEB服务器将直接使用html文件来提供服务,而无需处理相对较臃肿和昂贵的WordPress PHP脚本。

来源:百度网盘 | 提取码:d048

本站的其他优化

个人信息模块美化(220912-OK)

效果

CSS

在主题根目录下找到 style.css 文件,在合适位置加入如下代码

此处内容需要 回复 后才能查看

HTML

在需要添加的位置加入如下代码

此处内容需要 回复 后才能查看

评论框添加随机评论文字功能(220918-OK)

前言

这个功能灵感是从 joe 主题中看到的,发现很合适博客,因为现在看了一下博客里面的评论区,不是 666 就是一些随便打的英文字,说没有文采吧,那是假的,只不过是有点懒哈哈,

要实现这个功能首先需要有一个 API 接口,但是我看了外面的买的 API 接口实属太麻烦且对接起来也很繁琐,因为我自己优化了一个随机评论 API 接口,有三种格式进行输入,TXT 文本格式,JS 格式,JSON 格式,这样对一些有能力对接的朋友也比较友好,也用担心去用外面的接口,导致自己的网站变慢等等,自己搭建接口是最爽的,话不多说

效果演示

刷新网页一次,评论框语句就会更新一次;

解决方法

1、直接将下面的代码放置到主题的 footer.php

<!--评论框自动添加一句话开始-->
<script>
$.getJSON("https://www.wmviv.com/comment/api.php?encode=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function(){
$(this).select();
})
})
</script>
<!--评论框自动添加一句话结束-->

将其中的api网址替换为自己的网址。

2、自行新建一个 api.php 文件,在新建一个文件夹放置到 WordPress 主目录下 comment 文件夹,在 api.php 里面输入以下代码,

下面有链接以为大家打包好

下载后编辑 api.php 中网址链接和 pinglun.txt 的语句即可(22/9/14);

编辑 api.php 文件

<?php
//增加跨域访问,不是本站不能访问
header("Access-Control-Allow-Origin: www.wmviv.com,wmviv.com"); 
//
    $counter = intval(file_get_contents("counter.dat"));  
     $_SESSION['#'] = true;  
     $counter++;  
     $fp = fopen("counter.dat","w");  
     fwrite($fp, $counter);  
     fclose($fp); 
 ?>

<?php
//获取句子文件的绝对路径
$path = dirname(__FILE__);
$file = file($path."/pinglun.txt");
 
//随机读取一行
$arr  = mt_rand( 0, count( $file ) - 1 );
$content  = trim($file[$arr]);
 
//编码判断,用于输出相应的响应头部编码
if (isset($_GET['charset']) && !empty($_GET['charset'])) {
    $charset = $_GET['charset'];
    if (strcasecmp($charset,"gbk") == 0 ) {
        $content = mb_convert_encoding($content,'gbk', 'utf-8');
    }
} else {
    $charset = 'utf-8';
}
 
//格式化判断,输出js或纯文本
if ($_GET['encode'] === 'js') {
    echo "function binduyan(){document.write('" . $content ."');}";
}else if($_GET['encode'] === 'json'){
    header('Content-type:text/json');
    $content = array('text'=>$content);
    echo json_encode($content, JSON_UNESCAPED_UNICODE);
}else {
    echo $content;
}

编辑 pinglun.txt 文件

打开在 pinglun.txt 文件内属于想要评论框自动生成的语句,一行一句,也保存和 api.php 同一文件夹。

这篇文章写的真不错,真详细,点个赞。
终于找到组织了,堪比全网最全
文章来自大自然的灵感,好喜欢这篇文章。
这篇文章肯定会火,666
终于找到这篇文章了,感谢分享!
谢谢分享
对小白真的很友好,写的很全面。

打包下载

来源:百度网盘 | 提取码:k5xv

评论框右侧添加卡通人物(220913-OK)

效果演示

美化方法

在主题根目录下找到 style.css 文件,在合适位置加入如下代码;

url(xxx) 其中链接修改为自己的素材图片地址。

素材

以上图片自行保存

CSS

/* 评论框卡通人物开始 */
textarea#comment {
    background-color:transparent;
    background:linear-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url(https://www.wmviv.com/wp-content/uploads/2022/09/2022091113192241.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;
}
/* 评论框卡通人物结束 */

上传图片和文件按日期时间自动重命名(220914-OK)

WordPress在上传图片和文件,名称是没有变化,如果上传更多的图片和文件,在后台的媒体库看到列表中的文件名称都很乱,格式不统一。

解决方法

将下面的代码加入到 functions.php 中合适位置,

// WordPress上传图片和文件按日期时间自动重命名
add_filter('wp_handle_upload_prefilter', 'custom_upload_filter' );
function custom_upload_filter( $file ){
$info = pathinfo($file['name']);
$ext = $info['extension'];
$filedate = date('YmdHis').rand(10,99);//为了避免时间重复,再加一段2位的随机数
$file['name'] = $filedate.'.'.$ext;
return $file;
}

禁用上传图片后自动生成各种图片尺寸(220913-OK)

先来看一下 WordPress 在上传图片时,会为我们生成多少种图片吧,首先程序会对上传的图片尺寸进行额外检测,再自动生成 1536 宽度的 2x 中大尺寸(2x Medium Large),2048 宽度的 2x 大尺寸(2x Large),2560 宽度的缩放(Scaled)这三种新规格的图片,加上默认的几种缩略图规格,也就是极端情况下, 上传一张图片,会额外生成 7 张图片。

到这相信大家已经知道为什么我们需要禁止 WordPress 自动生成多尺寸的图片了吧,WordPress 生成的这么多各种尺寸的图片,基本没什么用,而且占用空间,特别是使用OSS的时候,既然这样,那么我们在制作主题的时候,控制好我们需要的图片尺寸大小不就可以了吗。

解决方法

步骤一

在后台设置-媒体设置-把缩略图大小,中等大小,大尺寸的宽高都设置为0

步骤二

将下面的代码加入到主题文件夹的 functions.php 文件中,即可禁止生成各种尺寸的图片,只保留一张原图。

// 禁用自动生成的图片尺寸
function shapeSpace_disable_image_sizes($sizes) {
	
	unset($sizes['thumbnail']);    // disable thumbnail size
	unset($sizes['medium']);       // disable medium size
	unset($sizes['large']);        // disable large size
	unset($sizes['medium_large']); // disable medium-large size
	unset($sizes['1536x1536']);    // disable 2x medium-large size
	unset($sizes['2048x2048']);    // disable 2x large size
	
	return $sizes;
	
}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes');
// 禁用缩放尺寸
add_filter('big_image_size_threshold', '__return_false');
// 禁用其他图片尺寸
function shapeSpace_disable_other_image_sizes() {
	
	remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() 
	remove_image_size('another-size');   // disable any other added image sizes
	
}
add_action('init', 'shapeSpace_disable_other_image_sizes');

博客添加IP签名档图片

预留,待更新

给外部链接加上go跳转(220914-OK)

给网站添加外链go跳转效果既美观又可避免权重流失,确实是一个不错的功能。

代码部署

部署 go.php 文件

在网址根目录下新建 go.php 文件,并贴入如下代码;

<?php 
$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]); 
if(!empty($t_url)) {
    preg_match('/(http|https):\/\//',$t_url,$matches);
	if($matches){
	    $url=$t_url;
	    $title='页面跳转中... - 美好的明天';
	} else {
	    preg_match('/\./i',$t_url,$matche);
	    if($matche){
	        $url='http://'.$t_url;
	        $title='页面正在安全跳转中... - 美好的明天';
	    } else {
	        $url='//www.wmviv.com/';
	        $title='参数错误,正在返回首页';
	    }
	}
} else {
    $title='参数缺失,正在返回首页';
    $url='//www.wmviv.com/';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5;url='<?php echo $url;?>';">
<title><?php echo $title;?></title>
<style>
body {background:#000}
.loading {
	-webkit-animation:fadein 2s;
	-moz-animation:fadein 2s;
	-o-animation:fadein 2s;
	animation:fadein 2s}
@-moz-keyframes fadein {from {opacity:0}
to {opacity:1}}
@-webkit-keyframes fadein {from {opacity:0}
to {opacity:1}}
@-o-keyframes fadein {from {opacity:0}
to {opacity:1}}
@keyframes fadein {from {opacity:0}
to {opacity:1}}
.spinner-wrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:300;
	height:100%;
	min-width:100%;
	min-height:100%;
	background:#6089d4}
.spinner-tips {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-200px;
	margin-top: 2px;
	color:#fff;
	letter-spacing:1px;
	font-weight:700;
	font-size:36px;
	font-family:Arial}
	.spinner-warning {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-200px;
	margin-top: 2px;
	color:#fff;
	letter-spacing:1px;
	font-weight:700;
	font-size:18px;
	font-family:Arial}
.spinner {
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	margin-left:-270px;
	width:1px;
	height:1px;
	border:25px solid rgba(100,100,100,0.2);
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
	border-left-color:transparent;
	border-right-color:transparent;
	-webkit-animation:spin 1.5s infinite;
	-moz-animation:spin 1.5s infinite;
	animation:spin 1.5s infinite}
@-webkit-keyframes spin {0%,100% {-webkit-transform:rotate(0deg) scale(1)}
50% {-webkit-transform:rotate(720deg) scale(0.6)}}
@-moz-keyframes spin {0%,100% {-moz-transform:rotate(0deg) scale(1)}
50% {-moz-transform:rotate(720deg) scale(0.6)}}
@-o-keyframes spin {0%,100% {-o-transform:rotate(0deg) scale(1)}
50% {-o-transform:rotate(720deg) scale(0.6)}}
@keyframes spin {0%,100% {transform:rotate(0deg) scale(1)}
50% {transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-tips">即将离开本网站,请注意账号财产安全</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html>

替换网站中的外链

将以下代码添加到你当前使用的WordPress主题的 functions.php 文件中合适位置,

// 给外部链接加上go跳转
add_filter('the_content','the_content_nofollow',999);
function the_content_nofollow($content)
{
preg_match_all('/<a(.*?)href="(.*?)"(.*?)>/',$content,$matches);
if($matches){
foreach($matches[2] as $val){
if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){
$content=str_replace("href=\"$val\"", "href=\"".home_url()."/go.php?url=$val\" ",$content);
}
}
}
return $content;
}

评论区显示用户IP归属地(220914-OK)

原文转自:评论区显示用于IP归属地(后续和改进) - 广然笔记 (rsecc.cn),感谢 广然笔记 提供代码参考,本文仅进行合并及整理。

查看完整全文:WordPress 如何在评论区添加显示用户IP归属地 - 美好的明天 (wmviv.com)

效果演示

构建代码

在站点根目录下新建一个get_user_address.php文件,然后写入以下代码。

粘贴上面得到的Key替换掉【腾讯位置服务API】

<?php
function province($user_ip) {
    if (filter_var($user_ip, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6 | FILTER_FLAG_IPV4)) {
        if (filter_var($user_ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE)) {
            $url = "https://apis.map.qq.com/ws/location/v1/ip?key=【腾讯位置服务API】&ip=" . $user_ip;
            $UserAgent = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; .NET CLR 3.5.21022; .NET CLR 1.0.3705; .NET CLR 1.1.4322)';
            $curl = curl_init();
            curl_setopt($curl, CURLOPT_URL, $url);
            curl_setopt($curl, CURLOPT_HEADER, 0);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
            curl_setopt($curl, CURLOPT_ENCODING, '');
            curl_setopt($curl, CURLOPT_USERAGENT, $UserAgent);
            curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
            $data = curl_exec($curl);
            $data = json_decode($data, true);
            $result = array_column($data, 'ad_info');
            $nation = array_column($result, 'nation'); // 获取国家
            $nation = array_shift($nation); // 获取国家
            $province = array_column($result, 'province'); // 获取省份
            $province = array_shift($province); // 获取省份
            $ad_info = $nation == "中国" ? $province : $nation; // 判断,如果国家为中国,则显示省,否则显示国家
            $ad_info = isset($ad_info) ? $ad_info : "未知";
            return $ad_info;
        } else {
            return "私网用户";
        }
    } else {
        return "未知";
    }
}
?>

代码引用

在主题根目录下找到functions.php文件,最后一行加入如下代码:

// 评论区显示用户IP归属地
include("get_user_address.php");

评论区显示

怎么在评论区显示呢?直接找到主题的评论的那个文件,我这里的文件路径是geekframe/comment-pro.php,在显示评论时间的代码后面加入如下代码即可,CorePress Pro 主题大概在第 46 行,放到后面,主题更新后记得加代码,其他主题的话根据主题的具体情况操作吧。

 ·<a style="color: #07c160;"><?php echo province(get_comment_author_ip()); ?></a>

后台查看评论用户的IP和端口(220912-OK)

为遵守国家相关法律法规,网站留言评论要做到可追溯性,所以需要在后台评论管理界面,增加留评用户的IP和端口一栏。

优化代码

如果也有需要去掉这个限制的小伙伴,将以下代码添加到你当前使用的WordPress主题的 functions.php 文件中。

// 后台查看评论用户的IP和端口
add_action('wp_insert_comment', 'wp_insert_ipport', 10, 2);
function wp_insert_ipport($comment_ID, $commmentdata)
{
	#   $userip = $_SERVER['HTTP_CLIENT_IP']; //这里获取用户 IP 地址,需要按需修改
	$ipport = $_SERVER['REMOTE_PORT'];
	//ipport 是存储在数据库里的字段名字,取出数据的就会用到
	#   update_comment_meta($comment_ID,'_userip',$userip);
	update_comment_meta($comment_ID, '_ipport', $ipport);
}
//为 IP Port 栏目添加 CSS
function ipport_css()
{
?>
	<style type="text/css">
		#_ipport {
			width: 80px;
			color: #0073aa;
		}

		/* CSS for ipport columns */
		#_userip {
			width: 100px;
			color: #0073aa;
		}

		/* CSS for ip columns */
		#author_ip {
			width: 100px;
			color: #0073aa;
		}

		/* CSS for ip columns */
	</style>
<?php
}
add_action('admin_head', 'ipport_css');
//后台评论添加 IP 端口栏目
add_filter('manage_edit-comments_columns', 'my_comments_columns');
add_action('manage_comments_custom_column', 'output_my_comments_columns', 10, 2);
function my_comments_columns($columns)
{
	#   $columns[ '_userip' ] = __( 'IP地址' );        //User IP 代表列的名字
	$columns['author_ip'] = __('IP地址');        //User IP 代表列的名字
	$columns['_ipport'] = __('端口号');        //IP Port 代表列的名字
	return $columns;
}
function output_my_comments_columns($column_name, $comment_id)
{
	switch ($column_name) {
		case "author_ip":
			echo get_comment_author_IP($comment_id, 'author_ip', true);
			break;
			#       case "_userip" :
			#       echo get_comment_meta( $comment_id, '_userip', true );
			#       break;
		case "_ipport":
			echo get_comment_meta($comment_id, '_ipport', true);
			break;
	}
}

移除 WordPress 加载的JS和CSS链接中的版本号(220913-OK)

默认情况下,WordPress会在页眉处输出版本号,存在一定的安全隐患。且做全站加速CDN时,因为后后缀名会导致加速不生效

优化代码

如果也有需要去掉这个限制的小伙伴,将以下代码添加到你当前使用的WordPress主题的 functions.php 文件中。

此处内容需要 回复 后才能查看

文章插入图片自动移除 img 的 width、height、class 属性(220913-OK)

我们编辑 WordPress 文章时,在插入图片附件的时候 WordPress 默认会添加类似于以下的代码:

<img class="alignnone size-full wp-image-123" src="https://www.wmviv.com/uploads/2022/09/Abcdefgh.png" alt="Abcdefgh" width="390" height="260" />

其中图片 img 标签中就会有 class、src、alt、width、height 这些属性,其中 src 是图片的路径,alt 是图片的描述有利于优化,所以 class 以及 width、height 对于一个优秀的 WordPress 主题来说是非常的多余和没有必要的,甚至会造成数据库的冗余等等。

解决方法

将下面的代码加入到主题文件夹内 functions.php 中合适位置,即可完成部署

//WordPress 文章插入图片自动移除 img 的 width、height、class 属性
//add_filter( 'the_content', 'fanly_remove_images_attribute', 99 );
add_filter( 'post_thumbnail_html', 'fanly_remove_images_attribute', 10 );
add_filter( 'image_send_to_editor', 'fanly_remove_images_attribute', 10 );
function fanly_remove_images_attribute( $html ) {
	//$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
	$html = preg_replace( '/width="(\d*)"\s+height="(\d*)"\s+class=\"[^\"]*\"/', "", $html );
	$html = preg_replace( '/  /', "", $html );
	return $html;
}

Logo扫光扫光特效

效果演示

待添加

CSS

在主题根目录下找到 style.css 文件,在合适位置加入如下代码

此处内容需要 回复 后才能查看

CorePress主题转Mac风格美化(220913-OK)

查看完整全文:WordPress CorePress主题修改仿Mac样式 - 美好的明天 (wmviv.com)

美化前样式

美化后效果演示

主要将侧边栏标题修改成Mac风格,以及修改主题的圆角,使得界面看起来更圆润。

CSS

在主题根目录下找到 style.css 文件,在合适位置加入如下代码

此处内容需要 回复 后才能查看

文章及页面显示最后更新时间(220913-OK)

效果演示

大多数 WordPress 站点默认情况下文章页只显示发布时间,不过有些文章或页面经过多次修改之后内容已经有所变化,但是发布时间还是旧的,用户看了就会觉得这是一篇旧文章,这个时候如果在文章最后显示一段“本文最后更新于:2022 年 10 月 10 日 10:10”提示估计会更好。

源代码

此处内容需要 回复 后才能查看

以上代码就是如果文章或页面是在发布时间 24 小时(PS:86400 就是 24 小时,具体间隔时间可自行修改,单位是秒)后作出了修改,则在文章或页面最后添加上一段最后更新时间的提示。

CSS

此处内容需要 回复 后才能查看

如果想要实现在文章或页面开头就显示这个最后更新的时间的话,只需要修改代码中第 10 行代码 $content .= $custom_content;

此处内容需要 回复 后才能查看

取消重复评论限制(220913-OK)

为了防止网站垃圾评论,在WordPress程序中已经默认加入了重复评论的限制,但在某些特殊情况下,我们可能需要它允许重复评论。

效果演示

优化代码

如果也有需要去掉这个限制的小伙伴,将以下代码添加到你当前使用的 WordPress 主题的 functions.php 文件中。

此处内容需要 回复 后才能查看

侧边栏小工具个人信息模块头像增加呼吸光环及鼠标悬停旋转放大效果(220918-OK)

很多网站的评论者的头像都是圆形的,并且当你的鼠标移上去的时候会旋转,那么这个怎么实现呢,我在网上找了很多,现在把我修改后的代码贴出来,大部分主题只要将下面的代码添加到 style.css 中即可,实际还需要按各自网站主题来进行部分修改。

效果演示

代码部署

CorePress-Pro 主题为例,打开 CorePress-Pro/static/css/main.css 文件,搜索 .widget-admin-author-avatar 元素,将以下代码贴入覆盖上传即可生效;

其他主题具体哪个位置请自行查看,如果不会操作也可在评论区留言。

搜索以下这段代码

.widget-admin-author-avatar {
	text-align: center;
	position: absolute;
	top: 70px;
	left: calc(50% - 75px / 2)
}
.widget-admin-author-avatar img {
	height: 74px;
	width: 74px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #fff
}

将其替换为如下代码

/* 侧边栏小工具个人信息模块头像增加呼吸光环及鼠标悬停旋转放大效果开始 */
.widget-admin-author-avatar {
	text-align:center;
	position:absolute;
	top:70px;
	left:calc(50% - 75px / 2);
	border-radius: 50%;
	animation: light 4s ease-in-out infinite;
	transition: 0.5s;
}
.widget-admin-author-avatar:hover {
	transform: scale(1.15) rotate(720deg);
}
.widget-admin-author-avatar img {
	height:74px;
	width:74px;
	border:3px solid #fff;
	border-radius:50%;
	background:#fff
}
@keyframes light {
	0% {
		box-shadow: 0 0 4px #f00;
	}

	25% {
		box-shadow: 0 0 16px #0f0;
	}

	50% {
		box-shadow: 0 0 4px #00f;
	}

	75% {
		box-shadow: 0 0 16px #0f0;
	}

	100% {
		box-shadow: 0 0 4px #f00;
	}
}
/* 侧边栏小工具个人信息模块头像增加呼吸光环及鼠标悬停旋转放大效果结束 */

本页面最后更新于:2022-09-20 22:34:20 ,如页内有链接失效,您可在下方留言,我会尽快处理。

版权声明:本站遵循CC BY-NC-SA 4.0版权协议,转载请附上原文地址、链接及本声明。
本文链接:美好的明天 - 教程丨美好的明天 WordPress 主题、插件及优化汇总
THE END
分享
二维码
海报
教程丨美好的明天 WordPress 主题、插件及优化汇总
每次单开文章介绍新增的功能太麻烦,也为了给自己做个备份,给大家做个参考,本文会详细介绍本站目前使用的插件及优化,因数据较多,还在一直更新中。 本站的……
<<上一篇
下一篇>>