在WordPress中实现输入Post ID加载对应文章的功能需求

算力阿峰

2026-8-24

实现通过Post ID直接访问WordPress文章的功能

1. 插入HTML输入控件

直接在WordPress页面的代码编辑模式，或者主题自定义模板文件中添加以下HTML，创建输入框和提交按钮：

<div class="post-id-access">
  <input type="number" id="postIdInput" placeholder="输入文章ID" min="1">
  <button id="loadPostBtn">加载文章</button>
</div>

使用type="number"和min="1"可以强制用户输入有效的正整数ID，减少无效输入。

2. 编写跳转逻辑的JavaScript

将以下脚本放在上述HTML下方，或者通过主题functions.php的wp_enqueue_script方法加载，也可以放在页面的自定义脚本区域：

document.getElementById('loadPostBtn').addEventListener('click', function() {
  const postId = document.getElementById('postIdInput').value.trim();
  // 验证输入是否为有效数字
  if (postId && !isNaN(postId)) {
    const baseUrl = 'https://bemaearn.xyz/?p=';
    // 跳转至对应文章页面
    window.location.href = baseUrl + postId;
  } else {
    alert('请输入有效的文章ID');
  }
});

这段代码会监听按钮点击事件，获取输入的ID并验证有效性，验证通过后拼接URL并跳转，否则弹出提示。

3. 可选：美化控件样式

如果需要优化界面显示，添加以下CSS到主题的自定义CSS面板或页面的<style>标签中：

.post-id-access {
  margin: 20px 0;
}
#postIdInput {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
  width: 150px;
}
#loadPostBtn {
  padding: 8px 16px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#loadPostBtn:hover {
  background: #006799;
}