給WordPress網(wǎng)站上添加圖片點擊放大效果(點擊博客中圖片后,圖片放大且呈現(xiàn)在燈箱中,且右上角有全屏、放大、轉(zhuǎn)發(fā)的按鈕)
[重要通告]如您遇疑難雜癥,本站支持知識付費業(yè)務,掃右邊二維碼加博主微信,可節(jié)省您寶貴時間哦!
眾所周知,WordPress 博客中圖片顯示太???想點擊放大?設(shè)置了媒體后發(fā)現(xiàn)再次點擊竟然彈出窗口,很是煩人,除去安裝 WordPress 現(xiàn)有插件,還可以直接添加代碼實現(xiàn),點擊博客中的圖片之后,圖片放大并呈現(xiàn)在燈箱中(WordPress圖片燈箱效果),且右上角有全屏、放大、轉(zhuǎn)發(fā)的按鈕哦;
先來看看顯示效果~~
首先在服務器上找到 WordPress 站點目錄,/wwwroot/[m.madamerex.com]
在目錄底下找到 wp-content/themes/[WordPress使用的主題名稱]/header.php,添加以下代碼
<!-- 圖片放大 -->
<link rel="stylesheet" />
在同級目錄下的 footer.php,添加以下代碼
<!-- 圖片放大 -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
在同級目錄下的 functions.php,添加以下代碼
/**圖片燈箱自動給圖片加鏈接**/
add_filter('the_content', 'fancybox');
function fancybox($content){
$pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
$replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
保存退出之后再次點擊查看你的文章會出現(xiàn)了你想要的燈箱效果!
寫在最后,如果不想外聯(lián),可以直接把這個文件下載下來,自己在.CSS處自己加載即可!
問題未解決?付費解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信
所寫所說,是心之所感,思之所悟,行之所得;文當無敷衍,落筆求簡潔。 以所舍,求所獲;有所依,方所成!