写文章越来越多的使用图片,但博客自带的图片效果太差,相当影响阅读体验。
抽空给博客加了一个效果。。
添加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')
文章评论