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程式設計。即，創造者不需要理解程式設計，只需要理解如何去創造產品。更好的把自家的產品推廣銷售分享給更多人。僅此而已。
好了，廢話不多說，選單篇先這樣過了，未來有更好的方案，我會持續更新。如有問題，歡迎留言。我會在最新的一篇文章中進行更新解答。
下一篇，我們來探索如何做好首頁的設計。敬請期待！