2021年Wordpress手把手教你做個獨立站——超級菜單 Mega Menu
本節我們來講講如何藉助WP強大的插件來製作一個獨立站主，夢寐以求的超級菜單，英文叫做，Mega Menu！現在我們才真正的開始跨境電商外貿獨立站的第一步。從超級菜單開始。
前言
一如既往，當我們想做個外貿獨立站的時候，我們得先想清楚自己的商業模式，我們的專業是什麼，我們可以銷售什麼，我們對所銷售的產品有多少了解。當然這些不一定要有，當知識得知道。關於選品問題不是我的重點。作爲一個技術博主，還是會以技術爲主。衣食住行，衣服相關的內容，總會是大多數，是必須品，一雙鞋，一雙襪子，一塊絲巾，都有其價值。作爲教學示例，用時尚美衣爲主題切入，應該不是一個最差的選擇。那麼本篇，我們來主講使用Flatsome主題來設計屬於自己的頁頭部分。
作爲一個從零開始的獨立站買家，也許我們最好的方式是去使用Shopify，使用別人已經提供好的模板，又或者去蝦皮，敦煌，Wish這些平臺直接入駐，但，當我們選擇Woo的時候，就意味着，我們先把產品牢牢地把控在自己的手中，不願意去繳納昂貴平臺服務費，超過個把月的平臺結算。那麼我們現在就開始搭建吧。
尋找頁頭設計
現在，我有一個shopify排名靠前的的排行榜，
https://webinopoly.com/blogs/news/top-100-most-successful-shopify-stores 和 https://www.shopistores.com/top-500-most-successful-shopify-stores/ 整體看下來，都差不多。作爲教學案例，我選擇了一個賣衣服的網站進行模仿。
看了半天，就他了，有男裝和女裝，
https://www.beeinspiredclothing.com/
細心的同學如你，多瀏覽幾個網頁，也一定會有所發現，Shopify的店主都超喜歡超級菜單，最直觀的感受是一下子提高了網站的逼格，當然最實用的還是利於SEO的索引，將當前網站的產品銷售範圍做了一個定型。方便客戶快捷地找到入口。
現在我們來看看，我們要實現的效果。
對沒錯，就是這個樣子。不過由於我們沒有設計師，WP插件再怎麼牛掰，但在處理細節的時候，也會顯得無能爲力。我們只得退而求其次。做一個神似的結構，從整體效果風格上不那麼違和。如果一定要追求完美copy，那我只能說抱歉，你要等一等了，我後面會持續出教程，從設計講起，通過自己擼代碼。一步步地完成完美精細化複製。
超級菜單 Mega Menu插件
爲了實現這個超級菜單，我們第一步當然是去找一款兼容我們當前Flatsome主題的菜單插件。其實，在Flatsome主題中，也是默認支持的Mega Menu菜單的。但對於菜單本身的樣式，Flatsome本身的選項支持力度上並不是那麼友好，所以我們採用第三方插件進行擴展。如果只是想使用默認的超級菜單，只需要在菜單中的選項設置一下即可，如下圖，Design選擇Full width，超級下拉菜單的內容，則需要使用UX Block來設計。
這邊我引用一個超級菜單的插件列表，
https://athemes.com/collections/best-wordpress-menu-plugins 大家可以找個自己喜歡的。或者隨便試一試。至於怎麼免費獲取試用，可以參考我上一篇文章【https://www.toutiao.com/item/6980893952346030625/】裏面的方式，免費的模板網站應該都可以找到。本篇教程，我們使用，Groovy Mega Menu 當然也僅供參考。
當然第一步是安裝插件，完成後，進行簡單的幾步設置。首先是在Groovy menu的菜單找到Integration的選項，如下圖，進行Flatsome的菜單兼容安裝。
安裝完成後，就是這個樣子了。我們需要編輯一下菜單，編輯前，我們先去設置一下產品分類，這很重要，畢竟作爲一個電商獨立站，首要的辦法最好是用產品分類來做導航，
大家根據需要，一個個的添加即可，添加完成後，回到菜單選項中，先在顯示選擇中，找到產品分類。
選擇主菜單，添加進去即可。此後，我們再回到Groovy Menu中進行簡單設置，比如，
這樣對菜單的整理風格進行設置，還有顏色字體等內容，大家可以進行自由選擇。調整完成後，記得右側有個保存的選項，記得點一下，即可看到設置結果，我簡單的設置一下，可以看到如下內容，
是不是很接近了？
超級子菜單
現在，我們可以進入真正的主角了。超級菜單的主要模塊，就是個性化子菜單，我們可以直接在子菜單中展示我們的產品圖片，我們的活動主題，我們的位置信息，還可以直接提交表單等。
創建子菜單前，我們需要安裝WP最爲流行的編輯插件之一Elementor，及其Pro版。免費入門版可以直接在插件庫中搜索，pro的試用版，同理，可以在某些小網站上自行尋找，和找Flatsome免費主題的辦法一樣，我這邊僅作示例參考試用，不作爲商業用途。如果你在真實的環境中使用，請購買正版。https://elementor.com/
安裝之後，先去Elementor菜單的Settings中，將Post Types全部選上。注意一下，它是支持UX Blocks的，這會非常贊，因爲我們的主題主要會使用UX 來製作頁面。
下一步，我們去創建一個菜單塊，
我們直接使用elementor進行頁面設計，創建四列，
我們可以在第一列中添加Nav Menu模塊，並設置菜單。關於Mens Frist，可以在菜單選項進行添加，但菜單列表過多的時候，我們給分割成爲兩個菜單，如，
在選擇樣式裏面，我們可以設置字體的大小，以及菜單的激活樣式等，如下圖，第二列的菜單也是一樣的設置。
在第三列和第四列，設置圖片和按鈕，組件是Call to Action。
如此，我們設置的最終效果就是，
是不是，已經和我們的目標非常一致了。雖然還有一些細節，比如字體，hover的激活模式，圖片文字模式。但影響已經不大了，畢竟每個產品，都要有一些獨特的風格。況且我們只是用UI進行設置，一句話的代碼都沒有寫呢。
後面還有個Wemens的子菜單，就留着大家去添加了，我這邊就不演示了。
本篇後記
從本篇開始，圖文教程後面大概率會往大的顆粒度方向上講解，主要重點會放在工具的選擇和介紹。我會操作製作出一個最終的效果，並說明一些關鍵性配置。沒有必要事無鉅細。因爲實戰中，只有操作過的同學才理解，設置和多方嘗試之後，才明白，那些是可以實現的，那些是沒有辦法實現的。我所堅持的是，不碰代碼的去實踐設計內容。這一目的，也是爲了探索WP在無代碼的情況下的上限在哪兒。
比如，這篇超級菜單中，我原計劃是模仿個和Shopify一樣的子菜單，但是奈何在設置選擇效果的時候，選項不夠用，也沒辦法對選項的效果進行增加。比如，Call to Action的組件中，我沒辦法把按鈕的樣式，改成超鏈接。或者不用這個，使用圖片+超鏈接的形式。但是還是失敗了，因爲遇到高度調整困難等問題。 當菜單的導航在手機端呈現的時候，效果又差強人意。
雖然可以顯示一部分，但是第二列卻丟失了。下拉的時候，效果又丟失了。等等，諸如此類問題。
當然，我的真正目的並不是去解決它。也不是說解決不了。只是去探討當下組件化的設計的上限在哪兒。我們所做的一切，都是爲了no code編程。即，創造者不需要理解編程，只需要理解如何去創造產品。更好的把自家的產品推廣銷售分享給更多人。僅此而已。
好了，廢話不多說，菜單篇先這樣過了，未來有更好的方案，我會持續更新。如有問題，歡迎留言。我會在最新的一篇文章中進行更新解答。
下一篇，我們來探索如何做好首頁的設計。敬請期待！