注:笔者已启用WP Githuber MD插件使用Markdown语法进行文章编辑,启用的主题为generatepress


1、进入你的宝塔面板首页

点击文件选项:

2、分别找到以下几个文件进行修改

2.1、header.php

 <!-- 图片放大 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

2.2、footer.php

 <!-- 图片放大 -->
 <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

2.3、functions.php

 /**图片灯箱自动给图片加链接**/
 add_filter('the_content', 'fancybox');
 function fancybox($content){
     $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
     $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
     $content = preg_replace($pattern, $replacement, $content);
     return $content;
 }

保存退出之后再次点击查看你的文章会出现如下效果:

 

给你的wordpress添加文章内图片鼠标点击放大浏览的功能吧~的更多相关文章

  1. wordpress 解决文章内http链接问题

    1. 登录Wordpress后台, 常规设置  > 里面把站点URL 修改成 https开头 2. 登录phpmyadmin , 执行替换链接的SQL 替换wordpress配置的链接地址 (可 ...

  2. wordpress添加文章固定字段

    让wordpress的文章数据表 增加一个字段,使其能在文章编辑页能编辑,并能通过rest api 获取出来. 例:给文章加一个缩略图字段 litpic 首先 通过mysql 给文章表 wp_post ...

  3. Winform 图片鼠标滚动查看(放大,缩小,旋转,拖动查看)[日常随笔]

    方法千千万,我只是其中一笔[通过控制PictureBox来控制图片,图片完全施展在控件中]...几久不做,还真有点陌生! 窗体构造中添加鼠标滚动: /// <summary> /// 窗体 ...

  4. Android浏览图片,点击放大至全屏效果

    做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Ac ...

  5. wordpress添加文章浏览统计(刷新不重复)

    wordpress本身不带文章浏览统计,可以用插件wp-postview,但是刷新还是算一个浏览次数. 1.首先在主题下functions.php里增加以下代码,这段代码也是网上可以找到的 //add ...

  6. wordpress添加文章阅读数量

    将下面代码添加到functions.php //取得文章的阅读次数 function post_views($before = '点击 ', $after = ' 次', $echo = 1) { g ...

  7. 【PyQt5-Qt Designer】添加图片+鼠标点击

    添加图片+鼠标点击 graphicsView中添加图片 效果图 添加之后左边1处 生成qrc文件  选择文件右键编译-生成图片的16进制文件 课后作业:

  8. Android 响应webview中图片的点击事件

    最近碰到个新需求需要点击webview中的图片进行放大显示. 整理了下思路,想到了下面的一个可行的方案. 方案思路, 1.在点击图片的时候调用本地的java方法并给出响应的图片地址 2.本地获得图片地 ...

  9. html图片上传阅览并且点击放大

                  关闭   qq_31540195的博客       目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典           程序员9月书讯      每周荐书: ...

  10. Android中Textview显示Html,图文混排,支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

随机推荐

  1. vue+antv g6+element-ui完整流程图

    最近一直在研究流程图相关的技术,一次在逛GitHub时发现了一个技术栈为vue+g6+element-ui的项目,基础功能完好,如node与edge的托拉拽,主界面如下:

  2. 使用 CMake 编写 Windows 静态库

    最近有一个多个 .h .cc .cpp 编译成静态库的需求,故记录下过程 静态库不同于动态库,它不需要 main 入口,只要各个源文件与头文件能对应,也就是源文件和头文件引用的头文件能够找到函数的符号 ...

  3. win32 - 监视网络流量

    可以从Windows Sockets 2开始, 虽然微软提供了官方工具, Microsoft Network Monitor 3.4, 不过我们如果能够通过相关的代码和api的调用来深入研究的话,那就 ...

  4. 【Android 逆向】【攻防世界】基础android

    1. 下载并安装apk,提示要输入密码 2. apk拖入到jadx中看一下 this.login.setOnClickListener(new View.OnClickListener() { // ...

  5. Jetpack Compose(1) —— Android 全新的 UI 框架

    写在前面 Jetpack Compose 已经不是什么新技术了,Google 早在 2019 年就推出 Jetpack Compose 的首个 alpha 版本,时至今日,相当大比例的国内 Andro ...

  6. 【Azure 应用服务】"App Service"如何能判断自身网路没有问题?

    问题描述 当创建了一个App Service服务后,如何能判断服务自身网络链路路没有问题? 如果是用VM,通常用Ping可以判断.但是"网站应用App Service" 的Kudu ...

  7. ArrayList学习总结

    1.ArrayList简介[1] ArrayList实现了List接口.ArrayList的方法实现和vector相似,只是线程不安全的. ArrayList的 size.isEmpty.get.se ...

  8. Java // 使用二维数组打印 10 行杨辉三角

    1 // 使用二维数组打印 10 行杨辉三角 2 public static void main(String[] args) 3 { 4 //1.声明 并初始化二维数组 5 int[][]yangh ...

  9. php7中的三元运算符的区别

    <?php $tmparr = ['cover'=>'http://img.immomo.com.cn']; echo isset($tmparr['cover'])."\n&q ...

  10. RC4算法:流密码算法的经典之作

    一.RC4算法的起源与演变 RC4算法是由著名密码学家Ron Rivest在1987年设计的一种流密码算法,其名字来源于Rivest Cipher 4.RC4算法简单高效,被广泛应用于数据加密和网络安 ...