【WordPress教學】網站側邊欄教學：如何加入圖片及連結並開啟新分頁？

最後更新日期：2019 年 11 月 20 日

本篇文章會教大家如何在網站的側邊欄加入圖片及連結，並且將圖片連結設定成開啟新分頁。

最近有許多新手問阿璋，該如何在網頁側邊欄放置一些圖片廣告？

想知道的話，就繼續看下去吧！

 

影片教學

如果喜歡我的文章或是影片，可以訂閱我的 Youtube 頻道、按讚、分享，我會分享更多實用的教學影片！

訂閱 Youtube 頻道

前往 Youtube 觀看

 

側邊欄是什麼？

側邊欄的英文是 Sidebar，要了解側邊欄是什麼之前，首先必須先了解 WordPress 網頁結構。

WordPress 的頁面是由 Header, Content, Sidebar, Footer 組合而成，換成中文是頁首、內容、側邊欄、頁尾。

大多數網頁的側邊欄都是放在右邊，但其實網頁的左邊、下面，也都可以稱做側邊欄。

 

如何加入圖片及連結？

網頁側邊欄加入圖片的方式有兩種：

1. 直接透過圖片小工具添加

2. 自訂 HTML 語法來添加

接著會在下面教學。

 

圖片小工具

step 1

在後台中前往外觀->小工具，裡面可以看到一個圖片的小工具。

step 2

將這個圖片小工具，拖拉到 Sidebar，看你要放在側邊欄還是頁首頁尾都可以。

step 3

接著輸入這個小工具的標題(也可以空白)，加入圖片以及設定連結目標。

如果是側邊欄，圖片的寬度建議在 400px 以下，不過當然要看主題的設定為主，太大的解析度也只是被縮小。

step 4

點選編輯圖片，可以看到圖片詳細資料，在進階設定的地方，勾選在新分頁中開啟連結。

step 5

設定完之後儲存，就可以在網站中看見圖片了！

 

自訂 HTML

step 1

首先在小工具內找到自訂HTML，將他拖拉至側邊欄。

step 2

輸入標題，內容輸入程式碼。

這裡我提供一個插入圖片的程式碼簡單教學。

<a href="https://www.johntool.com/expressvpn" target="_blank"><img alt="品質最好的VPN：ExpressVPN" src="https://www.johntool.com/wp-content/uploads/ExpressVPN-Traditional-Chinese.jpeg"></a>

• <a></a> : 連結標籤
• href : 連結目標網址
• target=”_blank” : 開啟新分頁
• <img></img> : 圖片標籤
• alt : 圖片文字(顯示不出圖片時會顯示文字)
• src : 圖片來源網址

學習更多 HTML 語法：

1. 從入門到業界實戰 – UI / UX 前端網頁設計
2. 學好跨平台網頁設計：HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班（第二版）

step 3

儲存之後，就可以在網站中看到剛剛添加的圖片！

 

結論

本篇文章是針對 WordPress 的新手站長教學，教大家如何在側邊欄加入圖片及連結，並且開啟新分頁。

加入的方式有兩種：圖片小工具、自訂 HTML。

如果新手站長還有什麼想要學習的東西，可以在下方留言，我會再繼續寫文章介紹！

 

閱讀更多程式碼自訂相關文章：

【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學

【WordPress教學】如何自訂WordPress語法？6個程式碼片段範例教學

 

WordPress 線上課程推薦

阿璋正在籌備 WordPress 線上課程，如果有興趣的人，歡迎點擊下方連結。

WP 全方位架站攻略

從 0 開始建立部落格

站長之路手把手教你如何透過部落格開始賺錢，內容包含 WordPress、部落格經營、網路行銷，帶你成為一個成功的部落格站長！

查看站長之路

WordPress 架站推薦

新手架站：【架站教學】專門為WordPress打造的主機？WPWebHost 完整教學！

高流量網站：【架站教學】新手快速架站教學，使用Cloudways架設WordPress網站！

新手必看： WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整！

學習更多：查看我是如何透過 WordPress 架設部落格，賺取人生第一桶金！

WordPress 學習書籍推薦

WordPress 無敵架站手冊：架站新手都想擁有:教你打造個人專屬網站

書籍介紹

這本書教你從零開始建立起一個全功能的WordPress網站，從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具，從入門到進階的教學都很完整。

推薦原因

這本書原作者是波蘭人，原文是英文，後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少，這本不僅是中文書，內容又非常完整，絕對是學習WordPress的首選書籍！

購買 WordPress 無敵架站手冊

WordPress Plugins百大外掛精選(火力加強版)

書籍介紹

這本書教你從基礎架站、備份保存到各式各樣的外掛主題，讓你想裝什麼就裝什麼，建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹，只要你想的到的功能幾乎都在裡面，匯集了讀者們一直喜愛的外掛程式介紹，並且添加了最新的外掛程式，更貼近現在的讀者需求。

推薦原因

這本書作者是免費資源網路社群的作者 Pseric，他的網站知名度非常的高，也是透過 WordPress 架設而成，因此對於外掛的理解，絕對是數一數二。

購買 WordPress Plugins 百大外掛精選(火力加強版)

 

支持阿璋的新書《打開網路就有錢》，裡面分享許多自媒體以及投資理財的知識，非常適合網路創業者以及想要增加額外收入的上班族閱讀。




如果你對幣圈資訊有興趣，可以訂閱此電子報：幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群：Crypto Mind 加密腦

推坑阿璋超愛的商品，歡迎加入團購群：阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢：站長之路

更多相關社群連結：工具王阿璋社群列表

本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。

如果我的文章對你有幫助，歡迎贊助我一杯咖啡！

本站所有內容皆為阿璋個人經驗分享，如有涉及投資請謹慎評估，阿璋不做任何投資建議。



文章引用請來信索取授權，否則將保留法律追訴權。

by Johntool-工具王阿璋