前言

在小樱博客闲逛的时候，发现账号退出，登录图片就变成高斯模糊显示了，感觉很有趣，然后在网上找到了源码下面我分享出来。

首先我们浅谈WordPress代码实现未登录时图片高斯模糊显示的目的就是为了吸引勾起用户查看文章欲望和用户注册本站，达到用户数量增多或留着用户的原因之一。

实现思路

• 隐藏图片有很多方法，让图片模糊，看的清而又看 不清，从而让图片吸引访客登录。
• 这里我们用CSS的 filter属性来实现图片模糊。
• 这是一串CSS代码，怎么让他在访客未登录的情况 下添加到网站中呢?
• 这里我们需要解决两个问题
• 怎么判断访客是否登录?-用 is_user_logged_in()函数
• 怎么加载CSS到网站?-用wp_head钩子即可。

演示

开始教程

将以下提供的代码添加到主题根目录下的 functions.php中

function n_yingcang_css(){
echo '<style>
img {
-webkit-filter: blur(10px)!important;
-moz-filter: blur(10px)!important;
-ms-filter: blur(10px)!important;
filter: blur(6px)!important;}
</style>';
}
if( !is_user_logged_in()) {add_action( 'wp_head', 'n_yingcang_css' );};
//未登录时全站图片模糊

function n_yingcang_css(){
echo '<style>
.entry-content img {
-webkit-filter: blur(10px)!important;
-moz-filter: blur(10px)!important;
-ms-filter: blur(10px)!important;
filter: blur(6px)!important;}
</style>';
}
if( !is_user_logged_in()) {add_action( 'wp_head', 'n_yingcang_css' );};