WordPress 添加图片灯箱效果

写文章越来越多的使用图片，但博客自带的图片效果太差，相当影响阅读体验。

抽空给博客加了一个效果。。

添加JS CSS引用

为了来的快，直接在JsDriver中搜索lightBox，找到了第一个方案@fancyapps/fancybox，本着简单快速的想法，越快搞完越好。。

打开博客主题的Function.php文件吗，插入代码。

add_action('wp_enqueue_scripts', 'load_fancybox_resource', 99);
function load_fancybox_resource() {
    wp_register_script( 'fancybox_script', 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js', array( 'jquery' ), '3.5.7', true);
    wp_register_style('fancybox_style', 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css', null, '3.5.7', 'all');

    wp_enqueue_script( 'fancybox_script' );
    wp_enqueue_style('fancybox_style');
}

增加样式

大家都晓得Wordpress是使用了Jquery的，这里就直接点，（不想改文章，更不想改代码）

如果没有自定义的css文件引入主题，参考上面的样式引入即可。

jQuery('.wp-block-image img, .wp-block-gallery img').each(function (index, element) {
    var $parent = $(element).parent().is('a');
    if ($parent) {
        $(element).parent().attr('data-fancybox', 'gallery');
    } else {
        $(element).wrap('<a>').parent().attr({ href: element.src, 'data-fancybox': 'gallery' });
    }
});


jQuery('.content figure').addClass('aligncenter')