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