如何有效地在WordPress文章或者頁面新增可點選連結

線上連結為簡單的線上互動奠定了基礎，無論是將使用者傳送到網頁、可下載的檔案，還是其他應用程式。

最棒的是，你可以在許多應用程式中製作可點選的連結，包括作為內容管理系統、網站建設器、文書處理程式和電子郵件客戶端。

本指南說明了你需要知道的關於如何使連結可被點選的一切，同時還解釋了連結背後的基礎知識以及你在建立連結時可能遇到的術語。

1. 超連結基礎知識
2. 如何使連結可以點選
3. 如何使連結在新標籤中開啟
4. 如何在超連結中新增Nofollow？
5. 如何連結到現有的內容
6. 如何製作可點選的電話、簡訊和電子郵件連結

超連結基礎知識

對於一段內容–如文字或影象–提供點選性，或將你的游標放在內容上並導航到其他地方的互動選項，有各種術語。

其中一些術語包括：

• 連結
• 超連結
• 可點選的連結

從技術上講，所有這些都有自己的定義，但現在它們可以互換使用。

使用者與網上內容互動的能力依賴於這些超連結，使用者可以滾動到一點文字、影象或按鈕上並點選它，從而將他們送到另一塊內容（如外部網頁）或執行一個動作（如用智慧手機撥打一個電話號碼）。

一個簡單的HTML編碼版本的超連結看起來像這樣：

<a href="https://example.com/">the hyperlink text</a>

但是，當考慮到目標和nofollow元素等可選專案時，它就變得更加複雜：

<a href="https://example.com/" target="_blank">the hyperlink text</a>

注：要製作一個可點選的連結，你必須用你自己的資訊取代上述例子中的 “https://example.com/”和 “超連結文字”。

以下是構成超連結的要素：

1. 內容
2. URL或固定連結
3. 目標
4. Nofollow, noreferrer, 和 noopener

超連結的要素

繼續閱讀以瞭解這些元素中的每一個，以及它們如何工作。

內容

你可以用兩種型別的內容建立可點選連結：

1. 文字
2. 圖形

這意味著，只要你使用的應用程式支援超連結，你就可以在你的內容中找到任何一行書面文字或影象，並將其變成一個可點選的連結。

超連結的文字

文字是製作可點選連結時的內容選項之一。

如果你使用的是像WordPress這樣的編輯器，你可以在編輯器螢幕上突出任何你想要的文字，然後選擇連結按鈕。

在WordPress中新增一個連結

這在前臺渲染了一個連結，通常是彩色的、帶下劃線的文字。

前臺的可點選連結

當使用者用滑鼠懸停在一個文字超連結上時，它有時會發生變化，通常會改變顏色或隱藏下劃線，以說明它是一個可點選的連結。

此外，當滑鼠移動到文字連結上時，瀏覽器通常會顯示連結的URL的預覽，讓你看到它通往何處。

目標URL的預覽

超連結的圖片

許多程式–包括WordPress–讓你使用線上媒體（如圖片）生成超連結。

這個方法是在後臺選擇一個圖片（而不是文字），然後通過連結函式新增所需的URL。

連結一個影象

一旦釋出，當懸停在圖片上時，標準的游標箭頭會變成手形游標，訪問者會看到瀏覽器呈現出連結的URL的預覽。

目標URL的預覽

無論是影象連結還是文字連結，點選它將啟用一個動作，比如將使用者傳送到一個不同的URL。

一個外部目標頁面

編碼是怎樣的

超連結中的文字或影象內容在下面的例子中用 “連結文字” 表示：

<a href="https://example.com/" target="_blank">連結文字</a>

然而，學習如何製作可點選的連結意味著你將用自己的內容替換文字。

對於文字連結，可單擊的文字位於</a>右括號之前。

連結文字

圖片連結有點不同，因為它們必須包括圖片的URL（如果上傳到您的網站媒體資料庫，則最好）。

該媒體URL位於 img src="" 部分的引號之間。

圖片來源URL

還有其他一些元素需要新增到圖片連結中，比如：

• 一個alt標籤（alt=””）： 描述影象的文字，供搜尋引擎爬蟲和視力受損的使用者使用。
• 一個類別（class=””）： 一個編碼名稱，用於在你的程式碼或網站檔案的其他地方使用該影象。

URL

作為超連結的一部分，URL作為目標或行動，在人們點選連結時發生。

一個可點選連結中的URL

但不是所有的URL都具有網頁URL的功能。你可能會發現，一些超連結具有 “點選呼叫” 功能，允許使用者從他們的智慧手機上直接點選呼叫一個電話號碼。

點選呼叫功能的一個例子

另一個選擇是揭示一個地圖，開啟使用者手機上的地圖應用程式。

通往地圖應用程式的連結

編碼看起來如何

可點選連結中的URL被放在超連結的 <a href="" 部分的引號之間。

例如，以下超連結程式碼的https://www.example.com部分就是URL：

<a href="https://www.example.com" target="_blank">View the entire menu.</a>

超連結HTML程式碼中呈現的URL

有些URL指向可下載的檔案，而有些則需要特殊的編碼。例如，一個 “點選呼叫” 的連結需要你在 href="" 的引號內放置 tel: 和一個電話號碼。

電話的例子：點選呼叫連結

目標視窗

目標視窗是一個超連結的可選部分。它指定內容是在同一個瀏覽器標籤頁還是在一個新的瀏覽器標籤頁開啟。

在WordPress和許多其他應用程式中，你可以通過使用視覺編輯器來新增目標視窗，而不需要觸及任何程式碼。

如果你想讓連結在使用者當前檢視的同一標籤中開啟，只需關閉 “在新標籤中開啟” 的切換鍵。

關閉在新標籤中開啟的開關

另外，你可以啟用 “在新標籤頁中開啟” 開關，它自動為超連結編碼新增 _blank 屬性，並在點選時在新標籤頁中開啟URL。

在新標籤頁中開啟的開關開啟了

編碼是怎樣的

這些選項是通過新增和編輯超連結中的 target="" 元素來觸發的。

儘管目標屬性有幾個值，如 _blank 、 _parent 、 _self 和 _top ，但我們一般只使用 _blank 值。

一個沒有 _blank 目標的超連結看起來像這樣：

連結中沒有_blank目標

你會注意到，這與普通的超連結沒有什麼不同。這是因為超連結，預設情況下，不會在新標籤頁中開啟。因此，你不必對該連結做任何事情，除非你希望它在一個單獨的瀏覽器標籤頁中開啟。

一個帶有 _blank 目標的超連結，會觸發URL在一個單獨的標籤頁中開啟，看起來像這樣：

<a href="https://www.example.com" target="_blank">View the entire menu.</a>

帶有 _blank目標的可點選連結

nofollow, noreferrer, and noopener

你還可以為可點選連結新增額外的元素，其中大部分元素都可以增加安全性或禁止搜尋引擎爬取：

• nofollow：一個阻止 “SEO連結權重” 分散到被連結網站的屬性。這有助於保護你的網站，並能從搜尋引擎中隱藏連結。
• noopener：這是一個HTML屬性，會自動新增到標記為 “在新標籤中開啟” 的WordPress連結上。它與noreferrer配對，以儘量減少在新標籤頁中開啟連結的某些安全問題。
• noreferrer：通常與noopener配對，noreferrer屬性阻止所有推薦資訊傳遞給目標網站，增加額外的安全性，並可能阻止來自跟蹤網站和聯盟收益網站的資料。

你不能通過檢視實時網站上的連結來識別任何這些連結屬性。相反，你必須進入HTML程式碼。

編碼是怎樣的

所有這些連結屬性都在可點選連結的 rel="" 部分的引號之間。

有可能在一個連結中包含所有這些屬性。

包含noreferrer、noopener和nofollow的連結

另外，你可能會看到一些超連結只包括noreferrer noopener屬性，或者只包括nofollow而不包括其他兩個。這完全取決於連結建立者想要實現什麼。

你可能想讓連結可點選的原因

在學習如何使連結可點選時，重要的是要了解超連結背後的所有原因。這樣，你就會意識到這些功能，並能在將來利用它們。

以下是你可能想讓一個連結可點選的主要原因：

1. 一般內部/外部的超連結到URL：你可以做一些文字連結，引出你的網站（比如用於引用資料來源或用第三方研究報告加強論證），或引向你網站上的其他頁面（對於把讀者送到相關內容並讓他們在你的網站上停留較長時間特別有用）。
2. 連結圖片：你可以在WordPress和許多其他網站建設者的任何圖片上新增超連結到URL、媒體檔案或附件頁面。
3. 連結按鈕：CSS按鈕提供了新增超連結的選項，與純文字相比，為你的可點選連結增加了更有吸引力的視覺體驗。
4. 電話號碼：通常被稱為 “點選呼叫” 功能，指向電話號碼的超連結會開啟具有呼叫功能的應用程式，如您裝置上的實際電話應用程式，或Skype。
5. 地址：超連結到谷歌或蘋果地圖上的特定座標，意味著點選該連結的使用者會將該資訊自動放到他們的GPS/地圖應用程式中，以便進行導航。
6. 電子郵件地址：這與 “點選呼叫” 連結類似，但有電子郵件地址。它觸發了手機或電腦上的電子郵件應用程式，以及一個新的電子郵件組成，並在收件人欄中新增了一個特定的電子郵件地址。
7. 要建立錨點連結：你可以通過使用錨連結連結到同一頁面上的內容；這些連結對於在長篇部落格文章的開頭建立一個目錄非常流行。它們有時被稱為 “書籤超連結”。
8. 提供一個可下載的檔案：WordPress和其他網站建設者提供的工具可以上傳SVG檔案、PDF、HTML檔案等等；你甚至可以批量上傳專案。之後，可以在文章/頁面中建立超連結，讓使用者直接下載檔案到他們的裝置上。

現在，我們已經涵蓋了超連結的型別和你可能想要生成超連結的原因，繼續閱讀以瞭解如何實現它。

如何使連結可以點選

你選擇建立連結的方法取決於你的經驗。你可以選擇更容易的視覺方法或考慮使用HTML程式碼。

如何使一個連結可被點選，有四種主要方法：

1. 使用WordPress經典編輯器
2. 使用WordPress區塊編輯器（Gutenberg）。
3. 使用HTML
4. 使用任何圖形使用者介面（GUI）。

請記住，所有這些方法對WordPress的文章和頁面都有類似的作用。這些指南（特別是方法4）對其他應用程式/網站建設者也有幫助，但一些術語/功能可能會有所不同。

方法1：使用WordPress經典編輯器

如果你正在使用WordPress經典編輯器，在一個帖子或頁面上做一個可點選的連結的最簡單的方法是通過視覺化編輯器標籤。

要做到這一點，去你的WordPress儀表板的 “文章” 或 “頁面” 部分，選擇一個你想編輯的單獨的頁面或帖子，使用 “視覺化” 標籤。

第1步：高亮顯示你想要的可點選文字

對於一個文字連結，最好是已經在視覺編輯器中輸入了文字。此後，使用你的游標來突出顯示這串文字。

突出顯示一些文字

如果你要把一張圖片變成一個可點選的連結：

選擇圖片，這樣你就可以看到一個編輯工具條和圖片周圍的輪廓。

選擇影象

第2步：點選插入/編輯連結按鈕

在文字仍然突出顯示的情況下，滾動到視覺編輯器工具欄中的插入/編輯連結按鈕。該按鈕的圖示看起來像一個鏈環。

點選插入/編輯連結按鈕

如果你要把一個圖片變成一個可點選的連結：

在仍然選擇圖片的情況下，點選插入/編輯連結按鈕（看起來像一個鏈環的那個）。

選擇 “編輯” 按鈕

第3步：貼上一個URL

這將顯示出一個空的URL欄位。複製（Command + C，或Ctrl + C）所需的連結URL到你裝置的剪貼簿上。這個連結可以是你在網際網路上其他地方找到的外部URL，或者是你自己網站上的URL。

複製後，將其貼上（Command + V，或Ctrl + V）到該欄位。

貼上一個URL

如果你要把一個圖片變成一個可點選的連結：

將所需的URL貼上到顯示區域，然後點選 “應用” 按鈕來啟用該連結。

插入連結並點選 “應用” 按鈕

第4步：應用連結

點選 “應用” 按鈕，啟用連結並使文字可以點選。

點選 “應用” 按鈕

現在你應該看到你的文字中的超連結部分有下劃線，而且可能是不同的顏色。

產生的連結

如果你在你的編輯器中點選超連結，就會顯示出一個可以測試的實時連結，同時還有編輯工具，以防你想改變超連結。

附加選項

我們將在下面的章節中介紹更高階的可點選連結，但值得注意的是，你在經典WordPress編輯器中建立的每個連結都有一個連結選項按鈕，可以進行額外的設定。

單擊 “連結選項” 按鈕

在這裡，你可以

• 調整URL
• 改變連結文字
• 在新標籤中開啟連結
• 搜尋並連結到你網站上的現有內容

更多選項

如果你要把一個圖片變成一個可點選的連結：

經典的WordPress編輯器提供了一個使圖片可以點選的輔助方法。那就是選擇圖片，然後在彈出的工具欄中選擇編輯按鈕（看起來像一支鉛筆）。

滾動到 “連結到” 欄位，它允許你連結到一個自定義URL。只需將所需的URL貼上到下面的欄位中，然後點選更新。

找到並編輯 “連結到” 欄位

你也可以選擇連結到下拉選單，做一個超連結到：

• 媒體檔案
• 附件頁面
• 自定義URL
• 無

選擇不同的連結選項

方法2：使用WordPress區塊編輯器（Gutenberg）

在WordPress區塊編輯器中，超連結在文章和頁面中的作用是一樣的。

要開始，去你的WordPress儀表板的文章或頁面部分。選擇一個你想編輯的帖子或頁面，然後深入到下面的步驟。

第1步：突出一些文字

在編輯器中輸入一些文字。用你的游標，突出顯示你想使之成為可點選文字的部分。在彈出的工具欄中，點選連結按鈕。

突出顯示文字並點選連結按鈕

如果你要把一個圖片變成一個可點選的連結：

在WordPress的塊狀編輯器中使一個圖片可被點選，首先要在編輯器中實際新增一個圖片。

要做到這一點，點選新增區塊按鈕，然後選擇影象區塊。上傳你想連結的任何圖片。

新增一個影象區塊

點選圖片，使其高亮/被選中，然後在工具欄彈出的視窗中選擇插入連結按鈕。

選擇圖片並插入連結

第2步：貼上URL並提交連結

你會看到一個彈出視窗，有一個空白區域。貼上你想連結的任何URL，然後點選鍵盤上的回車鍵，或提交按鈕來啟用可點選連結。

插入一個URL並點選提交

結果，超連結的文字顯示為不同的顏色，你可以點選連結來檢視內容的預覽，並新增更高階的連結設定。

檢視預覽和更高階的連結設定

如果你要把一張圖片變成一個可點選的連結：

如果你願意，可以選擇超連結媒體檔案和附件頁面。

考慮媒體檔案和附件頁的連結

否則，將一個URL貼上到空的連結欄位中。點選 “應用” 按鈕來啟用連結。釋出後，任何點選圖片的人都會被帶到你指定的連結處。

插入一個URL後，點選應用按鈕

對於更多的選項，點選向下按鈕（v）：

• 在新標籤中開啟連結
• 新增連結 Rel
• 新增連結的CSS類

點選向下按鈕檢視更多設定

附加選項

我們將在下面的章節中更深入地介紹高階超連結結構，但你應該知道，如果你在新建立的連結上點選游標，就會有一個編輯按鈕。

點選 “編輯” 按鈕

該編輯頁面顯示的欄位可以：

• 改變連結文字
• 修改URL
• 在一個新的標籤中開啟連結

編輯頁面

你可以在Block編輯器中做的其他可點選連結

WordPress的塊狀編輯器在通常的連結選項的基礎上進行了擴充套件。事實上，有幾十個內建的塊允許某種可點選的連結結構，包括：

• Buttons（按鈕）：與簡單的文字連結相比，這是一種連線內容的時尚方式。
• Files（檔案）：快速上傳檔案幷包括一個按鈕供使用者點選和下載。
• Social Icons（社交圖示）：插入帶有可點選連結的社交圖示。
• Navigation（導航）：通過使用可點選的連結，將導航按鈕放在你網站的任何地方。
• Read More（閱讀更多）：可以用來縮短你的內容，並提供一個連結到更廣泛的版本。
• Login/out（登入/退出）：為使用者新增一個快速連結來登入你的網站。
• Next Post（下一篇文章）：新增一個可點選的連結/按鈕到您網站上的下一篇部落格文章。
• Previous Post（上一篇文章）：新增一個可點選的連結/按鈕，指向你網站上的前一篇部落格文章。

按鈕是WordPress區塊編輯器中的另一種可點選連結的樣式。

方法3：使用HTML

無論你的編輯器的介面如何，用HTML使一個連結可被點選的方法是一樣的。

你可以用以下方法編輯HTML：

WordPress經典編輯器中的文字面板

WordPress經典編輯器的文字面板

WordPress程式區塊編輯器中的程式碼編輯器

WordPress區塊編輯器中的程式碼編輯器

你裝置上的HTML/文字編輯器

像Atom、Sublime Text和Coda這樣的文字編輯器提供了編寫和編輯HTML所需的介面，特別是對於可點選的連結。也可以使用markdown編輯器。

Atom文字編輯器

使用文字編輯器工作後，你可以：

• 通過FTP或SFTP上傳你的檔案，以便在網際網路上釋出。我們建議使用FileZilla以獲得最完美的過程。
• 批量上傳HTML檔案到WordPress的檔案目錄。
• 使用其他許多FTP客戶端中的一個，將HTML檔案上傳到WordPress。

在你找到一個文字編輯器後–而且你知道你將如何把HTML上傳到WordPress–轉到下面的步驟，使一個連結可以用HTML點選。

這種格式用於HTML中的基本超連結：

<a href="https://www.example.com">Link Text</a>

基本的HTML連結格式

注意事項：

1. 將 “https://www.example.com” 替換為你想要的URL。
2. 將 “Link Text” 替換為所需的連結文字。

一旦你準備好了連結，你就可以釋出帖子/頁面，或者把HTML上傳到你的網站。也可以通過切換到WordPress的視覺標籤來獲得連結的視覺化預覽。

該HTML連結的釋出版本顯示了連結的下劃線，有時還顯示了不同的顏色。把滑鼠移到該連結上，可以看到它在瀏覽器底部的目標。

前臺的連結與瀏覽器預覽

方法4：使用任何圖形使用者介面（GUI）

雖然我們不能涵蓋現有的每一個可以想象的圖形使用者介面，但學習如何在WordPress或HTML之外的東西中使一個連結可被點選，通常看起來與我們剛剛涵蓋的類似。

總的來說，每個GUI都可能使用稍微不同的按鈕名稱或圖示來建立一個超連結。

你的一般過程應該是這樣的：

1. 突出你想連結的任何文字。
2. 點選編輯器中的連結圖示（可能有不同的名稱）。
3. 貼上所需的URL。
4. 點選新增連結按鈕（也可能有不同的名稱）。

作為一個基本的例子，像Shopify這樣的網店建設者可以讓你在任何頁面或文章中點選一個連結，方法是突出顯示文字並點選插入連結按鈕。

在另一個GUI中插入一個連結

然後你將貼上目標URL並點選插入連結按鈕。

貼上URL並點選插入連結

這將產生一個可點選的連結。

在另一個GUI中的可點選連結

如何使連結在新標籤中開啟

正如我們前面所討論的，WordPress和其他GUI為可點選的連結提供了額外的定製選項，例如強迫連結在不同的標籤頁中開啟。

你如何去做呢？讓我們來看一看。

使用WordPress經典編輯器在新標籤中開啟連結

一旦你在WordPress經典編輯器中有了一個可點選的連結，選擇連結選項按鈕。

連結選項

在新標籤頁中開啟連結。

使用WordPress區塊編輯器在新標籤中開啟連結

假設你已經在WordPress區塊編輯器中新增了一個連結，點選該連結會開啟目標內容的彈出式預覽。

編輯按鈕提供了對更多設定的訪問（包括在新標籤中開啟選項），但在彈出視窗的底部直接翻開在新標籤中開啟的開關更容易。

在新標籤頁中開啟開關

資訊：當你啟用 “在新標籤中開啟” 開關時，WordPress區塊編輯器會自動新增 rel="noreferrer noopener" 屬性，為你的連結新增額外的安全性。

使用HTML在新標籤中開啟連結

在WordPress文字編輯器、WordPress程式碼編輯器或一般的HTML編輯器中，你可以使用下面的程式碼使你的可點選連結在新標籤中開啟：

<a href="https://www.example.com" target="_blank">Link Text</a>

1. 將 “https://www.example.com” 替換為你想要的目標URL。
2. 將 “Link Text” 替換為你想要連結的任何文字。
3. target="_blank" 屬性是在新標籤中實際開啟連結的程式碼段。這是唯一真正需要這個簡單功能的部分。
4. 我們強烈建議新增 rel="noreferrer noopener" 屬性和值，以阻止在新標籤頁中開啟連結的常見安全問題。然而，完全可以不在程式碼中加入這些屬性，仍然讓連結在新標籤頁中開啟。

釋出後，該連結看起來完全一樣；但是，當點選時，目標URL會在一個新的標籤頁中開啟。

在新標籤中開啟其目標的連結

如何在超連結中新增Nofollow？

nofollow HTML值告訴搜尋引擎忽略可點選的連結，並阻止搜尋引擎權重（連結果汁）傳遞到目標網站。 nofollow 的主要目的是減少垃圾郵件連結，但內容創作者將其用於付費連結、評論、使用者生成的內容、嵌入，或者任何你不想被視為認可你連結到的網站的時候。

WordPress沒有一個內建的方法來新增 nofollow 連結，但通過對HTML的挖掘是有可能的。

以下程式碼反映了一個具有 nofollow 值的基本連結：

<a href="https://www.example.com">The Link Text.</a>

帶nofollow的HTML連結程式碼

您看到的內容：

1. 替換 “https://www.example.com” 包含所需目標URL的文字。
2. 將“連結文字”部分替換為所需的任何連結文字。
3. 在連結HTML中使用 rel="nofollow" 屬性和值。

當釋出時，或者在Visual檢視中，nofollow連結看起來與標準超連結沒有什麼不同；然而nofollow功能被儲存在後端程式碼中。

一個nofollow連結在前端顯示沒有什麼不同

如何連結到現有的內容

連結到現有的內容是WordPress獨有的功能，你可以在WordPress編輯器中直接搜尋以前建立的部落格文章和頁面。這樣就不需要在另一個瀏覽器視窗中調出它們的URL，把它們複製和貼上成一個可點選的連結。

在WordPress經典編輯器中連結到現有的內容

通過突出顯示所需的文字並點選編輯器中的插入/編輯連結（連鎖連結）按鈕來建立一個連結。這將顯示一個彈出的欄位，在那裡你可以點選連結選項（齒輪圖示）按鈕。

轉到連結選項按鈕

1. 轉到名為 “或連結到現有內容” 的部分。
2. 在搜尋欄中輸入一個關鍵詞，然後從結果中挑選一個現有的頁面或帖子。
3. 看著現有內容的連結自動被放置到URL欄位中。

確保你在完成後點選新增連結按鈕。

查詢現有內容的過程

這在編輯器中產生了一個指向其他內容的即時連結（也被稱為內部連結）。

一個內部連結的結果檢視

在WordPress區塊編輯器中連結到現有的內容

突出顯示你想要連結的任何文字/影象，然後點選彈出的工具欄中的連結按鈕。

點選 “連結” 按鈕

提供的欄位有兩個功能：你可以貼上一個URL，或者把它作為一個搜尋欄。因此，輸入與你現有的一些內容有關的任何關鍵詞，以顯示相關結果。

一旦你看到你想要的頁面或帖子，點選它。

搜尋以前的內容

這將自動在WordPress區塊編輯器中建立一個指向現有內容的連結。

如何製作可點選的電話、簡訊和電子郵件連結

有幾種方法可以為可點選連結新增特殊動作，即換掉標準的URL結構，連結到不同的東西，比如：

• 一個能開啟電話應用的電話號碼。
• 一個能開啟簡訊應用的電話號碼。
• 一個自動開啟使用者電子郵件應用的電子郵件地址。

如何製作一個可點選的電話連結

一個 “點選呼叫” 或電話連結會自動將一個特定的電話號碼新增到使用者的電話應用中，甚至是一個支援電話號碼的應用，如Skype。

你可以不使用URL，而是在HTML中插入 tel: 程式碼，然後是一個電話號碼，像這樣：

<a href="tel:555-555-5555">Click To Call</a>

注意：

1. 用你希望使用者撥打的號碼替換電話號碼。
2. 用你希望連結文字顯示的任何內容替換 “點選呼叫” 文字。

視覺編輯器中的一個tel:連結

在視覺化編輯器中，如WordPress Block和WordPress Classic，只需在URL欄位中輸入tel:555-555-5555（用所需的電話號碼）作為連結。點選回車，它就會自動為你生成電話連結。

當有人點選該連結時，他們要麼被直接傳送到最相關的應用程式（智慧手機上的電話應用程式），要麼看到一個提示，開啟一個像Skype的應用程式。

電話：在Skype或其他電話應用程式中開啟連結

如何製作一個可點選的簡訊連結

可點選簡訊連結的功能很像電話連結，但它們選擇自動開啟簡訊應用程式而不是呼叫應用程式。

要新增一個簡訊連結，使用 sms:555-555-5555 而不是URL。

<a href="sms:555-555-5555">Click To Text</a>

注意事項：

1. 用不同的電話號碼替換 “555-555-5555″。
2. 將 “Click To Text” 替換為你想要的任何連結的文字。

當你把 sms:555-555-5555 的值放在連結的URL欄位中時，經典和Block WordPress編輯器都支援簡訊連結。

正如承諾的那樣，使用者在點選這些型別的連結時，會看到簡訊應用程式。

一條簡訊：連結在最相關的簡訊應用程式中開啟

如何製作一個可點選的電子郵件連結

當點選時，電子郵件超連結會自動提示使用者的裝置開啟他們最相關的電子郵件應用程式，以及進入一個特定電子郵件地址的撰寫部分。

對於這個，新增 mailto: code ，然後是一個電子郵件地址，在你通常會放一個目標URL的地方。

<a href="mailto:mail@example.com">Click To Email</a>

注意：

1. 將 “mail@example.com” 的電子郵件地址替換為你想要的目標電子郵件地址。
2. 將 “Click To Email” 的文字替換為你希望連結文字顯示的內容。

如果使用WordPress經典或塊狀編輯器，在製作連結時只需在URL欄位中輸入 mailto:mail@example.com 。

在你釋出連結後，點選它的使用者會被重定向到他們的郵件應用程式，在收件人欄中包括你指定的電子郵件地址。

Mailto: 連結開啟包含指定電子郵件地址的電子郵件應用程式

小結

新增可點選的連結（也被稱為超連結，或只是連結）可以提高你網站的互動性，引導人們進入你的更多內容，並參考網際網路上其他地方的重要資訊。因此，學習如何製作一個可點選的連結是網站設計和內容創作的基礎課程之一。

讀完這篇文章後，你應該能夠識別可點選連結的外觀，並確切地知道如何製作一個連結，無論是為文字還是影象新增連結。知道有各種方法可以使一個連結可被點選，比如通過WordPress的經典編輯器、塊狀編輯器、HTML或任何可用的圖形使用者介面，也是很好的。

當然，我們鼓勵你探索更高階的可點選連結選項，如電話號碼、電子郵件地址和那些帶有nofollow標籤的連結。

如果你對如何使連結可點選還有任何疑問，請在下面的評論中分享你的問題和關注。