一为导航添加用户自定义导航

因为主题还没有发布用户自定义网址功能，自己写了一个简单的，想要的可以自己按教程操作

不想看下方文字教程的观看视频教程：

下面开始教程：首先在网站底部引入css以及js，

 <script src="https://www.wznav.com/wp-content/themes/onenav-wznav/assets/js/user-site.js"></script>
<link rel="stylesheet" href="https://www.wznav.com/wp-content/themes/onenav-wznav/assets/css/user-site.css">

然后去一为首页布局中添加一个小工具（仅首页可以直接使用：自定义模块），

子页面请使用小工具

添加完小工具后，前往===》外观==》小工具

找到需要添加自定义导航的子页面小工具————添加自定义HTML

这个是HTML代码：

 <div class="wznav-container">
 <div class="wznav-header">
 <div class="wznav-tabs" id="tabsContainer"></div>
 <div class="wznav-btn-group">
 <button id="editCategory">编辑分类</button>
 <button id="addSite">添加网址</button>
 <button id="editMode">编辑</button>
 </div>
 </div>
 <hr>
 <div class="recent-intro">※自定义添加的网址,记录存储于本地浏览器。（右键（手机端长按）可以添加本站网址到这里哦）</div>
 <div class="wznav-site-list" id="siteList"></div>
 </div>

 <!-- 弹窗结构 -->
 <div class="wznav-modal" id="modal">
 <div class="wznav-modal-content">
 <div class="wznav-modal-header">
 <h3 class="wznav-modal-title" id="modalTitle">添加分类</h3>
 </div>
 <form id="modalForm">
 <div class="wznav-form-group">
 <label id="field1Label">分类名称</label>
 <input type="text" id="field1" required>
 </div>
 <div class="wznav-form-group" id="urlField" style="display: none;">
 <label>网址</label>
 <input type="url" id="field2">
 </div>
 <div class="wznav-modal-actions">
 <button type="button" class="wznav-btn-cancel" onclick="App.closeModal('modal')">取消</button>
 <button type="submit" class="wznav-btn-confirm">确认</button>
 </div>
 </form>
 </div>
 </div>

 <div class="wznav-modal" id="categoryModal">
 <div class="wznav-modal-content">
 <div class="wznav-modal-header">
 <h3 class="wznav-modal-title">管理分类</h3>
 </div>
 <div class="wznav-modal-body">
 <div id="categoryList"></div>
 <div class="wznav-add-category-form">
 <h4>添加新分类</h4>
 <form id="addCategoryForm">
 <div class="wznav-form-group">
 <input type="text" id="newCategoryName" placeholder="输入分类名称" required>
 </div>
 <div class="wznav-modal-actions">
 <button type="button" class="wznav-btn-cancel" onclick="App.closeModal('categoryModal')">关闭</button>
 <button type="submit" class="wznav-btn-confirm">添加</button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

 <div class="wznav-modal" id="confirmModal">
 <div class="wznav-modal-content" style="max-width: 400px;">
 <div class="wznav-modal-header">
 <h3 class="wznav-modal-title">操作确认</h3>
 </div>
 <div class="wznav-modal-body">
 <p id="confirmMessage"></p>
 <div class="wznav-modal-actions">
 <button type="button" class="wznav-btn-cancel" onclick="App.closeModal('confirmModal')">取消</button>
 <button type="button" class="wznav-btn-confirm" id="confirmAction">确认</button>
 </div>
 </div>
 </div>
 </div>