Wordpress中Md文章添加图片点击放大效果

在 Wordpress 中写文章我更喜欢使用 Markdown 语法写文章，轻松方便。所以我装了 WP Editor.md 这个插件，它可以让我们在 Wordpress 中用 Markdown 写文章

我在 Typora 中写好文章之后，直接粘贴到 Wordpress 中，就可以直接发布文章了。

在 Markdown 中插入图片的语法为：

![baidu](https://www.baidu.com/img/bd_logo1.png)

直接将其复制到 Wordpress 中，虽然图片可以显示，但是不能点击进行放大。对于一些尺寸比较大的图片来说，图片会被压缩，看起来不清楚。后来我想给图片添加点击放大的功能。

上网查阅，安装了 Responsive Lightbox & Gallery 这个插件，可以添加图片灯箱效果

不过插件默认是英文的，操作起来不是很友好，上网查阅在 https://wpfanyi.com/ 网站找到了该插件的汉化包

以下内容转自 https://wpfanyi.com/plugins/responsive-lightbox

通过 FTP 手动上传该汉化包

点击下载 responsive-lightbox-zh_CN.zip 即最新版的 Responsive Lightbox & Gallery 响应式灯箱画廊中文语言包，解压后可得到两个文件，

responsive-lightbox-zh_CN.po
responsive-lightbox-zh_CN.mo

请上传到您网站的安装目录，路径为

/wp-content/languages/plugins

这是基于 WordPress 的系统语言路径，注意，要能正常使用，需要看下语言文件是否正确，文件名必须是 responsive-lightbox-zh_CN.mo 才行。

如下，上传后的完整路径。

/wp-content/languages/plugins/responsive-lightbox-zh_CN.mo

操作完毕后，到网站后台的 Responsive Lightbox & Gallery 响应式灯箱画廊设置页面刷新即可看见变化。

安装好插件之后却发现图片还是无法点击放大，后来仔细观察发现，想让图片可以点击放大，你的图片要包含在一个 <a> 标签内，且链接地址是图片源地址才行，如下：

<a  href="https://www.baidu.com/img/bd_logo1.png" ><img src="https://www.baidu.com/img/bd_logo1.png" alt="">
</a>

而 Markdown 中的图片语法会自动转成如下内容：

<img src="https://www.baidu.com/img/bd_logo1.png" alt="baidu">

那这样该怎么办呢？我们可以给图片嵌套一个超链接，如下：

[![baidu](https://www.baidu.com/img/bd_logo1.png)](https://www.baidu.com/img/bd_logo1.png)

这样就会自动生成符合要求的 HTML 内容了。我们将图片修改好回到 Wordpress 中，发现图片确实可以点击放大了

而且图片的替代文字 baidu 也在下面下面显示出来了，不过这个横条好像去不掉（也可能是我不会关）有时候还是很影响查看图片的，所以干脆就不加替代文字

[![](https://www.baidu.com/img/bd_logo1.png)](https://www.baidu.com/img/bd_logo1.png)

这样图片就没有下面一个横条了，看起来也舒服多了

至此在 Wordpress 中 Md 文章添加图片点击放大效果也完成了。

不过有时候一篇文章里有很多图片，每个图片都这样写未免太过麻烦，所以我用 python 写了一个自动转换程序，只需要将正常写好的 Markdown 文件命名为 dd.md 放到桌面上，运行程序就会自动读取 dd.md 文件，将图片格式通过正则表达式转化后在桌面上生成一个 (转化后)dd.md 文件，图片的格式就被自动修改好了

python 代码如下，有需要的自取

import re# 修改规则
def modify(m):# 获取图片源地址url = m.group(2)  head = '[![]'# 修改后的Markdown语法return head + '(' + url + ')' + ']' + '(' + url + ')'  if __name__ == '__main__':# 读取的文件名file_name = "dd.md"# 桌面路径，需要修改为你的桌面路径desktop = r"C:/Users/你的用户名/Desktop/"# 桌面路径 + 文件名 = 文件路径path = desktop + file_name# 以只读，UTF-8编码打开文件f = open(path, 'r', encoding='utf-8')# 读取文件内容，然后关闭文件string = f.read()f.close()# 正则表达式rule = r'!\[(.*?)\]\((.*?)\)'# 通过正则表达式 rule 和修改规则 modify 来修改文件内容# 返回修改后的文件内容file_content = re.sub(rule, modify, string)# 创建转化后的文件路径path = desktop + "(转化后)" + file_name# 以只写，UTF-8编码打开文件，没有文件会自动创建新文件f = open(path, 'w', encoding='utf-8')# 将修改后的内容写入文件，然后关闭文件，打印 OK!f.write(file_content)f.close()print("OK!")

Wordpress中Md文章添加图片点击放大效果相关推荐

给页面添加图片点击放大效果
网站图片前端显示可能较小,添加一个点击放大效果方便图片的查看.采用zoom.js 地址:https://fat.github.io/zoom.js GitHub:https://github.com/ ...
在WordPress网站上添加图片点击放大效果
WordPress 博客中图片显示太小?想点击放大?除去安装 WordPress 现有插件,我们还可以直接添加代码实现点击博客中的图片之前是这样的点击博客中的图片之后,图片放大并呈现在灯箱中,且右 ...
Vue ElementUI表格内实现图片点击放大效果的方式
方法一:使用el-popover弹出框 <el-table-columnprop="image"label="藏品封面"align="cente ...
HTML实现图片点击放大效果
1.样式 <style> .container {z-index:101;position:fixed; width:100%; margin-right:0px;margin-left: ...
如何在ps中添加图片上的塑料布效果
1.塑料滤镜能够产生一种在照片表面蒙上一层塑料布的效果,接下来讲讲如何在ps中添加图片上的塑料布效果.打开PS,把素材导入PS中,Ctrl+J,复制一层图层,选择钢笔工具,将途中人物腰部一下的裙摆抠出 ...
WordPress批量删除文章失效图片_批量删除文章404超链接教程
WordPress批量删除文章失效图片_批量删除文章404超链接教程当你的WordPress网站运营了一段时间,比如几年,网站很可能就会存在不少失效链接,文章中404超链接.批量删除文章中失效图片, ...
java中为按钮添加图片_我们可以在Java接口中为成员定义私有和受保护的修饰符吗？...
java中为按钮添加图片 No, it is not possible to define private and protected modifiers for the members in int ...
java中为按钮添加图片_如何在Java中为字符串添加双引号？
java中为按钮添加图片 In Java, everything written in double-quotes is considered a string and the text writte ...
ivew的Table中使用render添加图片poptip冒泡方法
效果 ivew的Table中使用render添加图片poptip冒泡方法 {title: '操作',key: 'action',width: 120,align: 'center',render: ( ...
android添加图片按钮,如何给Android中的按钮添加图片功能
在layout中建一个my_login.xml文件代码如下 android:layout_width="fill_parent" android:layout_height=&q ...

Wordpress中Md文章添加图片点击放大效果

Wordpress中Md文章添加图片点击放大效果相关推荐

最新文章

热门文章