大多数现代网站使用响应式网页设计技术，以确保它们看起来很好，具有可读性，并且在任何屏幕尺寸的设备上都可以使用，比如手机、平板电脑、笔记本电脑、台式 PC 显示器、电视、投影仪等等。

使用这些技术的网站有一个单一的模板，它修改布局响应屏幕尺寸：

• 较小的屏幕通常显示线性的单列视图，其中通过单击 (汉堡包) 图标激活菜单等 UI 控件。
• 更大的屏幕显示更多的信息，可能会有水平对齐的边栏。UI 控件 (如菜单项) 可能总是可见的，以便更容易访问。

响应式网页设计的一个重要部分是实现 CSS 或 JavaScript 媒体查询，以检测设备大小，并自动为该大小提供适当的设计。我们将讨论为什么这些查询很重要以及如何使用它们，但首先，让我们从总体上讨论响应式设计。

为什么响应式设计很重要？

提供单一的页面布局并期望它在任何地方都能工作是不可能的。

当移动电话在 21 世纪初首次获得基本的 web 访问时，网站所有者通常会创建两到三个独立的页面模板，大致基于移动和桌面视图。随着设备种类呈指数级增长，这变得越来越不切实际。

今天，有许多屏幕尺寸，从小型手表显示器到巨大的 8k 显示器，甚至更多。即使你只考虑移动电话，最近的设备也可以比许多低端笔记本电脑拥有更高的分辨率。

移动设备的使用也超过了台式电脑。除非你的站点有一组特定的用户，否则大多数人都可以通过智能手机访问站点。小屏幕设备不再是事后的想法，应该从一开始就考虑，尽管大多数网页设计师、开发人员和客户仍在使用标准 PC。

谷歌已经认识到移动设备的重要性。当网站可用并且在智能手机上表现良好时，它们在谷歌搜索中排名更高。好的内容仍然是至关重要的，但是一个加载缓慢的站点如果不能适应你的用户群的屏幕尺寸，可能会损害你的业务。

最后，考虑可访问性。一个适合所有人的网站，无论他们使用什么设备，都会有更多的用户。在许多国家，可访问性是一项法律要求，但即使不是在你所在的国家，你也要考虑到，更多的观众将带来更多的转换率和更高的盈利能力。

响应式设计是如何工作的？

响应式设计的基础是媒体查询：一种 CSS 技术，可以根据诸如输出类型 (屏幕、打印机甚至语音)、屏幕尺寸、显示长宽比、设备方向、颜色深度和指针精度等指标应用样式。媒体查询也可以考虑用户的偏好，包括减少动画，亮 / 暗模式，和更高的对比度。

我们所展示的示例只使用屏幕宽度来演示媒体查询，但是站点可以更加灵活。有关详细信息，请参阅 MDN 上的全部选项集。

媒体查询支持非常出色，并且已经在浏览器中存在了十多年。只有 IE8 及以下版本不支持。它们忽略了媒体查询应用的样式，但这有时是有好处的 (请参阅下面的最佳实践部分)。

有三种使用媒体查询应用样式的标准方法。第一种方法在 HTML 代码中加载特定的样式表。例如，当设备的屏幕宽度至少为 800 像素时，下面的标签加载 width .css 样式表：

<link rel="stylesheet" media="screen and (min-width: 800px)" href="wide.css" /> 

其次，样式表可以使用 @import at-rule 有条件地加载到 CSS 文件中：

/* main.css */
@import url('wide.css') screen and (min-width: 800px); 

注意，@import 应该避免使用，因为每个导入的 CSS 文件都是渲染阻塞的。HTML <link>标签是并行下载的，而 @import 是串行下载文件的。

更典型的是，你将使用修改特定样式的 @media CSS at-rule 块在样式表中应用媒体查询。例如：

/* default styles */
main {
  width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
  main {
    width: 760px;
  }
} 

开发人员可以应用任何必要的媒体查询规则来适应站点的布局。

媒体查询最佳实践

当媒体查询最初设计出来时，许多网站选择了一套严格固定的布局。这在概念上更容易设计和编写代码，因为它有效地复制了有限的一组页面模板。例如：

• 小于 600px 的屏幕使用 400px 的移动布局。
• 屏幕宽度在 600px 和 999px 之间，使用 600px 宽的平板布局。
• 大于 1000px 的屏幕宽度使用 1000px 的桌面布局。
• 这项技术存在缺陷。在非常小和非常大的屏幕上，结果可能看起来很差，并且由于设备和屏幕大小随时间变化，需要进行 CSS 维护。

一个更好的选择是使用移动优先流体设计，带有断点，以适应特定大小的布局。本质上，默认布局使用最简单的小屏幕样式，将元素放在垂直的线性块中。

例如：<article>、<aside>在<main>容器中：

/* default small-screen device */
main {
  width: 100%;
}

article, aside {
  width: 100%;
  padding: 2em;
} 

当支持媒体查询并且屏幕超过特定宽度时，比如 500px，<article>和<aside>元素可以水平放置。这个例子使用了一个 CSS 网格，主要内容使用大约三分之二的宽度，次要内容使用剩余的三分之一：

/* larger device */
@media (min-width: 500px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2em;
  }

  article, aside {
    width: auto;
    padding: 0;
  }
} 

媒体查询选择

响应式设计也可以在现代 CSS 中使用更新的属性来实现，这些属性本质上适应布局，而无需检查视口尺寸。选项包括：

• calc、min-width、max-width、min-height、max-height 和更新的 clamp 属性都可以根据已知的限制和可用空间来定义元素的尺寸。
• 视口单元 vw、vh、vmin 和 vmax 可以根据屏幕尺寸分数来确定元素的大小。
• 文本可以显示在 CSS 列，出现或消失的空间允许。
• 可以使用 min-content、fit-content 和 max-content 维度来根据子元素的大小调整元素的大小。
• 当元素开始超过可用空间时，CSS flexbox 可以包装或不包装元素。
• CSS 网格元素可以按比例比例缩放。repeat CSS 函数可以与 minmax、auto-fit 和 auto-fill 一起使用，以分配可用空间。
• 新的 (目前) 实验性的 CSS 容器查询可以对布局中组件可用的部分空间作出反应。

这些选项超出了本文的范围，但它们通常比只响应屏幕尺寸的粗糙媒体查询更实用。如果你可以在没有媒体查询的情况下实现布局，它可能会使用更少的代码，更高效，并且需要更少的维护。

也就是说，在有些情况下，媒体查询仍然是唯一可行的布局选择。当你需要考虑其他屏幕因素，如长宽比、设备方向、颜色深度、指针精度或用户偏好 (如减少动画和明暗模式) 时，它们仍然是必不可少的。

你需要 JavaScript 中的媒体查询吗？

到目前为止，我们主要讨论的是 CSS。这是因为大多数布局问题都可以 —— 也应该 —— 在 CSS 中单独解决。

然而，在某些情况下，使用 JavaScript 媒体查询而不是 CSS 是可行的，例如：

• 组件 (如菜单) 在大小屏幕上具有不同的功能。
• 从纵向 / 横向切换会影响 web 应用的功能。
• 触屏游戏必须改变画布布局或调整控制按钮。
• 网页应用遵循用户偏好，如暗 / 亮模式、简化动画、触摸粗糙度等。

下面几节演示了在 JavaScript 中使用媒体查询 (或类似媒体查询的选项) 的三种方法。所有的例子都返回一个状态字符串：

• 小视图 = 宽度低于 400 像素的屏幕；
• 中等视图 = 宽度在 400 到 799 像素之间的屏幕；
• 大视图 = 宽度为 800 像素或更多的屏幕。

选项 1: 监视视口尺寸

在媒体查询实现之前的黑暗日子里，这是唯一的选择。JavaScript 会监听浏览器的 “resize” 事件，分析 viewport 维度使用 window.innerWidth 和 window.innerHeight (或旧 IEs 中的 document.body.clientWidth 和 document.body.clientHeight)，并相应地做出反应。

这段代码将计算出的小、中或大字符串输出到控制台：

const
  screen = {
    small: 0,
    medium: 400,
    large: 800
  };

// observe window resize
window.addEventListener('resize', resizeHandler);

// initial call
resizeHandler();

// calculate size
function resizeHandler() {

  // get window width
  const iw = window.innerWidth;
 
  // determine named size
  let size = null;
  for (let s in screen) {
    if (iw >= screen[s]) size = s;
  }

  console.log(size);
} 

上面的例子检查浏览器调整大小时视口的大小；决定它是小，中，还是大；并将其设置为 body 元素上的一个类，这会改变背景颜色。

这种方法的优点包括:

• 它可以在所有可以运行 JavaScript 的浏览器中工作 —— 甚至是古老的应用程序。
• 你可以捕捉到准确的维度，并做出相应的反应。

缺点:

• 这是一种需要大量代码的老技术。
• 是不是太精确了？你真的需要知道宽度是 966px 还是 967px 吗？
• 你可能需要手动将维度匹配到相应的 CSS 媒体查询。
• 用户可以快速调整浏览器的大小，使处理程序函数每次都重新运行。这可能会通过限制事件来重载较旧和较慢的浏览器。它只能每 500 毫秒触发一次。

总之，除非你有非常具体和复杂的大小要求，否则不要监视视口尺寸。

选项 2: 定义和监视 CSS 自定义属性 (变量)

这是一种稍微不同寻常的技术，它在触发媒体查询时改变 CSS 中自定义属性字符串的值。所有现代浏览器都支持自定义属性 (IE 除外)。

在下面的例子中，在 @media 代码块中 ——screen 自定义属性被设置为 "small"， "medium" 或 "large"：

body {
  --screen: "small";
  background-color: #cff;
  text-align: center;
}

@media (min-width: 400px) {
 
  body {
    --screen: "medium";
    background-color: #fcf;
  }
 
}

@media (min-width: 800px) {
 
  body {
    --screen: "large";
    background-color: #ffc;
  }
 
} 

该值可以在 CSS 中使用伪元素单独输出 (但注意它必须包含在单引号或双引号中)：

p::before {
  content: var(--screen);
} 

你可以使用 JavaScript 获取自定义属性值：

const screen = getComputedStyle(window.body).getPropertyValue('--screen'); 

但这并不是全部，因为返回值包含 CSS 中冒号之后定义的所有空格和引号字符。字符串将是 ' "large" '，因此需要进行一些整理：

// returns small, medium, or large in a string
const screen = getComputedStyle(window.body)
                 .getPropertyValue('--screen')
                 .replace(/\W/g, ''); 

你可以在这里查看一个工作演示。(如果使用桌面浏览器，请在新窗口中打开此链接，以便更容易调整大小。移动用户可以旋转设备。)

该示例每两秒检查一次 CSS 值。它需要一些 JavaScript 代码，但是有必要对更改进行轮询 — 你不能使用 CSS 自动检测自定义属性值的更改。

也不可能将值写入伪元素并使用 DOM 突变观察者检测变化。伪元素不是 DOM 的 “真正” 部分！

选项 3: 使用 matchMedia API

matchMedia API 有点不寻常，但它允许你实现一个 JavaScript 媒体查询。大多数 IE10 以上的浏览器都支持它。构造函数返回一个 MediaQueryList 对象，该对象具有一个 match 属性，对于其特定的媒体查询，该属性的计算结果为 true 或 false。

以下代码在浏览器视口宽度为 800px 或更大时输出 true：

const mqLarge  = window.matchMedia( '(min-width: 800px)' );
console.log( mqLarge.matches ); 

可以将 “更改” 事件应用于 MediaQueryList 对象。每当 matches 属性的状态发生变化时，就会触发此操作：它在之前为 false (低于 800px) 的情况下变成 true (超过 800px)，反之亦然。

接收处理函数传递 MediaQueryList 对象作为第一个参数：

const mqLarge  = window.matchMedia( '(min-width: 800px)' );
mqLarge.addEventListener('change', mqHandler);

// media query handler function
function mqHandler(e) {
 
  console.log(
    e.matches ? 'large' : 'not large'
  );
 
} 

处理程序只在匹配属性更改时运行。它不会在页面初始加载时运行，所以你可以直接调用该函数来确定启动状态：

// initial state
mqHandler(mqLarge); 

当你在两个不同的状态之间移动时，API 工作得很好。要分析三种或更多的状态，如小型、中型和大型，需要更多的代码。

首先定义一个带有关联 matchMedia 对象的屏幕状态对象：

const
  screen = {
    small : null,
    medium: window.matchMedia( '(min-width: 400px)' ),
    large : window.matchMedia( '(min-width: 800px)' )
  }; 

没有必要在小状态上定义 matchMedia 对象，因为当在 small 和 small 之间移动时，medium 事件处理程序将触发。

然后可以为 medium 和 large 事件设置事件侦听器。它们调用相同的 mqHandler () 处理函数：

// media query change events
for (let [scr, mq] of Object.entries(screen)) {
  if (mq) mq.addEventListener('change', mqHandler);
} 

处理程序函数必须检查所有 MediaQueryList 对象，以确定当前是small、medium的还是large。匹配必须按大小顺序运行，因为 999px 的宽度将匹配medium和large - 只有large的应该 “获胜”：

// media query handler function
function mqHandler() {
 
  let size = null;
  for (let [scr, mq] of Object.entries(screen)) {
    if (!mq || mq.matches) size = scr;
  }
 
  console.log(size);
 
} 

你可以在这里查看一个工作演示。(如果使用桌面浏览器，请在新窗口中打开此链接，以便更容易调整大小。移动用户可以旋转设备。)

示例使用如下:

1. 在 CSS 中设置和显示自定义属性的媒体查询 (如上面的选项 2 所示)。
2. 在 matchMedia 对象中使用相同的媒体查询来监控 JavaScript 中的维度变化。JavaScript 输出将在同一时间发生改变。

使用 matchMediaAPI 的主要优点是:

• 它是事件驱动的，在处理媒体查询更改时效率很高。
• 它使用与 CSS 相同的媒体查询字符串。

缺点：

• 处理两个或多个媒体查询需要更多的思考和代码逻辑。
• 你可能需要在 CSS 和 JavaScript 代码中复制媒体查询字符串。如果不保持它们同步，可能会导致错误。

为了避免媒体查询不匹配，你可以考虑在构建系统中使用设计标记。媒体查询字符串在 JSON (或类似的) 文件中定义，并在构建时将值插入 CSS 和 JavaScript 代码中。

总结

总之，matchMedia API 可能是实现 JavaScript 媒体查询的最有效和实用的方法。它有一些怪癖，但它是大多数情况下的最佳选择。

固有的 CSS 大小选择越来越可行，但媒体查询仍然是大多数网站响应式网页设计的基础。他们总是需要处理更复杂的布局和用户偏好，如亮 / 暗模式。

在可能的情况下，尽量只对 CSS 进行媒体查询。当你不得不冒险进入 JavaScript 领域时，matchMedia API 为 JavaScript 媒体查询组件提供了额外的控制，这些组件需要额外的基于维度的功能。

拥有一个独特和有创意的网站来吸引用户不再是一个选择。乏味和老式的网站不再可行，因为它们不会引起用户的注意，也不会让用户想要进一步探索。访客应该有独特的体验。一个功能性和整洁的网站是必不可少的，通常会决定你客户的体验。

一个好的网站会带来更多的访问者，在搜索引擎中的排名也会更高。另外，一个网站可以既美观又实用。现在，你不需要牺牲一个来换取另一个，因为两者都是可行的。

一般人会在 7 秒内对你的网站做出判断。所以，在这么短的时间内，你的网站需要获得并保持他们的注意力。如果你不能在这段时间内获得他们的注意，通常情况下用户会失去兴趣并继续前进。

值得庆幸的是，这篇文章可以帮助你，教你在创建网站时不要做什么。我们将帮助你避免一些常见的错误和你可能没有想到的微妙问题。即使你的网站已经建好了，也要看看你是否犯过这些错误。现在做出改变还不晚。

一次性提供太多信息

我们都访问过一个网站，并完全被信息淹没。当一个网站同时呈现太多内容时，用户就会从你想要传达的内容中分心。给用户大量的信息、文字或图片会让他们感到困惑。

试着把你的网站适当地分类，把所有东西都分成一个区域。这将避免任何困惑，并会让你的访客高兴。

显示的内容过少

这个错误与第一个错误完全相反。当一个网站几乎没有信息显示时，也会让用户感到困惑。极简主义现在很流行，但这一趋势也有一个适当的限度。

当访问者访问你的网站时，应该向他们展示必要的信息。用户想知道你是谁，你能给他们提供什么。然后，看了这个，他们会进一步探索你的网站。这时你就可以向他们展示你所做的更详细的信息。

没有进行移动适配

我们都有过尝试在手机上浏览一个网站，却没有为小屏幕进行适当优化的经历。这是非常令人沮丧和头痛的，因为在 2019 年，预计你的网站将是移动友好的。

50% 的人表示，如果一个网站对手机不友好，他们就不太可能使用它。即使这些用户喜欢你的业务，他们也会选择使用移动友好的竞争对手的网站。要避免这种错误，因为这不仅会让用户感到挫败，还会让他们直接找你的竞争对手。

网站上的信息难以找到

当重要信息难以找到时，用户会感到困惑。一个网站应该有重要的信息，如工作时间，地点，经常问的问题，电话号码，电子邮件和关于容易找到的地方。

把这些信息放在搜索栏或你网站的标题附近可以让你很容易找到这些信息。掩盖这些细节是你想要避免的一个主要错误。

弹出窗口和过度使用干扰

每个人都讨厌第一次访问一个网站，然后被一个又一个的弹出窗口炸开。要求用户订阅你的时事通讯，创建一个帐户，禁用他们的广告拦截程序，以及许多其他的事情都是立即关闭用户。

谷歌最近警告用户避免这类弹出窗口和广告，因为它们的侵扰。这是一个很常见的错误。你仍然可以在你的网站上做这些事情，但要谨慎，确保它不会对用户体验产生负面影响。

使用了太多的滑块

幻灯片可能是一种向用户展示信息的有效方式，但最终应该避免使用。它们往往会扰乱用户的注意力。例如，有人可能正在阅读一张幻灯片上的信息，然后它突然跳转到下一张幻灯片上。

这将从你的网站访问者中删除控件。用户应该始终控制他们正在做的事情。你的网站不是一个中学历史的展示，所以避免在你的网站上犯幻灯片错误。

网站的速度

快速的网站是非常重要的。正如我上面提到的，你只有 7 秒钟的时间来吸引用户的注意。如果你的网页不能在这 7 秒内快速加载，那么你可能会失去一个访问者或潜在客户。

当涉及到性能时，有些事情是你无法控制的，比如用户的网速和所使用的设备。但你能控制的很简单。用内容和长视频超载你的主页会影响加载速度。要避免这种错误，请在创建网站时保持简单。

一切都与用户有关

建立一个伟大的网站似乎是一项艰巨的任务。正如我们所看到的，设计师有许多潜在的错误。

然而，当你把用户放在心上时，你就会知道你走的是正确的道路。确保你的网站易于使用，可访问和移动友好。这是让自己走向成功的最佳方式。

你是否在寻找一种方法将长文章分成不同的页面？这样做可以把冗长的内容分成几个页面可以让访问者更容易地阅读文章和浏览不同的部分。

在本文中，我们将逐步向你展示如何将 WordPress 文章拆分为多个页面。

为什么把 WordPress 文章分成多个页面？

如果你的博客文章或指南很长，那么设置文章分页可以提高内容的可读性。

它有助于将文章分成不同的部分，并将它们分成多个页面。这样，访问者可以很容易地消化你的内容，并阅读任何他们感兴趣的部分。

拆分 WordPress 帖子的另一个好处是，它可以帮助增加页面访问量和广告收入。

话虽如此，让我们来看看如何将 WordPress 文章拆分为多个页面。我们将介绍如何在没有插件和使用 WordPress 插件的情况下将你的 WordPress 文章分成多个页面。

方法一：不使用插件的情况拆分文章页面

设置分页最简单的方法是在你的 WordPress 内容编辑器中使用 “分页” 块。你不需要 WordPress 插件来把你的文章分成多个页面。

首先，在你的 WordPress 网站上编辑或添加一篇新文章。在那之后，点击加号 (+) 按钮，你想要拆分你的内容，并添加一个 “分页” 块。

现在，你应该在内容中看到一个分页行，以指示分页将出现在何处。

如果你使用的是经典的编辑器，那么请使用<!-- nextpage -- > 标签来分割你的内容。

只需编辑任何博客文章，并进入 “文本” 视图，进入你想要拆分内容的标签。

你也可以使用键盘上的 Alt + Shift + P 键插入分页符。要做到这一点，转到 “Visual” 视图，并按下键盘快捷键，在你想要添加分页符的地方。

之后，你可以预览和发布博客文章。现在你将在内容的底部看到分页。

方法二：使用插件将 WordPress 文章分页

另一种将冗长的内容分解成不同页面的方法是使用 WordPress 插件。这种方法的好处是，当文章满足特定条件时，它会自动对文章进行分页。

对于这个方法，我们将使用免费的自动分页帖子插件，因为它很容易使用，并且适用于任何 WordPress 主题。

首先，在你的 WordPress 网站上安装并激活 Automatically Paginate Posts 插件。

一旦插件在你的网站上激活，进入设置 » 阅读，并向下滚动到 “自动分页帖子” 部分。

你可以选择将文章类型拆分为不同的页面。然后，选择是根据总页数还是每页大约字数来拆分文章。

接下来，点击 “Save Change” 按钮来存储你的设置。

这个插件会根据你的设置自动分割你的内容。然而，你也可以在使用插件时手动添加分页符到你的内容中。

如果你使用的是 Google 文档、Google 电子表格和微软 Word 文档，你肯定熟悉 "搜索和替换" 功能。当你尝试在多个页面上查找重复的单词或短语，然后删除或使用另一个单词或短语而不是此单词或短语时，就会发生这种情况。

与上述工具类似，WordPress 还允许你搜索和替换网站上的数据库。你可以快速找到文本、图像，甚至 URL，并将其替换为新的文本、图像或 URL。

事实上，WordPress 不会让用户轻松过滤和替换数据。你必须使用代码或从第三方工具寻求帮助。因此，我们将此教程放在一起，清楚地向你展示如何在 WordPress 网站上执行数据库搜索和更换。在深入了解详细指南之前，我们想细分一些常见案例，说明何时需要应用此强大的功能。

你应该何时搜索和替换 WordPress 数据库？

• 改进 SEO- 你有几个关于某个主题的帖子。但是，它们不会在任何地方排名，因为你的目标是一个从低到低的搜索量关键字。建议用具有相同含义的高音量关键字替换此关键字。因此，Google 可以轻松地澄清你的主要内容，并更好地对内容进行排名。
• 纠正拼写错误或语法错误–在发表之前，每篇文章都必须经过仔细的审查和编辑。但是，你的团队有时会犯反复使用错误词而不注意的错误。一旦你发现，此错误已在你的网站上发生。不过，一个接一个的修复是很费时的。这是搜索和替换功能派上用场的地方。
• 更换未受保护的网址 - 这种情况似乎很少见，但它仍然以某种方式发生。在保护已嵌入内容的媒体文件时，其原始 URL 将更改为受保护的链接。如果此文件以前在其他帖子中的众多帖子中使用，你也必须更新它们。搜索和替换解决方案使你能够查找特定文件的未受保护链接，并将其替换为受保护的链接。

在 WordPress 中搜索和替换数据库的方法

在 WordPress 中搜索和替换方法时，你有多种选择。事实上，你可以使用 "Ctrl + F" 键盘组合来发现页面上的文本。如果你有数百页需要处理，该怎么办？

手动浏览每一页，发布和编辑每一个页面都会使你疯狂和疲惫。你有时也会错过一些事件。最重要的是，不可能使用 "Ctrl +F" 来查找链接。

除此之外，如果你决定手提更新数据库，请小心，因为它涉及大量数据表。对于拥有专业编码知识的开发人员来说，这可能是一个挑战。

此外，触摸数据库可能会危及你的网站性能。只要稍有不正确的更改，就会产生潜在的冲突，并损坏你的数据库。

我们建议使用插件来简化流程。

使用 Better Search Replace 插件

该插件超过 100 万个具有 4.5 星级评级的活动安装，你可以想象 "更好的搜索替换" 在查找数据并将其替换为其他数据方面是多么强大。

插件将访问你选定的表，然后进行查询，以找出应该更新多少字段。与其他插件不同，它不需要访问你的 WordPress 服务器。

简单的"设置"页面使你能够轻松配置 WordPress 搜索并替换功能。要开始使用插件，请参考以下方法：

1. 要在WordPress仪表板中添加新的插件 
2. 在关键字框中键入 "Better Search Replace"
3. 安装并激活插件
4. 前往工具并选择Better Search Replace选项
5. 输入你打算查找的文本或 URL 以及你想要在搜索中显示的文本或 URL
6. 选择要替换的数据库表
7. 点击运行搜索 / 替换

该插件允许你从主站点仪表板或仅在单个子站点的所有表上运行 "搜索" 和 "替换"。

执行搜索和替换时要小心，因为如果你输入了不正确的字符串，则会损坏 WordPress 数据库。在采取任何行动之前，你还必须备份数据。

你有时会在运行搜索时看到白色屏幕，并使用更好的搜索替换插件进行更换。要解决这个问题，只需前往 "设置" 选项卡并降低最大页面大小级别即可。

使用 MySQL 查询进行文字新闻搜索和替换

此方法适合那些对代码感到满意且不喜欢将插件添加到 WordPress 网站的人。要做到这一点，你需要：

1. 登录到你的 c 面板托管，并在数据库部分选择 phpMy 管理员

2. 单击你的 WordPress 数据库名称，然后点击 SQL

3. 以以下格式输入 SQL 查询

   update TABLE_NAME set FIELD_NAME =
   replace(FIELD_NAME, 'Text to find', 'text to replace with'); 

4. 用特定的 WordPress 表和文件名称替换 TABLE_NAME 和 FIELD_NAME

5. 点击继续

在过去的几年中，浏览器已用于 document.execCommand() 剪贴板交互。尽管得到了广泛的支持，但这种剪切和粘贴方法还是要付出代价的：剪贴板访问是同步的，并且只能读写 DOM。

这对于一小段文字来说很好，但是在很多情况下，阻止页面进行剪贴板传输是一种糟糕的体验。在内容可以安全粘贴之前，可能需要耗时的清理或图像解码。浏览器可能需要从粘贴的文档中加载或内联链接资源。在磁盘或网络上等待时会阻塞页面。想象一下，将权限添加到混合中，要求浏览器在请求剪贴板访问时阻止页面。同时，document.execCommand()用于剪贴板交互的权限 被松散定义，并且在浏览器之间有所不同。

在 异步剪贴板 API 解决了这些问题，提供了一个良好定义的权限模型不阻止页面。Safari 最近宣布 在 13.1 版中支持它。这样，主要的浏览器就具有基本的支持水平。在撰写本文时，Firefox 仅支持文本。在某些浏览器中，图像支持仅限于 PNG。如果你对使用 API感兴趣， 请 在继续之前查阅浏览器支持表。

异步剪贴板 API 仅限于处理文本和图像。Chrome 84 引入了一项实验性功能，该功能使剪贴板可以处理任意数据类型。

复制：将数据写入到剪贴板

writeText（）

要将文本复制到剪贴板，请调用writeText()。由于此 API 是异步的，因此该writeText()函数将返回一个 Promise，该 Promise 将根据传递的文本是否被成功复制来解决或拒绝：

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
} 

write（）

实际上，writeText()这只是通用write() 方法的一种便捷方法，它还允许你将图像复制到剪贴板。像一样writeText()，它是异步的并返回 Promise。

要将图像写入剪贴板，你需要将图像作为 blob。一种实现方法是使用fetch()，从服务器请求图像，然后调用 blob()响应。

由于多种原因，可能不希望或不可能从服务器请求图像。幸运的是，你还可以将图像绘制到画布上并调用 canvas 的 toBlob() 方法。

接下来，将ClipboardItem对象数组作为参数传递给write() 方法。目前，你一次只能传送一张图片，但我们希望将来增加对多张图片的支持。ClipboardItem将图像的 MIME 类型作为键并将 Blob 作为值的对象。对于从fetch()或获取的 Blob 对象canvas.toBlob()，该blob.type属性自动包含图像的正确 MIME 类型。

try {
  const imgURL = '/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
} 

复制事件

在用户启动剪贴板副本的情况下，非文本数据将作为 Blob 提供给你。该 copy事件 包括一个clipboardData属性，该属性具有已采用正确格式的项目，从而无需手动创建 Blob。呼叫preventDefault()以防止默认行为因你自己的逻辑而异，然后将内容复制到剪贴板。在此示例中未涵盖的是当不支持剪贴板 API 时如何回退到较早的 API。

document.addEventListener('copy', async (e) => {
    e.preventDefault();
    try {
      let clipboardItems = [];
      for (const item of e.clipboardData.items) {
        if (!item.type.startsWith('image/')) {
          continue;
        }
        clipboardItems.push(
          new ClipboardItem({
            [item.type]: item,
          })
        );
        await navigator.clipboard.write(clipboardItems);
        console.log('Image copied.');
      }
    } catch (err) {
      console.error(err.name, err.message);
    }
  }); 

粘贴：从剪贴板中读取数据

readText（）

要从剪贴板中读取文本，请致电navigator.clipboard.readText()并等待返回的 Promise 解决：

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
} 

read（）

该navigator.clipboard.read()方法也是异步的，并返回 Promise。要从剪贴板读取图像，请获取 ClipboardItem 对象列表 ，然后对其进行迭代。

每个都ClipboardItem可以将其内容保留为不同的类型，因此你需要再次使用for...of循环来遍历类型列表。对于每种类型，请getType()以当前类型为参数调用该方法以获得相应的 Blob。和以前一样，此代码不与图像绑定，并且可以与其他将来的文件类型一起使用。

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        console.log(URL.createObjectURL(blob));
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
} 

paste 事件

如前所述，已经计划引入事件以与 Clipboard API 一起使用，但是现在你可以使用现有paste事件。它与用于读取剪贴板文本的新异步方法很好地配合使用。与copy活动一样，不要忘记致电preventDefault()。

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const text = await navigator.clipboard.readText();
  console.log('Pasted text: ', text);
}); 

处理多种文件类型

大多数实现将多种数据格式放在剪贴板上，以便进行单个剪切或复制操作。这样做的原因有两个：作为应用程序开发人员，你无法了解用户要将文本或图像复制到的应用程序的功能，并且许多应用程序都支持将结构化数据粘贴为纯文本。这是通过 “编辑” 菜单项呈现给用户的，该菜单项的名称为 “粘贴和匹配样式” 或 “不格式化”。

以下示例显示了如何执行此操作。此示例用于fetch()获取图像数据。

function copy() {
  const image = await fetch('kitten.png');
  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
  const item = new ClipboardItem({
    'text/plain': text,
    'image/png': image
  });
  await navigator.clipboard.write([item]);
} 

安全性和权限

剪贴板访问一直是浏览器的安全隐患。没有适当的权限，页面可能会以静默方式将所有形式的恶意内容复制到用户的剪贴板，粘贴时会产生灾难性的结果。

使网页不受限制地对剪贴板具有读取权限，这会更加麻烦。用户通常将诸如密码和个人详细信息之类的敏感信息复制到剪贴板，然后在用户不知情的情况下，任何页面都可以读取这些信息。

与许多新 API 一样，剪贴板 API 仅支持通过 HTTPS 服务的页面。为防止滥用，仅当页面为活动选项卡时才允许剪贴板访问。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板，但是从剪贴板中读取始终需要权限。

复制和粘贴的权限已添加到 Permissions API 中。clipboard-write当页面是活动选项卡时，权限会自动授予它们。clipboard-read必须请求该权限，你可以通过尝试从剪贴板读取数据来执行此操作。下面的代码显示了后者：

const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
const permissionStatus = await navigator.permissions.query(queryOpts);
// Will be 'granted', 'denied' or 'prompt':
console.log(permissionStatus.state);

// Listen for changes to the permission state
permissionStatus.onchange = () => {
  console.log(permissionStatus.state);
}; 

你还可以使用该allowWithoutGesture选项控制是否需要用户手势来调用剪切或粘贴。该值的默认值因浏览器而异，因此应始终将其包括在内。

这就是剪贴板 API 的异步特性真正派上用场的地方：尝试读取或写入剪贴板数据会自动提示用户获得许可（如果尚未授予许可）。由于 API 基于承诺，因此这是完全透明的，并且用户拒绝剪贴板权限会导致承诺被拒绝，因此页面可以适当地响应。

由于 Chrome 仅在页面为活动标签时才允许剪贴板访问，因此你会发现，如果直接粘贴到 DevTools 中，此处的某些示例将不会运行，因为 DevTools 本身就是活动标签。有一个技巧：使用延迟剪贴板访问setTimeout()，然后在调用函数之前快速在页面内部单击以将其聚焦：

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000); 

特征检测

要在支持所有浏览器的同时使用 Async Clipboard API，请测试 navigator.clipboard并退回到较早的方法。例如，这是实现粘贴以包括其他浏览器的方式。

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  let text;
  if (navigator.clipboard) {
    text = await navigator.clipboard.readText();
  }
  else {
    text = e.clipboardData.getData('text/plain');
  }
  console.log('Got pasted text: ', text);
}); 

这还不是全部。在 Async Clipboard API 之前，Web 浏览器混合了多种复制和粘贴实现。在大多数浏览器中，可以使用document.execCommand('copy')和触发浏览器自身的复制和粘贴 document.execCommand('paste')。如果要复制的文本是 DOM 中不存在的字符串，则必须将其注入 DOM 中并进行选择：

button.addEventListener('click', (e) => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();
  const result = document.execCommand('copy');
  if (result === 'unsuccessful') {
    console.error('Failed to copy text.');
  }
}); 

content-visibility属性在 Chromium 85 中得到支持，该属性可能是影响页面加载性能的最具影响力的新 CSS 属性之一。content-visibility可以使用户代理可以跳过元素的渲染工作，包括布局和绘画，直到需要它为止。

因为跳过了渲染，所以如果大部分内容不在屏幕上，则利用该content-visibility属性可使初始用户加载更快。

它还允许与屏幕上的内容进行更快的交互。

浏览器支持

content-visibility: auto依赖于 CSS 包含规范中的原语，虽然content-visibility: auto目前 仅在 Chromium 85 中得到支持（并且被 Firefox 视为 “有价值的原型”），但是大多数现代浏览器都支持该属性。

CSS 属性值

该属性主要目标是通过提供 DOM 子树与页面其余部分的可预测隔离来实现 Web 内容的渲染性能改进。

基本上，开发人员可以告诉浏览器页面的哪些部分被封装为一组内容，从而使浏览器无需考虑子树之外的状态就可以对内容进行推理。知道内容（子树）的哪些位包含隔离的内容意味着浏览器可以为页面渲染做出优化决策。

CSS 包含四种属性值，每种类型都是containCSS 属性的潜在值，可以将它们组合在一起，以空格分隔的值列表：

• size：元素上的大小限制可确保元素框的布局，而无需检查其后代。这意味着，如果我们仅需要元素的大小，就可以跳过后代的布局。
• layout：布局限制意味着后代不会影响页面上其他框的外部布局。如果我们要做的只是布置其他方框，这使我们有可能跳过后代的布局。
• style：样式包含可确保不仅对子元素有影响的属性不会脱离元素（例如，计数器）。如果我们想要的只是在其他元素上计算样式，这使我们有可能跳过后代的样式计算。
• paint：绘制包含可以确保容纳盒的后代不会显示在其边界之外。没有任何内容可以使元素明显溢出，并且如果元素在屏幕外或以其他方式不可见，则其后代也将不可见。如果元素不在屏幕上，这使我们有可能跳过 paint后代。

使用content-visibility跳过渲染工作

可能很难弄清楚要使用哪个包含值，因为只有在指定了适当的设置后，浏览器优化才能开始。你可以使用这些值来查看最合适的值，或者可以使用另一个 CSS 属性content-visibility来自动应用所需的包含。content-visibility确保开发人员以最小的努力获得最大的浏览器性能提升。

content-visibility属性可以接受多个值，但是auto可以立即提高性能。具体属性值包括：自动获得布局、样式和绘制内容。如果该元素不在屏幕上（并且与用户无关，则相关元素将是在其子树中具有焦点或选择的元素），那么它也会获得size包容性。

简而言之，如果该元素不在屏幕上，则不会渲染其后代。浏览器在不考虑元素任何内容的情况下确定元素的大小，并在此处停止。跳过大多数渲染，例如元素子树的样式和布局。

当元素接近视口时，浏览器不再添加size容器，而是开始绘制和点击测试元素的内容。这使得渲染工作能够及时地被用户看到。

用contain-intrinsic-size指定元素的自然大小

为了实现content-visibility的潜在好处，浏览器需要应用大小限制，以确保内容的呈现结果不会以任何方式影响元素的大小。这意味着该元素将布局为好像是空的。如果元素没有在常规块布局中指定的高度，则其高度为 0。

这可能不是理想的，因为滚动条的大小会发生变化，这取决于每个具有非零高度的故事。

值得庆幸的是，CSS 提供了另一个属性，contain-intrinsic-size该属性可以有效地指定元素的自然大小（如果该元素受大小包含影响）。在我们的示例中，我们将其设置1000px为对部分的高度和宽度的估计。

这意味着它将进行布局，就好像它有一个 “内在大小” 尺寸的子对象一样，从而确保未调整大小的 div 仍然占据空间。 contain-intrinsic-size充当占位符大小来代替呈现的内容。

用content-visibility: hidden隐藏内容

如果要利用缓存的呈现状态的优点，使内容不呈现在屏幕上而又不呈现它怎么办？输入： content-visibility: hidden。

该content-visibility: hidden属性为你提供未渲染内容和缓存渲染状态的所有相同优点，与content-visibility: auto屏幕外一样。但是，与之不同auto，它不会自动开始在屏幕上呈现。

这给了你更多的控制权，使你可以隐藏元素的内容并稍后快速取消隐藏它们。

将其与隐藏元素内容的其他常见方式进行比较：

• display: none：隐藏元素并破坏其呈现状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。
• visibility: hidden：隐藏元素并保持其呈现状态。这并不能真正从文档中删除该元素，因为它（及其子树）仍占据页面上的几何空间，并且仍然可以单击。它也可以在需要时随时更新渲染状态，即使隐藏也是如此。

content-visibility: hidden在另一方面，在保留元素的呈现状态的同时将其隐藏，因此，如果需要进行任何更改，则仅在再次显示该元素（即，content-visibility: hidden删除属性）时才会发生更改 。