WordPress建站：導(dǎo)航菜單設(shè)置，優(yōu)化導(dǎo)航菜單

本文僅針對(duì)Wordpress最新版本提供的所見即所得的自定義菜單的展示操作做說(shuō)明，更多SEO細(xì)節(jié)請(qǐng)參考《WordPress建站SEO優(yōu)化：標(biāo)題、關(guān)鍵詞、標(biāo)簽、描述、搜索蜘蛛、網(wǎng)站地圖》 http://m.yhowl.cn/2279.html 。

設(shè)置路徑：WordPress后臺(tái)>>外觀>>菜單

找到該位置，先選擇你要編輯的菜單，然后添加一個(gè)示例頁(yè)面到菜單，你可以拖拽控制順序，點(diǎn)擊右側(cè)箭頭可以詳細(xì)編輯。，并且你可以添加文章至菜單內(nèi)。實(shí)現(xiàn)導(dǎo)航菜單功能。

多級(jí)導(dǎo)航菜單設(shè)置效果

導(dǎo)航菜單優(yōu)化：突出顯示個(gè)別菜單

如上圖所示，我們要突出顯示“注冊(cè)”和“登錄”兩項(xiàng)菜單，將其做成按鈕的形狀，后臺(tái)的設(shè)置如下：

對(duì)應(yīng)的代碼如下，可以直接復(fù)制粘貼使用：

<span style=”display: block;width: 100px;text-align: center;background-color: #f40;color: #fff;padding-right: 10px;padding-left: 10px;border-radius: 10px;font-size: 18px;”>注冊(cè)</span>

<span style=”display: block;width: 100px;text-align: center;background-color: #269ad7;color: #fff;padding-right: 10px;padding-left: 10px;border-radius: 10px;font-size: 18px;”>登錄</span>

導(dǎo)航菜單優(yōu)化：鼠標(biāo)滑過(guò)顯示圖片

需求場(chǎng)景：鼠標(biāo)滑動(dòng)頂部導(dǎo)航菜單的某一項(xiàng)的時(shí)候，顯示微信公眾號(hào)的二維碼。

效果如下圖所示，后臺(tái)設(shè)置類似上圖，不再重復(fù)截圖。

對(duì)應(yīng)的設(shè)置代碼如下，可以直接復(fù)制粘貼使用，也是放在后的“菜單>>菜單結(jié)構(gòu)>>導(dǎo)航標(biāo)簽”中。

<div class=”er”> <!– <span onmouseover=”over()” onmouseout = “out()” id=”show_qrcode” style=”display: block;width: 100px;text-align: center;background-color: #f40;color: #fff;padding-right: 10px;padding-left: 10px;border-radius: 10px;font-size: 18px;”>公眾號(hào)</span> –> <img class=”gzh” onmouseover=”over()” onmouseout=”out()” src=”http://www.investmentu.cn/wp-content/uploads/2020/08/Wei_Xin.png”> <img class=”erweima” src=”http://www.investmentu.cn/wp-content/uploads/2020/08/Tou_Zi_Da_Xue_Wei_Xin_Gong_Zhong_Hao.jpg” style=”display:none” id=”img” /> </div> </body> <script> function over(){ img = document.getElementById(“img”); img.style.display = “block”; } function out(){ img = document.getElementById(“img”); img.style.display = “none”; } </script> </html> <style type=”text/css”> .gzh { display: block; margin: 10px; width: 30px; position: relative; } .erweima { width: 250px; position: absolute; z-index: 999; } </style>