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

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

文章最後更新於

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

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

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

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

 

影片教學

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

訂閱 Youtube 頻道


前往 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 線上課程,如果有興趣的人,歡迎點擊下方連結。

WP 全方位架站攻略

從 0 開始建立部落格

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

查看站長之路

WordPress 架站推薦

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

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

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

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



WordPress 學習書籍推薦

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

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

書籍介紹

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

推薦原因

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

購買 WordPress 無敵架站手冊

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

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

書籍介紹

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

推薦原因

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

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

 

我正在籌備 WordPress 線上課程,有興趣的歡迎先加入等候名單,獲得第一手優惠資訊:WP 全方位架站攻略

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

我靠聯盟行銷賺進人生第一桶金:聯盟行銷是什麼? 我靠聯盟行銷 11 個月賺進百萬

透過 YouTube 建立年收百萬的品牌:【YouTube 賺錢】百萬品牌網路事業訓練課程評價 | Yale Chen 是誰?

輕鬆投資美股的方式:【美股 ETF】爽賺 45 K? Yale Chen 美股課程評價

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

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

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

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

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

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

阿璋有創立一個社團,歡迎加入!
WordPress / 部落格經營 / 網路行銷 | Johntool-工具王阿璋


加入我的 Telegram 頻道,最新的資訊會透過 Telegram 來公告!

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

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

贊助我一杯咖啡

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

by Johntool-工具王阿璋

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

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

發表迴響

Scroll to Top