左侧栏中是导航链接菜单栏，每个链接都对应一个页面。点击链接时，会在页面上方生成一个标签页，并加载对应页面的内容到标签页中的iframe中。可以通过标签页切换不同的页面，也可以关闭标签页，类似浏览器的标签页。完整html示例，保证可以运行的html代码，给了几个都不能运行

时间: 2023-12-14 16:40:23 浏览: 127

在wordpress导航栏添加页面跳转

有些时候我们想在导航栏的位置自己添加个页面，当然不是友情链接、关于之类的页面了，因为这些页面一般主题都有模板。怎么使用我就不必多说了。今天说的是建立一个其他的页面，比如说添加一个静态的html页面，这个好多新手更是无从下手，就是想在head.php页面直接添加也不知道添到什么地方！在网上找到了两种解决方式： ### 在WordPress导航栏添加页面跳转的知识点 #### 一、背景与需求分析在使用WordPress构建网站时，用户常常希望能够自定义导航栏中的页面链接，尤其是指向非WordPress内部页面的链接，例如静态HTML页面或其他外部网站。对于不支持WordPress 3.0及以上版本菜单功能的主题来说，这一需求变得更加具有挑战性。 #### 二、解决方案概述根据提供的内容，本文将详细介绍两种常用的方法来实现在WordPress导航栏中添加页面跳转的功能。这两种方法分别是通过创建特定的PHP文件并利用页面模板功能来实现。 #### 三、方法一：使用`Redirect.php`实现页面重定向 **步骤1：创建Redirect.php文件** - 创建一个名为`Redirect.php`的文件。 - 将以下代码复制到文件中： ```php <?php /* TemplateName: Redirect */ if (have_posts()) { the_post(); $pattern = '@(https?://([-\\w\\.]+)+(:\\d+)?(/([\\w/_\\.]*)(\\?\\S+)?))@'; preg_match($pattern, get_the_excerpt(), $matches); if ($matches[0]) { header('Location:' . $matches[0]); } else { echo 'Enter a URL into your page body text.'; } } ?> ``` - 这段代码的主要作用是解析页面摘要中的URL，并自动重定向到该URL。 **步骤2：上传文件** - 将创建好的`Redirect.php`文件上传到当前WordPress主题的根目录下，如`/wp-content/themes/your-theme-name/`。 **步骤3：创建页面** - 登录WordPress后台，新建一个页面。 - 在页面底部的“页面模板”选项中选择“Redirect”。 - 在页面编辑器中输入你希望跳转的目标URL（仅需输入URL，无需其他内容）。 - 发布页面。 #### 四、方法二：使用`linkto.php`实现页面重定向 **步骤1：创建linkto.php文件** - 创建一个名为`linkto.php`的文件。 - 将以下代码复制到文件中： ```php <?php /* TemplateName: linkto */ ?> <script>location="要跳转的地址";</script> ``` - 这段代码的作用是使用JavaScript直接进行页面重定向。 **步骤2：上传文件** - 将创建好的`linkto.php`文件上传到当前WordPress主题的根目录下。 **步骤3：创建页面** - 登录WordPress后台，新建一个页面。 - 在页面底部的“页面模板”选项中选择“linkto”。 - 修改`location="要跳转的地址"`中的“要跳转的地址”为实际的URL。 - 发布页面。 #### 五、额外技巧：在文章标题中实现跳转除了在导航栏中添加页面跳转之外，还可以在文章标题上实现点击跳转的效果。具体操作如下： - 创建一篇文章，并在其标题下方添加`<!–more–>`标签。 - 在`<!–more–>`标签后面添加以下代码： ```html <script>location="要跳转的地址";</script> ``` - 替换“要跳转的地址”为实际的目标URL。 - 发布文章。 #### 六、总结通过以上两种方法，即便是不熟悉PHP编程的用户也能够轻松地在WordPress导航栏中添加自定义的页面跳转功能。这种方法不仅适用于WordPress 3.0以前的主题，同时也适用于所有不支持自定义菜单功能的主题。这对于提高网站用户体验和增加网站功能灵活性都是非常有帮助的。

下面是一个完整可运行的示例： ```html <!DOCTYPE html> <html> <head> <title>标签页示例</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } nav { background-color: #333; color: #fff; display: flex; justify-content: flex-start; align-items: center; height: 50px; padding: 0 10px; } nav a { color: #fff; text-decoration: none; padding: 10px; border-right: 1px solid #fff; } nav a:last-child { border-right: none; } .tabs { display: flex; justify-content: flex-start; align-items: center; height: 30px; padding: 5px 10px; background-color: #eee; } .tab { margin-right: 5px; padding: 5px; background-color: #fff; border: 1px solid #ccc; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: pointer; } .tab.active { background-color: #333; color: #fff; border-color: #333; } .tab-content { padding: 10px; border: 1px solid #ccc; border-top: none; background-color: #fff; } iframe { width: 100%; height: calc(100vh - 90px); border: none; } </style> </head> <body> <nav> <a href="#" class="nav-link" data-page="page1.html">页面1</a> <a href="#" class="nav-link" data-page="page2.html">页面2</a> <a href="#" class="nav-link" data-page="page3.html">页面3</a> </nav> <div class="tabs"></div> <div class="tab-content"> <iframe id="page-iframe" src=""></iframe> </div> <script> const tabsContainer = document.querySelector('.tabs'); const tabContent = document.querySelector('.tab-content'); const iframe = document.getElementById('page-iframe'); // 初始化标签页 function initTabs() { // 获取导航链接 const navLinks = document.querySelectorAll('.nav-link'); // 给每个导航链接绑定事件 navLinks.forEach(link => { link.addEventListener('click', e => { e.preventDefault(); // 获取页面链接 const pageLink = e.target.dataset.page; // 创建标签页并激活 createTab(pageLink); }); }); } // 创建标签页 function createTab(pageLink) { // 创建标签元素 const tab = document.createElement('div'); tab.classList.add('tab'); tab.textContent = 'Loading...'; // 给标签绑定事件 tab.addEventListener('click', () => { activateTab(tab); }); // 添加标签到标签栏 tabsContainer.appendChild(tab); // 激活标签 activateTab(tab); // 加载页面到iframe中 iframe.src = pageLink; } // 激活标签页 function activateTab(tab) { // 取消激活所有标签 const tabs = document.querySelectorAll('.tab'); tabs.forEach(tab => { tab.classList.remove('active'); }); // 激活当前标签 tab.classList.add('active'); // 显示对应的标签页内容 tabContent.style.display = 'block'; // 更新标签页标题 tab.textContent = iframe.contentDocument.title; } // 初始化 initTabs(); </script> </body> </html> ``` 在同级目录下创建三个HTML文件 `page1.html`、`page2.html` 和 `page3.html`，分别写入不同的内容作为测试。运行代码后，点击导航链接可以在页面上方生成标签页并加载对应的页面内容。可以通过标签页切换不同的页面，也可以关闭标签页。

阅读全文

相关推荐

创建首个HTML页面：导航栏演示

Qt实现垂直菜单导航栏的Demo介绍

一个左侧栏，点击左侧菜单栏，在上方生成多标签页，点击上方标签页切换页面，类似浏览器的标签页，打开多个网页通过上方的标签页， iframe嵌套的完整html示例

一个左侧栏，点击左侧菜单栏，在上方生成多标签页，点击上方标签页切换页面，类似浏览器的标签页，通过上方的标签页灵活切换多个网页， iframe嵌套的完整html示例，保证可以运行的html代码

如何在PyCharm中调试Python代码

Android Asset Studio中的颜色调整功能详解

MATLAB可视化工具应用案例分析：科学计算中的图形创新

jQuery实现左侧分类菜单栏代码示例

php+jQuery实现三级导航栏下拉菜单详细教程

yolov3 在 Open Images 数据集上预训练了 SPP 权重以及配置文件.zip

qt 5.3.2 mingw 安装包

586befcf3e78455eb3b5359d7500cc97.JPG

yoloface-50k的可部署模型.zip

使用 Ultralytics API 进行 YOLOv8 推理.zip

学习资料库小程序 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

路面泥泞，坑洼，裂缝，路面损坏，马路牙检测 yolov8标记

Xftp-8.0.0055p.exe

坦克游戏java基础.zip学习资料程序

最新推荐

css3与html5实现响应式导航菜单(导航栏)效果分享

一个炫酷的Bootstrap导航菜单

解决vue多个路由共用一个页面的问题

解决vue项目中某一页面不想引用公共组件app.vue的问题

BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

学习资料库小程序微信小程序+SSM毕业设计源码+数据库+论文+启动教程.zip