WordPress|手機版選單設定

Google Sites Phone menu
手機側邊導覽列-手機選單

前言

我是為了有些人偶然接手公司的網站後台,需要小部份修改,不用重學 WordPress,所以內容直接切進我要操作的點。也為了不常操作,自己日後忘記所以筆記起來,若要詳細操作細節,我推薦安妮網站,下方會有推薦連結。

使用主題及編輯器

  • 佈景主題:Astra
  • 編輯器:Elementor
選單之前曾寫了一篇,但是只說明了電腦版適用的選單,其實那時之所以沒提到手機版適用的選單,是因為我也還沒學會,但當時也不著急改,因為百廢待舉,還輪不到它😁。目前大部份內容已上,業務端也告知新網站內容了,得讓新網站快點上線,手機選單就異常重要,大部份的人都手機操作,手機選單不好點選會很扣分。
很為難的是我 Google 了好多種關鍵字,依然找不到我要的重點,後來我是在安妮網站中找到靈感,也才知道如何修正,因為她的文章是所有網站重點都提及,我想知道的部份,她有點到,我們會操作的就能舉一反三了,所以想好好學 WordPress 的,我已經是第三次推薦她,就是因為她的內容,真的很適合新手,清楚貼心又不會寫的太匠氣。

進入 WordPress 後台

  • 只要打自己的網域,後面加入 /wp-admin 即可進入後台做編輯修改
  • Ex:https://yourdomain.com/wp-admin  
WordPress Background modification

選單設定步驟

  1. 點選自訂後,選擇 Header Builder 標題生成器,所有標題頁首相關,都在此設定
  2. 選擇 Primary Menu 主選單,選單所有調整均於此
  3. 或由下圖的二個 ① 進入點選 ▶② 外觀  自訂 ▶  Header Builder,一樣可以找到 ⑤ Primary Menu 
WordPress Primary Menu

手機版選單設定步驟

WordPress Mobile menu width
  1. 預設會先帶至桌機電腦版設定,先切換至手機頁面
  2. 在手機模式下調整 Width 選單寬度,視選單標題長短調整至適當即可,太長的字串會自動折行
  3. 點選 OFF CANVAS 🔽
WordPress Mobile off canvas menu setting

GENERAL一般設定

Header Type標題類型

WordPress Mobile off canvas menu Header Type

Flyout 外推出去

  1. Position:可選擇置左或置右
  2. Popup Width(%):可以選擇佔手機版面比例
  • 以上二個 Full-Screen,因為佔滿全螢幕,所以沒得選擇
  1. Dropdown Target 下拉目標:icon 或連結
  2. Content Alignment 內容對齊:置左/置中/置右
  • 以上二點都很簡單,點按看看就知道意思,Full-Screen 適用

Full-Screen 全螢幕

不太看到有做滿版的選單,但選項若多,也沒啥不好

Dropdown

  • 若選項名字較長,且又有子選單,會很難點
  • 不建議使用這樣式
WordPress Mobile off canvas menu Header Type

DESIGN設計

WordPress Mobile off canvas menu setting design

這部份,我覺得相對不重要,沒有設定,有需要的可以自己點點試試

手機選單圖示 icon 邊界設定

WordPress Toggle button
WordPress Toggle button Margin

延伸閱讀

留言

這個網誌中的熱門文章

Google|表單封面及內圖尺寸

KTJ大榮貨運託運單列印及軟體操作運費說明

剪映|新版支援繁體中文及導出SRT做CC字幕

【檔案下載】大榮貨運單列印託運單下載

字型|可商用免費的字型載點來源

【LINE@官方帳號】主頁|訊息項目-圖文訊息版型尺寸