給WordPress網站上添加圖片點擊放大效果（點擊博客中圖片后，圖片放大且呈現在燈箱中，且右上角有全屏、放大、轉發的按鈕）

[全站通告] 想快速節省您的時間并可接受付費的朋友，可掃右邊二維碼加博主微信-非誠勿擾！

眾所周知，WordPress 博客中圖片顯示太??？想點擊放大？設置了媒體后發現再次點擊竟然彈出窗口，很是煩人，除去安裝 WordPress 現有插件，還可以直接添加代碼實現，點擊博客中的圖片之后，圖片放大并呈現在燈箱中（WordPress圖片燈箱效果），且右上角有全屏、放大、轉發的按鈕哦；

先來看看顯示效果~~

首先在服務器上找到 WordPress 站點目錄，/wwwroot/[www.craigprofessional.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;
}

保存退出之后再次點擊查看你的文章會出現了你想要的燈箱效果！

寫在最后，如果不想外聯，可以直接把這個文件下載下來，自己在.CSS處自己加載即可！

問題未解決？付費解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信

所寫所說，是心之所感，思之所悟，行之所得；文當無敷衍，落筆求簡潔。 以所舍，求所獲；有所依，方所成！