开始之前

保证网站已调用 jquery1.11.1 以上版本

引入文件

在主题 functions.php 中添加:

/**
 * 灯箱插件
 */
function fancybox_scripts() {
    // 仅在文章页加载
    if (is_single()) {
        wp_enqueue_script('fancybox', '//cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.js',array( 'jquery' ),'1.2', false );
        wp_enqueue_style('fancybox-min', '//cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.css');
    }
}
add_action( 'wp_enqueue_scripts', 'fancybox_scripts' );

为图片添加data属性

在主题 functions.php 中添加:

function fancybox_scripts( $content ) {
    global $post;
    $pattern = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";
    $replacement = '<a$1href=$2$3$4$5$6 data-fancybox="images" ' . $post->ID . '>';
    $content = preg_replace( $pattern, $replacement, $content );
    return $content;
}
add_filter( 'the_content', 'fancybox_scripts', 99 );

测试一下?

点击查看原图

2018年8月7日