因為主題還沒有發(fā)布用戶自定義網(wǎng)址功能，自己寫了一個簡單的，想要的可以自己前往網(wǎng)站獲取，https://www.wznav.com/

不想看下方文字教程的前往網(wǎng)站觀看視頻教程：

https://www.wznav.com/teaching/add-user-defined-navigation

 

下面開始教程：首先在網(wǎng)站底部引入css以及js，如何引入請百度

https://www.wznav.com/wp-content/themes/onenav-wznav/assets/css/user-site.css

https://www.wznav.com/wp-content/themes/onenav-wznav/assets/js/user-site.js

然后去一為首頁布局中添加一個小工具（僅首頁可以直接使用：自定義模塊），

子頁面請使用小工具

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

找到需要添加自定義導(dǎo)航的子頁面小工具————添加自定義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">添加網(wǎng)址</button>
      <button id="editMode">編輯</button>
    </div>
  </div>
  <hr>
  <div class="recent-intro">※自定義添加的網(wǎng)址,記錄存儲于本地瀏覽器。（右鍵（手機端長按）可以添加本站網(wǎng)址到這里哦）</div>
  <div class="wznav-site-list" id="siteList"></div>
</div>
<!-- 彈窗結(jié)構(gòu) -->
<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>網(wǎng)址</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')">關(guān)閉</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>