WordPress 必备：外链卡片小工具，高效插入带缩略图与标题的外链！升级版来袭！

本站原创！“ds 外链卡片小工具” 是一款 WordPress 插件，它能为文章增添独特的外链展示形式，演示效果如下：

豆包

豆包是你的 AI 聊天智能对话问答助手，写作文案翻译情感陪伴编程全能工具。豆包为你答疑解惑，提供灵感，辅助创作，也可以和你畅聊任何你感兴趣的话题。

1. 插入外链卡片

允许用户在文章里通过特定短代码 [ external_link_card url="具体网址" ] 插入外链卡片。插入后，卡片会在文章中直观呈现，方便读者点击访问外部网站。

2. 显示网站缩略图

插件会调用 https://s0.wp.com/mshots/v1/ 服务，根据用户提供的外链 URL 生成对应网站的缩略图。缩略图尺寸固定为 70×70 像素，并展示在卡片的指定位置，让读者在点击链接前能对目标网站有一个直观的视觉印象。

3. 显示网站标题

在卡片初始化时，标题处会显示 “Loading…”。插件会通过异步请求的方式，利用 wp_remote_get 函数获取目标网站的 HTML 内容，再使用正则表达式从 HTML 中提取 <title> 标签内的文字作为网站标题。为了提高性能，标题信息会被缓存 12 小时，避免重复请求。

4. 高效不卡顿

异步加载标题：采用异步请求获取网站标题，避免在页面加载时进行耗时的网络请求，确保页面快速加载，不会因获取标题信息而出现卡顿。

标题缓存机制：将提取到的标题信息缓存 12 小时，后续再次展示相同外链卡片时，直接从缓存中读取标题，减少了重复请求，提高了页面响应速度。

5. 美观的样式设计

CSS 样式：插件自带了内嵌的 CSS 样式，对外链卡片的布局、颜色、边框、字体等进行了精心设计。卡片采用了 flex 布局，保证在不同屏幕尺寸下都能有良好的显示效果。

交互效果：当鼠标悬停在卡片上时，卡片的背景颜色会发生变化（从 #f0f0f0 变为 #ADD8E6），增强了用户的交互体验。

6. 便捷的编辑体验

TinyMCE 集成：插件与 WordPress 的 TinyMCE 编辑器集成，在编辑器的按钮栏中添加了 external_link_card 按钮。用户可以直接在编辑器中点击该按钮，输入外链 URL，即可快速插入外链卡片，无需手动编写短代码。

升级版来袭！

新增设置功能：在文章中插入外链卡片，显示网站缩略图、标题和描述，并缓存12小时高效不卡顿。

测试效果

百度一下，你就知道

全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。

插件下载