0

0

如何使用 WordPress 在新窗口或选项卡中打开外部链接

舞夢輝影

舞夢輝影

发布时间:2025-06-18 15:48:11

|

782人浏览过

|

来源于php中文网

原创

您想在新的浏览器窗口或选项卡中打开博客文章中的外部链接吗?

在新窗口中打开外部链接允许您的用户无需离开您的网站即可访问该链接。这会带来更高的用户参与度,因为访问者会在您的网站上花费更多时间。

在本初学者指南中,我们将展示如何在 WordPress 网站的新窗口或选项卡中轻松打开外部链接。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

为什么在新窗口或选项卡中打开外部链接?

外部链接是指向您不拥有或控制的网站的链接。通常,如果您添加指向外部网站的链接,那么您的访问者只需单击该链接即可离开您的网站。

虽然一些用户体验专家说您不应在新窗口或选项卡中打开外部链接,但我们不同意。

您会发现,大多数用户很容易忘记他们上次访问的网站。如果点击链接会将他们从您的WordPress 网站带到新网站,那么他们可能永远不会返回。

为了获得更好的用户体验,我们建议在新窗口(在旧版浏览器中)或新选项卡(在现代浏览器中)中打开外部链接。这样,原来的网页就不会丢失,用户可以通过切换回来继续浏览您的网站。

在新选项卡中打开外部链接的另一个好处是增加网站上的页面浏览量和用户参与度。在您的网站上花费更多时间的用户更有可能注册您的电子邮件通讯、在社交媒体上关注您、发表评论并购买您的产品。

话虽这么说,让我们看看如何在 WordPress 的新窗口或选项卡中轻松打开外部链接。我们将介绍不同的方法,以便您可以选择最适合您的一种:

  1. 使用块编辑器在新选项卡中打开外部链接
  2. 使用经典编辑器在新选项卡中打开外部链接
  3. 使用 HTML 代码在新选项卡中打开外部链接
  4. 在新选项卡中打开导航菜单链接
  5. 使用插件自动打开新选项卡中的所有外部链接

视频教程

https://www.youtube.com/embed/hIj71AmUDqA?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent订阅 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您更喜欢书面说明,请继续阅读。

1. 使用块编辑器在新选项卡中打开外部链接

WordPress块编辑器有一个内置功能,可让您在新选项卡中打开外部链接。在 WordPress 的最新版本中,添加链接时此选项可见。

只需编辑要添加外部链接的博客文章或页面即可。接下来,选择要链接的文本,然后单击“链接”按钮。您还可以按快捷键 CTRL+K(Windows 上)或 Command+K(Mac 上)。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

这将弹出插入链接。只需输入链接并按“Enter”即可。

之后,您需要将“在新选项卡中打开”选项切换到“打开”位置。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

该链接现在将在新选项卡中打开。

提示:您还可以通过安装All in One SEO插件将 title 和 nofollow 属性添加到插入链接弹出窗口。

2. 使用经典编辑器在新选项卡中打开外部链接

如果您仍在使用经典编辑器,那么我们建议您开始使用新编辑器。它更现代、更快,并且包含许多您错过的新功能。

但是,如果您仍然想使用经典编辑器,则可以通过以下方式添加在新选项卡中打开的链接。

首先,您需要编辑要添加链接的帖子或页面。接下来,选择要链接的文本,即锚文本。然后,您可以单击“插入/编辑链接”按钮。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

将出现一个弹出窗口,您可以在其中添加外部链接。

之后,单击旁边的齿轮图标。这将弹出高级插入链接弹出窗口。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

从这里,您需要选中“在新选项卡中打开链接”选项。之后,您应该单击底部的“更新”按钮来添加链接。

ClipDrop
ClipDrop

Stability.AI出品的图片处理系列工具(背景移除、图片放大、打光)

下载

3. 使用 HTML 代码在新选项卡中打开外部链接

有时,您可能需要编写 HTML 来在 WordPress 中添加链接。例如,在新的块编辑器中使用 HTML 模式或在WordPress 主题模板文件中添加链接时,您需要执行此操作。

您可以使用 HTML 代码添加链接,如下所示:

如何使用 WordPress 在新窗口或选项卡中打开外部链接

单击该按钮后,您现在将看到更多选项。

继续检查“显示高级菜单属性”下的“链接目标”选项。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

之后,您可以通过输入 URL、链接文本并单击“添加到菜单”按钮,将自定义链接添加到导航菜单。

您的自定义链接现在将显示在“菜单结构”列中。您现在可以选择“在新选项卡中打开链接”选项,以在不同的选项卡中打开外部链接。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

完成后,单击底部的“保存菜单”按钮。

在新选项卡中打开块主题的导航菜单链接

如果您使用的是块主题,则需要导航到外观»主题并使用完整站点编辑器在新选项卡中打开出站菜单链接。

您需要单击页面顶部的页眉区域,页眉将被选中。接下来,单击菜单左侧的导航区域。将选择菜单,您应该在菜单末尾看到一个“+”号,您可以在其中添加新链接。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

提示:在全屏编辑器中选择块可能很棘手,因此许多用户发现使用列表视图更容易。只需单击屏幕顶部的图标,然后找到并选择导航块。它可以嵌套在其他块中,例如标头和组。

现在,您需要单击“+”图标打开一个弹出窗口,您可以在其中添加链接。在顶部的字段中输入 URL,并确保将“在新选项卡中打开”切换到“打开”位置。

接下来,单击 URL 旁边的“提交”图标来存储您的设置。

如何使用 WordPress 在新窗口或选项卡中打开外部链接

完成此操作后,请不要忘记单击屏幕顶部的“保存”按钮。

5. 使用插件自动打开新选项卡中的所有外部链接

手动检查您添加的每个外部链接的选项可能听起来像是额外的工作。不过,随着时间的推移,你会习惯的。

如果您运行多作者博客或经常忘记在新选项卡中打开外部链接,那么您可以使用插件。

首先,您需要安装并激活“在新窗口中打开外部链接”插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

该插件开箱即用,它会自动在新窗口中打开外部链接。

它实际上不会更改博客文章中的外部链接。相反,它使用 JavaScript 在新窗口中打开外部链接。

注意:停用该插件将阻止外部链接在新窗口中打开。

我们希望本文能帮助您了解如何在 WordPress 的新窗口中轻松打开外部链接。您可能还想查看我们关于如何创建免费企业地址的指南,或者我们专家精选的可在您的网站上使用的最有用的 WordPress 提示、技巧和技巧。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

732

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

414

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

552

2023.09.20

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

72

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 4.6万人学习

Node.js 教程
Node.js 教程

共57课时 | 8.8万人学习

CSS3 教程
CSS3 教程

共18课时 | 4.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号