Jalena Blog

  • 首页
  • 程序开发
    • Java
    • Spring
    • SpringBoot
    • SpringMvc
    • Python
    • Odoo
    • C#
    • SQL
    • Web
    • Linux
  • 移动设备
    • Android
    • Router
  • 杂七杂八
    • 我的废话
    • 音频
    • 视频
    • 常用软件
  • 关于
  1. 首页
  2. 软件开发
  3. Javascript
  4. 正文

WordPress 添加图片灯箱效果

2021-04-25

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

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

添加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')
标签: wordpress
最后更新:2022-02-03

Jalena

原创内容,转载请注明出处! 部分内容来自网络,请遵守法律适用!

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

【腾讯云】云服务器特惠热卖中
文章目录
  • 添加JS CSS引用
    • 增加样式
标签聚合
java Centos odoo 其他 生活 wordpress docker MySql
分类
  • Android / 4篇
  • C# / 10篇
  • Codec / 9篇
  • Conversion / 14篇
  • Editing / 16篇
  • Java / 47篇
  • Javascript / 3篇
  • Linux / 30篇
  • Odoo / 25篇
  • Python / 6篇
  • SQL / 30篇
  • Web / 3篇
  • Windows / 4篇
  • 我的日记 / 10篇
  • 杂七杂八 / 93篇
  • 软件开发 / 72篇
  • 非线性编辑 / 1篇

COPYRIGHT © 2026 Jalena Blog. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蜀ICP备17025376号