WordPress插件越多,越不是好事情,非插件开发功能值得提倡。lightbox效果非插件方式集成到wordpress来看看。
引入JS需要用到 wp_enqueue_script:
wp_enqueue_script( 'jsdelivr-script','https://cdn.jsdelivr.net/combine/npm/[email protected]', array('jquery'), null, true );
引入CSS需要用到 wp_enqueue_style:
wp_enqueue_style( 'jsdelivr-lightbox2-style','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightbox.min.css',array(),null,'all');
让文章页的图片实现lightbox效果:
$(".single .post-content img").each(function () { var imgWidth = $(this).width(); var imgSrc = $(this)[0].src; var imgA = $(this).parent("a"); var imgALenght = $(this).parent("a").length; var imgAlt = $(this).attr("alt"); // 媒体文件增加放大镜 if (imgWidth > 320) { $(this).css("cursor", "zoom-in"); } // 链接到:媒体文件 if (imgWidth > 320 && imgALenght == 1) { imgA.attr("data-lightbox", "lightbox"); if (imgAlt != "") { imgA.attr("data-title", imgAlt); } } // 链接到:无,并且媒体文件 alt 不为空 if (imgWidth > 320 && imgALenght == 0 && imgAlt != "") { $(this).wrap(function () { return '<a href=' + imgSrc + ' data-lightbox="lightbox" data-title=' + imgAlt + '></a>'; }); } // 链接到:无,并且媒体文件 alt 为空 if (imgWidth > 320 && imgALenght == 0 && imgAlt == null) { $(this).wrap(function () { return '<a href=' + imgSrc + ' data-lightbox="lightbox"></a>'; }); } });
这里有两个参数需要自己修改:.single .post-content
是文章页调用 the_content()
函数的父级 class
。imgWidth > 320
这是判断了大于320px的图片才增加lightbox效果,其实可以设置更大,主要考虑的是手机端,没有必要用lightbox。