用了WordPress也有一段時間，發現多少有點功能缺少。WordPress文章中的圖片不能放大顯示，在圖片內容比較小的時候很難看清楚。我希望點下去可以全螢幕顯示圖片，但去搜了一圈插件也沒發現開箱即用的插件能達到我想象的效果。
既然沒有現成的，那就自己動手豐衣足食，做一個簡單的插件。WordPress插件開發說難不難，但也沒有很簡單，主要是熱門插件的程式碼都很複雜，導致參考起來非常困難。WordPress官方的插件開發教學也不算新手友好，有不少關鍵部分都是輕輕帶過。
雖然如此，但我還是成功做出能用的插件。首先，建立主php檔案，檔案名稱改成你的插件名字。
PHP
<?php
/*
* Plugin Name: Super Simple Image Lightbox
* Description: Display image in fullscreen when clicked
* Version: 1.0
* Author: Reinforce II
*/建立activate hook。這裡我也不確定如果沒有東西要做，是不是可以不加。所以我就隨便弄個空的function。
PHP
function mybox_activate() {
// Nothing to do, great
}
register_activation_hook(
__FILE__,
'mybox_activate'
);因為圖片顯示是前端的功能，所以插件主要功能是用Javascript寫，php則將Javascript和CSS樣式丟給前端。WordPress自帶jQuery，所以我可以用jQuery來減少痛苦。
JavaScript
(function ($) {
let template = `
<div class="mybox-cover-viewer">
<img src="">
</div>
`
// Document ready
$(() => {
$('body').append(template)
let viewer = $('.mybox-cover-viewer img').first()
$('.mybox-cover-viewer').on('click', e => {
$('.mybox-cover-viewer').fadeOut()
})
$('.wp-block-image img').on('click', e => {
let imgSrc = $(e.target).attr('src')
if (imgSrc) {
viewer.attr('src', imgSrc)
viewer.parent().fadeIn()
}
})
})
})(jQuery)我們給.wp-block-image img全部加上on click事件，然後當點擊圖片時，將圖片URL設置給顯示元件，最後用.fadeIn()來淡入來全螢幕顯示圖片。再點一下圖片就可以關閉。
用來顯示圖片的元件也很簡單，用下面幾句CSS就能達成全螢幕顯示圖片。
CSS
.mybox-cover-viewer {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
}
.mybox-cover-viewer img {
width: 100%;
height: 100%;
object-fit: contain;
}
.wp-block-image img {
cursor: pointer;
}那些js和css檔案寫好之後，就可以回到主php程式把它們統統丟給前端就行了。
PHP
function mybox_enqueue_css() {
wp_enqueue_style(
'my-lightbox',
plugins_url( '/css/my-lightbox.css', __FILE__ ),
[],
'1.0.0',
'all'
);
}
function mybox_enqueue_js() {
wp_enqueue_script(
'my-lightbox',
plugins_url( '/js/my-lightbox.js', __FILE__ ),
array( 'jquery' ),
'1.0.0',
true
);
}
function mybox_enqueue_all() {
if (is_single()){
mybox_enqueue_js();
mybox_enqueue_css();
}
}
add_action('wp_enqueue_scripts', 'mybox_enqueue_all');最重要的是最後一句add_action和wp_enqueue_scripts，讓WordPress在正確的時機幫我們把檔案加到前端上。
這樣插件就寫好了，最後把插件丟到wp-content/plugins裡面，再去WordPress插件管理那裡啟用插件就能看到效果了！