首頁 » Wordpress » 【WordPress教學】網站側邊欄教學:如何加入圖片及連結並開啟新分頁?

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

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

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

想知道的話,就繼續看下去吧!

如何加入圖片及連結
如何加入圖片及連結

 

影片教學

如果覺得我的影片教學不錯的話,可以按讚、訂閱、分享,我會分享更多實用的教學!

訂閱 Youtube 頻道

 

側邊欄是什麼?

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

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

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

WordPress 網頁結構
WordPress 網頁結構 (圖片來源:wpbeginner)

 

如何加入圖片及連結?

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

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

2. 自訂 HTML 語法來添加

接著會在下面教學。

 

圖片小工具

step 1

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

圖片 小工具
圖片 小工具

step 2

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

拖拉圖片到 Sidebar
拖拉圖片到 Sidebar

step 3

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

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

加入圖片及連結
加入圖片及連結

step 4

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

新分頁開啟連結
新分頁開啟連結

step 5

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

圖片加入成功
圖片加入成功

 

自訂 HTML

step 1

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

自訂 HTML
自訂 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 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

WordPress 無敵架站手冊
WordPress 無敵架站手冊

書籍介紹

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

推薦原因

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

購買 WordPress 無敵架站手冊

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

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

書籍介紹

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

推薦原因

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

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


WordPress 架站推薦

新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!

高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!

👉👉 查看 WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!


👉👉 查看我是如何透過 WordPress 架設部落格,賺取每個月的被動收入!



 

如果對文章內容有任何問題,歡迎在底下留言讓我知道。

如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。

還沒訂閱部落格的朋友們,記得在下方填入信箱,收到我最新文章的通知。

歡迎按讚我的粉絲專頁,會有最新文章、程式語言課程、WordPress主題外掛優惠的訊息。

追蹤我的Instagram,最近有一系列的#不務正業工程師、#工程師之路!

阿璋也陸續開始拍攝影片,訂閱我的 Youtube 頻道,並開啟小鈴鐺🔔

如果這篇文章對你有幫助,可以幫我在下方按 5 個Like,讓我得到一些回饋,支持我繼續寫出更多好文章!

阿璋有創立一個社團,歡迎加入!
WordPress / 部落格經營 / 網路行銷 / 斜槓青年 / 自由工作者 / 接案 / 發案 | Johntool-工具王阿璋


by Johntool-工具王阿璋

訂閱我的文章

如果喜歡我的文章,可以留下信箱,每發佈新文章時,就會準時通知您!

4 thoughts on “【WordPress教學】網站側邊欄教學:如何加入圖片及連結並開啟新分頁?”

  1. 阿璋就是這個謝謝你分享,那想問為什麼點進來你的文章結論完一直往下拉,可以陸續看到你推薦的書圖片網址,然後你的其他文章,然後最下面又有你原本首頁的側邊欄的那些關於我,大師班的圖片呀!真的重點教學教不完,感恩。

發表迴響

Scroll Top