替文章圖片 套用 lightcase 功能
原本的主題並沒有點選圖片即可針對不同裝置放大圖片的功能,為了有更方便的閱讀體驗,上網找到了這個 JS Library 便手動改進去自己的主題中,使用效果還挺好的便分享給有需要的人囉。
- 將下載回來的檔案解壓縮放到主題的資料夾內 總共有 css / js / fonts / scss 四個資料夾直接放入主題中
- 打開佈景主題內容 找到 header.php 裡面新增下述程式碼
12345678<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/lightcase.css"><script src="<?php bloginfo('template_directory'); ?>/js/lightcase.js"></script><script type="text/javascript">jQuery(document).ready(function($) {$('a[data-rel^=lightcase]').lightcase();});</script>
- 打開 functions.php 裡面新增下述程式碼
123456789//自動添加lightcase標籤屬性add_filter('the_content', 'lightcase_replace');function lightcase_replace ($content) {global $post;$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";$replacement = '<a$1href=$2$3.$4$5 data-rel="lightcase"$6>$7</a>';$content = preg_replace($pattern, $replacement, $content);return $content;}
關於 data-rel="lightcase" 這部份其實在官方文件有很多詳細的說明,可以設定成 lightcase:myCollection 或其他相關的特效。最後是每次撰寫文章時新增媒體記得要 連結到媒體檔案 這樣才會有效果!因為單純新增媒體只會<img>標籤因此 lightcase 無法正常顯示效果。
使用了幾個月的心得,我發現我上傳的圖片其實很大,但是顯示出來的效果都會縮小,原因出在 lightcase.js 檔案中 maxWidth 和 maxHeight 的數值被指定成 800 和 500 將這部份修改成 'auto' 效果會稍微好點,圖片會依照不同的螢幕大小有自適應的功能!但是仍然以螢幕能直接完整觀看整個圖片為主。
相逢就是有緣,留下足跡吧!