未登錄全站圖片模糊 - WordPress教程

一個朋友提的一個奇怪的要求，需要在訪客未登錄的情況下，模糊WordPress的全站圖片m實現這個功能還是蠻簡單的，分享下代碼和思路。

思路

隱藏圖片有很多方法，讓圖片模糊，看的清而又看不清，從而讓圖片吸引訪客登錄。這里我們用CSS的filter屬性來實現圖片模糊。

這是一串CSS代碼，怎么讓他在訪客未登錄的情況下添加到網站中呢，這里我們需要解決兩個問題，

怎么判斷訪客是否登錄 - 用is_user_logged_in()函數

怎么加載CSS到網站？ - 用wp_head鉤子即可。

如何使用

將以下提供的代碼添加到主題根目錄下的functions.php的<?php 底部即可。

以下代碼，根據需求，任選其一即可。

未登錄文章內圖片模糊

//未登錄文章詳情頁內圖片模糊
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' );};

未登錄全站圖片模糊

相關推薦

WordPress教程 - 什么是Hook鉤子？

Muze

• 20年3月19日
• 喜歡：0
• 瀏覽：370

在指定頁面添加js/css代碼 - WordPress開發

Muze

• 20年10月13日
• 喜歡：0
• 瀏覽：317