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

释放双眼,带上耳机,听听看~!
WordPress实现未登录时图片模糊显示-森西分享

一、写在前头

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

二、实现思路

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

三、效果预览

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

四、教程

  • 将以下提供的代码添加到主题根目录下的 functions.php 的 <?php 底部即可。

代码一:实现未登录时全站图片模糊

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

代码二:实现未登录时文章详情页图片模糊

<code class="language-none">//未登录文章详情页内图片模糊
function n_yingcang_css(){
echo '&lt;style&gt;
.entry-content img {
-webkit-filter: blur(10px)!important;
-moz-filter: blur(10px)!important;
-ms-filter: blur(10px)!important;
filter: blur(6px)!important;}
&lt;/style&gt;';
}
if( !is_user_logged_in()) {add_action( 'wp_head', 'n_yingcang_css' );};
//未登录文章详情页内图片模糊
</code>

为TA充电
共{{data.count}}人
人已赞赏
WordPress教程

7B2主题优化 WordPress标签HTML伪静态教程

2021-5-19 14:40:26

WordPress美化

Ripro主题美化教程 | VIP资源类型角标+免费资源判断图标

2020-2-19 16:07:00

免责声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索