WordPress实现未登录时图片模糊显示

WordPress未登录图片模糊

一、写在前头

  • 图片模糊目的就是为了引流用户注册为本站,到达用户数量增多或留着用户的原因之一

二、实现思路

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

三、效果预览

  • 可在本站登录或取消登录,查看实际效果

四、教程

  • 将以下提供的代码添加到主题根目录下的 functions.php<?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' );};
//未登录文章详情页内图片模糊
结束(云萌阁)
  • 本篇教程结束,如果觉得还不错,不妨收藏一下本站点,以免丢失,在此谢谢您嘞,我的宝!
云萌阁分享网所有资源均来自网络,如有侵权,请联系 yunmge@qq.com ,我们会及时处理相关信息!
云萌阁 - 分享网 » WordPress实现未登录时图片模糊显示

云萌阁 - 更多的精彩

云小店 云盘