iT邦幫忙

2021 iThome 鐵人賽
DAY 15
0
自我挑戰組

WordPress 區塊編輯器與區塊套件組合外掛【新手村】系列 第 15 篇

15 | WordPress 社交網路服務圖示 Social Icons Block

13th鐵人賽 社交網路服務圖示 social icons 區塊編輯器 wordpress教學
1030 瀏覽

https://ithelp.ithome.com.tw/upload/images/20210929/20116357HF8eqTDZT9.jpg
「社交網路服務圖示區塊」可讓你將社交媒體圖示新增到任何頁面或文章，將訪客導向到你的社交媒體個人檔案。

你也可以在新段落區塊中輸入「/社交網路服務圖示」符號並按下確認

https://ithelp.ithome.com.tw/upload/images/20210929/20116357uZkS2J46yu.jpg

按一下「+」圖示，將社交網路服務圖示區塊新增到頁面

https://ithelp.ithome.com.tw/upload/images/20210929/20116357JwSVgnAIDO.jpg

社交網路服務圖示 Social Icons Block 調整區域

https://ithelp.ithome.com.tw/upload/images/20210929/20116357LiHX8l8009.jpg

調整圖示的對齊模式

https://ithelp.ithome.com.tw/upload/images/20210929/20116357HoyKCK3mIJ.jpg

調整圖示的尺寸

https://ithelp.ithome.com.tw/upload/images/20210929/20116357MsUnMn1xhy.jpg

如何新增社交網路服務圖示

https://ithelp.ithome.com.tw/upload/images/20210929/20116357FIyUemQNML.jpg

點擊 [+] 符號新增更多項目

https://ithelp.ithome.com.tw/upload/images/20210929/20116357txUL1cb1lG.jpg

如果沒有適合的 icon，請使用中性的連結 icon

https://ithelp.ithome.com.tw/upload/images/20210929/20116357JkVeiqIxSs.jpg

輸入社交媒體的網址

https://ithelp.ithome.com.tw/upload/images/20210929/20116357snVxUblAVn.jpg

連結標籤：簡短說明連結作用以協助螢幕閱讀器的使用者

https://ithelp.ithome.com.tw/upload/images/20210929/20116357z4f3PuS9cT.jpg

附加的 CSS 類別

https://ithelp.ithome.com.tw/upload/images/20210929/20116357XeIcYhDbOZ.jpg

廷伸閱讀：

什麼是社交網路服務圖示區塊？
什麼是區塊編輯器？


上一篇
14 | WordPress 按鈕區塊 Buttons Block
下一篇
16 | WordPress 地圖區塊 Map Block
系列文
WordPress 區塊編輯器與區塊套件組合外掛【新手村】 共 30 篇
  1. 26
    26 | 【區塊組合套件介紹】Qubely
  2. 27
    27 | 【區塊組合套件介紹】Stackable
  3. 28
    28 | 【區塊組合套件介紹】Kadence Blocks
  4. 29
    29 | WordPress 區塊編輯器 | 本次教學單元總結：
  5. 30
    30 | WordPress 區塊編輯器 | 延伸相關參考資料列表：
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙