如何在 WordPress 中的 ID 元素中创建页面滚动

锚点链接与 Web 本身一样古老，但它仍然是一个非常有用的组织工具。 在本教程中，您将使用“滚动页面 ID”WordPress 插件来现代化锚点链接行为。

锚点链接与标准 HTML 页面链接不同。 标准链接将访问者移动到目标页面的顶部。 锚链接将访问者带到特定位置 地点 在页面上。 使用锚点标记标记页面上的位置。

因此，锚点链接有两个部分：链接本身和锚点，用于指示链接应转到何处。

在大多数 Web 浏览器中，单击锚点链接会立即“跳转到”锚点位置。 这没什么错，这就是它们的设计方式。

但是，如果你能突然跳转到WordPress页面，并用流畅的滚动替换它呢？ 滚动具有更现代的氛围，让访问者知道他们仍在同一页上，并移动到新位置。

为了实现这一效果， 将页面滚动到标识 插件。

在 id 插件上安装页面滚动

登录到 WordPress 管理面板。

在左侧列导航中，单击[プラグイン]将鼠标悬停在链接上，然后单击[新規追加]单击链接。

在“搜索插件…”下，在框中键入“将页面滚动到 id”。

找到插件后，单击“立即安装”按钮。

单击“激活”按钮。

从页面滚动使用 ID 插件

插件一激活，它就会工作。 但是，有几个配置选项，稍后我们将对此进行讨论。

如前所述，锚点链接有两个部分：链接和目标。 锚点链接可以通过链接中的井号标签 （#） 识别。

例如，此链接可能指向名为 的锚点。 新部分:

<跳到 href_“ 。#newセクション继续><>新部分。

锚点标记位于目标页面部分正上方，如下所示：

<ID =”新部分“></a>

让我们看看如何使用插件创建链接和锚点。

创建滚动链接

在 WordPress 古腾堡编辑器中创建链接：

在编辑器中打开页面或帖子。

选择要链接到的文本。

单击链接图标。

将弹出一个字段，其中包含输入 URL 的字段。

输入以井号标签开头的锚点名称。

单击“应用”图标。

在“经典”文字新闻编辑器中创建链接：

在编辑器中打开页面或帖子。

选择要链接到的文本。

单击“插入/编辑页面并滚动到 ID 链接”图标。

「IDリンクへのページスクロール」ウィンドウがポップアップ表示されます。

ハッシュタグで始まるアンカー名を「URL/id (#my-id など)」フィールドに入力します。

「OK」ボタンをクリックしてください。

アンカー(またはターゲット)の作成

WordPress グーテンベルクエディタでアンカータグを作成する:

エディタでページまたは投稿を開きます。

アンカーを挿入するページ上の場所に移動します。

上 ブロックは、あなたがWのリンク先のantは、「ブロックの追加」アイコンをクリックします。

「レイアウト要素」セクションで、「ページをidまでスクロール」ブロックをクリックします。

アンカー名を入力します。 ここにハッシュタグを追加しないでください. これはリンクにのみ使用されます。

ページまたは投稿を保存または更新します。

「古典的な」ワードプレスエディタでアンカータグを作成する:

エディタでページまたは投稿を開きます。

アンカーを挿入するページ上の場所に移動します。

リンク先の段落またはセクションの先頭にカーソルを置きます。

「IDターゲットへのページのスクロールを挿入/編集」アイコンをクリックします。

「IDターゲットへのページスクロール」ウィンドウがポップアップ表示されます。

「id(例:my-id)」フィールドにアンカー名を入力します。 今回はハッシュタグを使わない. これはリンクでのみ使用されます。

「OK」ボタンをクリックしてください。

ページまたは投稿を保存または更新します。

ページ上のアンカーリンク

これで、ページにアクセスすると、IDまでスクロールするためのアンカーリンクがそこにあります。クリックすると、アンカーされたセクションまでスムーズにスクロールダウンします。

私はあなたのために素晴らしい滑らかなスクロールアクションを実演しますが、ここでは静的画像の制限内で作業しています。

静的なナビゲーションバーまたはヘッダーを使用してサイトを調整する方法

サイトにナビゲーション バーやその他のページ上部の要素がある場合は、調整が必要になることがあります。

アンカーリンクは、ブラウザウィンドウの上部にターゲットテキストを表示します。たとえば、WordPressの管理バーを使用すると、テキストの最初の行をカットできます。

「オフセット」を設定することでこれを修正できます。

左側の列ナビゲーションで、[設定]将鼠标悬停在链接上，然后单击[ページをIDにスクロール]单击链接。

向下滚动到“偏移”部分。

我知道碰巧有多高。 文字新闻管理栏 是 32 像素，因此输入 32 作为要偏移的像素数。 您可能需要尝试找到最适合您站点的偏移量。

滚动到页面底部，然后单击“保存更改”按钮。

单击锚点链接以查看所有目标文本。

从页面滚动到 ID 的其他配置选项

锚点链接应该工作。 但是，有几个有趣的配置选项。

酒店 选择器 除非您擅长 CSS 并有理由更改默认值，否则应保留该部分。

你可以试试 滚动时间, 滚动类型/缓动和 滚动行为谁知道有这么多不同类型的滚动？

如果要更改滚动设置，请不要执行任何奇怪的操作。 Web 用户对滚动有一定的期望，并且不希望不必要地分散注意力。

还有许多其他配置设置，但它们主要面向高级用户。 我发现插件使用默认设置效果很好。

滚动到 id 插件，了解卸载页面时会发生什么情况

卸载插件时，使用该插件的页面和帖子将受到影响。

• 插件创建的链接和锚点不再工作。
• 由于插件的短代码（我们没有讨论短代码，但可用）不再工作，因此短代码本身将显示在使用的位置。

返回眼睛 e 基本

发布 WordPress 页面跳转插件教程可能看起来有点过时。 锚链接是一种古老的技术。 然而，它们仍然是一个很好的组织工具，而且不像过去一千年那样频繁使用。

那么，为什么有人在乎呢？

嗯，可用性和用户体验有很多原因。 但作为网站的所有者，我认为你对SEO感兴趣。 你可能会知道 内部链接（链接 发件人 您的网站 目的地 您的网站）有助于良好的SEO.

来吧，我们走 更多的内部链接 – 更好的SEO。

创建锚点链接可能比在目标网站上查找相关页面更容易。 当您发布大量长内容时，尤其如此。

无论哪种方式，我们知道如何停止这些锚链接跳跃，并开始滑动和滑翔。 顺利在我的书里总是好的。

您是否使用指向您网站的锚点链接？ 如果没有，为什么？ 你认为安装插件来改变默认行为是值得的吗？ 请在评论中告诉我们。