如何從桌面查看WordPress網站的移動版本


您要預覽WordPress網站的移動版本嗎? 預覽移動設備佈局可幫助您查看網站在移動設備上的外觀。

儘管您當然可以在手機上查看實時站點,但這在開發階段沒有幫助。

即使您的網站是在線的,通常也更容易在台式計算機上查看移動版本,因此您可以快速進行更改並查看其效果。

在本文中,我們將向您展示兩種簡單的方法,可以輕鬆預覽WordPress網站的移動佈局,而無需切換到其他設備。

預覽網站的移動版式

為什麼要預覽手機版式

您網站的訪問者中有50%以上將使用手機訪問您的網站。 大約有3%的人將使用平板電腦。

這意味著擁有一個在移動設備上看起來不錯的網站是必不可少的。

實際上,移動設備是如此重要,以至於Google現在為其網站排名算法使用“移動設備優先”索引。

即使您使用的是響應式WordPress主題,您仍然需要檢查您的網站在移動設備上的外觀。 您甚至可能想要創建不同版本的關鍵登錄頁面,這些版本針對移動用戶的需求進行了優化(稍後會對此進行更多介紹)。

在本文中,我們將介紹兩種不同的方法來測試您的網站使用桌面瀏覽器在移動設備上的外觀。

重要的是要記住,大多數移動預覽不會完全完美,因為有很多不同的移動屏幕尺寸和瀏覽器。 最後的測試應該始終是在實際的移動設備上查看您的站點。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

1.使用WordPress的主題定制器

您可以使用WordPress主題定制器來預覽WordPress網站的移動版本。

只需登錄到WordPress儀表板並轉到 外觀»定制 屏幕。

WordPress儀表板顯示在哪裡可以找到外觀-自定義

這將打開WordPress主題定制器。 根據您使用的主題,您可能會在此處的左側菜單中看到稍微不同的選項:

WordPress主題定制器(桌面視圖)

在屏幕底部,單擊移動圖標。 然後,您將預覽網站在移動設備上的外觀。

在主題定制器中切換到移動視圖

注意: 藍色編輯符號僅出現在預覽器中。 您不會在實時網站上看到這些內容。

當您尚未完成創建博客或處於維護模式時,這種預覽移動版本的方法特別有用。

您可以進行更改並檢查它們的外觀,然後再將其投入使用。

2.使用Google Chrome的DevTools設備模式

Google Chrome瀏覽器具有一組開發人員工具,可讓您在任何網站上進行各種檢查,包括預覽網站在移動設備上的外觀。

只需在桌面上打開Google Chrome瀏覽器,然後訪問要檢查的頁面即可。

這可能是您網站上頁面的預覽,甚至可能是競爭對手的網站。

接下來,您需要右鍵單擊該頁面,然後選擇“檢查”。

在Chrome中選擇“檢查”選項

右側將打開一個新窗格,如下所示:

在Chrome中檢查網站時的默認桌面視圖

在開發人員視圖中,您將能夠看到站點的HTML源代碼。

接下來,點擊“切換設備工具欄”按鈕以更改為移動視圖。

在Chrome中檢查網站的移動視圖

您會注意到網站的預覽將縮小到移動屏幕尺寸。

您還會注意到您網站的外觀更改為移動視圖。 在上面的示例中,菜單已折疊,並且“搜索”圖標已移至菜單的左側而不是右側。

當您將鼠標光標懸停在網站的移動視圖上時,它將變成一個圓圈,如下所示:

Chrome的Inspect視圖中的圓形鼠標光標

可以使用鼠標移動該圓圈,以模仿移動設備上的觸摸屏。

您還可以按住“ Shift”鍵,然後單擊並移動鼠標以模擬捏住移動屏幕進行放大或縮小。

在網站的移動視圖上方,您會看到一些其他選項。

用於在Chrome中檢查您的網站的其他移動選項

這些使您可以做一些額外的事情。 您可以檢查您的網站在不同類型的智能手機上的外觀。 您還可以在快速或慢速3G連接上模擬站點的性能。 您甚至可以使用旋轉圖標旋轉移動屏幕。

如何在WordPress中創建移動專用內容

您的網站必須具有自適應設計,這一點很重要,以便您的移動訪問者可以輕鬆瀏覽您的網站。

但是僅僅擁有一個響應式網站可能還遠遠不夠。 移動設備上的用戶通常在尋找與台式機用戶不同的東西。

許多高級主題和插件使您可以創建在台式機和移動設備上顯示不同的元素。 您還可以使用Beaver Builder之類的頁面構建器插件在移動視圖中編輯目標頁面。

您絕對應該為潛在客戶生成表單創建特定於移動設備的內容。 在移動設備上,這些設備要求的信息最少,最好是電子郵件地址。 它們還應該看起來不錯並且易於關閉。

OptinMonster是創建移動設備專用彈出窗口和銷售線索生成表格的絕佳方法。 它是市場上功能最強大的WordPress彈出插件和銷售線索生成工具。

它們具有特定的設備定位顯示規則,可讓您向移動用戶和桌面用戶顯示不同的廣告系列。 您甚至可以將其與OptinMonster的地理位置定位功能和其他高級個性化功能結合使用,以實現最佳轉換。

我們希望本文能幫助您學習如何預覽網站的移動佈局。 您可能還想看看我們有關最佳插件的文章,以將WordPress網站轉換為移動應用程序。

獎金: 查看我們精選的最佳商務電話服務,以便為移動用戶添加點擊通話按鈕。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。