部落格已經經營了一段時間,但是 Google Analytics 發現網頁跳出率一直都很高。一般來說,如果部落格文章內有跳轉其他網站的外部連結,希望不要直接跳轉,而是在新分頁開啟,可以使用 HTML 語法來達成。

如果只是要讓連結在新分頁開啟可能還單純一點;但在這個狀況下是希望僅針對部落格的內部連結,如:點擊另一篇文章可以直接跳轉,不需要開新分頁(畢竟還是在我的部落格內)但若是跳轉到外部網站,才會觸發開新分頁的指令。這個看似很複雜的功能,其實幾行 javascript 就可以搞定,因此現就在把它加在網站 <head> 裡面吧!

在網站中加入 javascript 語法

<script type='text/javascript'>
  window.onload = function() {
    var links = document.links;
    for (var i = 0, linksLength = links.length; i < linksLength; i++) {
      if (links[i].hostname != window.location.hostname) {
        links[i].target = '_blank';
      }
    }
  }
</script>

這裡的邏輯是,假設我的網站是 abc.com,當點擊同樣是 abc.com 的網址時,在同一個分頁開啟;假設開啟外部連結 xyz.com,那麼則在新分頁開啟,就跟憨人想的一樣簡單。

如此一來,所有外部連結都會自動在新分頁開啟;而部落格內的其他文章連結(相同網域)則會直接跳轉,是不是很方便呢?當然了,如果不想直接寫在 html 內,也可以自行製作 .js 檔案,再嵌入網站即可。

在 WordPress 修改 <head> 內容,筆者推薦 Header and Footer 這套外掛,可以幫助你在 <head><body><footer> 中插入程式碼。

「教學」讓 WordPress 網站內的外部連結自動在新分頁開啟