如何修復 WordPress 上的“點擊目標大小不合適”

Lighthouse 是一個功能強大的工具，可讓您收集有關網頁效能的有用資訊。 標記的常見設計問題之一是「點擊目標的大小不合適」 。 但是，如果您不是 Web 開發人員或設計師，您可能不知道這意味著什麼或如何修復它。

幸運的是，讓您的頁面更加用戶友好並解決這個特定的 Lighthouse 問題相對簡單。 例如，您可以增加點擊目標的大小或它們之間的間距。

「Tap 目標大小不合適」問題簡介

在我們探討「Tap 目標大小不合適」問題之前，您需要了解一些有關 Lighthouse 的資訊。 這個開源工具使您能夠評估網頁的品質和效能。 例如，您可以收集有關網站的可訪問性、搜尋引擎優化、頁面速度、設計等的資訊。

如果您有豐富的 Web 開發經驗，您可以在 Chrome DevTools 中或從命令列執行 Lighthouse。 然而，PageSpeed Insights 也由 Lighthouse 提供支持，對於初學者來說通常是一個不錯的選擇。

要對您的網站進行高級評估，您所需要做的就是輸入您網站的 URL 並點擊「分析」 ：

分析將在不久後開始。 然後，您可以查看有關網頁效能和最佳化的詳細資訊。 PageSpeed Insights 透過在清晰的標題下對詳細資訊進行分類，使這一切變得簡單。

如果捲動到底部，您將找到「行動友善」部分。 您將在此處看到有關點擊目標的資訊：

如您所見，我們的分析回傳了「Tap 目標大小不合適」問題。 如果展開該部分，您將找到有關每個點擊目標的更多詳細資訊。

點擊目標是使用者可以在觸控裝置上與之互動的網頁區域。 例如，訪客可能能夠觸控圖像、按鈕、連結或表單元素。

燈塔標誌點擊太小的目標（小於 48 像素 x 48 像素）。 如果您的點擊目標周圍沒有足夠的空間，從而導致目標重疊，您也會看到警告訊息。

當您建立網站的桌面版本而不針對行動體驗進行最佳化時，您可能會遇到此問題。 在桌面上，所有頁面元素可能會很好地組合在一起，但如果它們無法適應不同的螢幕尺寸，則會導致問題。

如何解決「點擊目標大小不合適」問題

現在您已經了解了有關 Lighthouse 和“點擊目標大小不合適”問題的更多信息，讓我們來看看修復該問題的一些簡單方法。

1. 增加點擊目標的大小
2. 增加點擊目標之間的間距

1. 增加點擊目標的大小

解決「點擊目標大小不合適」問題的第一種方法是增加點擊目標本身的大小。 因此，讓我們考慮一些用作點擊目標的設計元素。

正如我們所提到的，連結、按鈕、圖示和表單元素都可以用作點擊或「觸摸」目標。 因此，您需要確保這些設計功能的尺寸不會低於 48 像素 x 48 像素。 在本節中，我們將向您展示如何調整頁面上的按鈕和連結的大小。

增加 WordPress 中按鈕的大小

要調整網站上按鈕的大小，您需要開啟 WordPress 客製化器。 您可以透過前往儀表板中的「外觀」 > “定制器”來完成此操作。 接下來，選擇按鈕：

現在，您可以透過幾種方法來增加按鈕的大小。 首先，您可以使用下拉方塊增加權重。 這不會大幅改變點擊目標的大小，但會增加一些額外的體積和清晰度：

要進一步優化點擊目標，您可以增加其Line Height 。 這將增加目標的垂直尺寸。 另外，如果編輯Letter Spacing的值，您可以水平擴展按鈕的大小：

然後，請記住單擊“發布”以保存更改。

增加 WordPress 中連結的大小

連結可以將使用者引導至您網站上的其他頁面。 因此，他們可能會鼓勵訪客在您的網站上停留更長時間。

但是，為了讓訪客「觸摸」或點擊您的連結目標，您需要使它們可點擊。 最簡單的方法是增加連結的大小。

您可以直接在相關貼文或頁面中執行此操作。 例如，您可能具有查詢循環區塊，以便使用者可以查看您發布的部落格文章的清單：

在這種情況下，您的每個貼文標題都可能包含一個連結。 同時，您可能會提供一個額外的“閱讀更多”鏈接，以引導訪問者直接訪問該帖子。

在貼文標題中使用連結的最大好處之一是增加點擊目標的大小非常簡單。 您所需要做的就是點擊連結標題。 然後，導覽至工具列中的「更改標題層級」 ：

在這裡，您可以透過選擇 H1 或 H2 格式來增加連結大小。

此外，您的段落文字中可能還包含連結。 您可以透過點擊元素來增加這些點擊目標的大小。 然後，在「區塊」設定中，前往「版式」 ：

在這裡，使用SIZE (PX)下拉選單將“正常”更改為更大的設定：

然後，確保儲存您的變更。

2. 增加點擊目標之間的間距

解決 Lighthouse 中「點擊目標大小不合適」問題的第二種方法是增加點擊目標之間的間距。 Chrome 表示 8 px 通常就足夠了。 但是，對於較小的點擊目標，您可能需要進一步增加距離才能通過 Lighthouse 審核。 有幾種方法可以做到這一點。

調整padding屬性

增加點擊目標之間的間距的一種方法是調整元素的填充屬性。 這將透過添加元素的邊距來增加目標之間的距離。

您可以透過開啟 WordPress 自訂器使用按鈕來執行此操作。 然後，前往按鈕。 您將在“常規”設定的頂部找到“填充”屬性：

要解決「點擊目標大小不合適」的問題，只需增加按鈕周圍的填充。 確保您處於PX而不是EM或REM 。

首先嘗試將每邊的內邊距增加 10 像素，這可能是個好主意。 然後，如果需要，您可以進一步增加目標之間的大小。

您可能會發現添加更多填充會將其中一個按鈕拖放到新行上。 在這種情況下，您還可以增加頂部和底部的填充值，以在目標之間留出更多空間：

確保單擊“發布”以保存您的更改。

使用 WordPress 間隔區塊

在頁面元素之間添加空間的另一種方法是使用 WordPress Spacer 塊。 所有這些都會在頁面中添加一些空白區域，使點擊目標彼此之間保持更大的距離。

例如，您可能有兩個堆疊在一起的按鈕：

儘管這些觸控目標之間看起來似乎有足夠的空間，但當您在前端預覽佈局時，您可以看到按鈕幾乎重疊：

在這種情況下，您可以在按鈕之間新增一個間隔區塊來修復「點擊目標大小不合適」的問題。 只需單擊塊之間的+圖示即可。 然後，搜尋「spacer」：

將區塊新增至您的頁面，這會立即在您的元素之間建立空間。 現在，點擊「發布」儲存變更並查看前端的按鈕：

正如您所看到的，您的點擊目標之間現在有更大的空間。

結論

回顧一下，這裡有兩種方法可以解決這個問題：

1. 增加點擊目標的大小。
2. 增加點擊目標之間的間距。

您對如何解決「點擊目標大小不合適」問題有任何疑問嗎？ 請在下面的評論中告訴我們！