分享学习记录
互联网技术知识

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

一、写在前头

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

二、实现思路

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

三、教程

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

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

<code class="language-none">//未登录时全站图片模糊
function n_yincang_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_yincang_css' );};
//未登录时全站图片模糊
</code>

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

<code class="language-none">//未登录文章详情页内图片模糊
function n_yincang_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_yincang_css' );};
//未登录文章详情页内图片模糊
</code>
赞(12)
文章名称:《WordPress实现未登录时图片模糊显示的教程》
文章链接:https://www.bailuze.com/1000.html
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本站专注于百度、搜狗、360、谷歌、bing等常见搜索引擎的优化,关键词排名的提高,诚意咨询邮箱526009505@qq.com
分享到