本篇人氣數: ![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/plugins/achang-counter/assets/ic_loading.gif "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 3"){kind=small}
人觀看看了很多人在討論側邊欄的小工具要如何製作~
想要自己做一個美美的小工具，但又不會寫程式碼
這邊教大家使用一招，使用內建的區塊編輯器就可以製作一個屬於自己的小工具
建立一個範本
這邊我使用的是“新增區塊版面配置”
(如果你的網站沒有這個工具，也可以使用新增文章，只有阿腸網頁設計維護的，後臺才看的到這個選單，其他家的應該是沒有辦法快速找到這個工具啦XD)
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_050531.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 4")
接著這邊可以建立成範本或是重複區塊，這裡可以自己取個名字
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_a2f367.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 5")
建立小工具的內容
這邊我選擇使用多重欄位，並且選擇 33:66的欄位 (不要問我剩下的1跑去哪裡了XD)
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_b89940.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 6")
接著在欄位左邊插入一張圖片，右邊插入一些文字
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_04021b.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 7")
這邊就隨意設定一些想要呈現的內容
最後這邊可以設定在行動裝置是否要堆疊，如果再行動裝置上一樣想保持左右排版
記得將開關關閉
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_cff3f3.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 8")
複製程式碼
製作好自己的區塊後，從右上角的點點裡，找一個叫做 “程式碼編輯器“
點擊後就可以看到程式碼
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_2f30b5.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 9")
接著將程式碼全選(ctrl + A ) 、複製(ctrl + C )
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_1cc05f.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 10")
插入小工具
接著到網站後台的 外觀 > 小工具
找到一個叫做 “區塊” 的工具，並拖曳至 Sidebar
並且將剛剛複製的程式碼貼上
最後按下Save儲存
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_e2b53f.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 11")
完成囉!
就可以在前台看見剛剛製作好的區塊
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_939c1c.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 12")
本篇人氣數: 人觀看![[3C] Google Pixel 5 使用心得](https://i1.wp.com/kaikai.tw/wp-content/uploads/2021/08/P_20201105_203644.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[3C] Google Pixel 5 使用心得")
![[3C] 小米平板5 Pro 開箱文](https://i1.wp.com/kaikai.tw/wp-content/uploads/2021/09/PXL_20210830_123043834.jpeg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[3C] 小米平板5 Pro 開箱文")
![[DIY]行動音箱電池蓄電不足怎麼辦?行動音響喇叭電池更換教學](https://i0.wp.com/kaikai.tw/wp-content/uploads/2022/12/20221214204618_44.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[DIY]行動音箱電池蓄電不足怎麼辦?行動音響喇叭電池更換教學")
![[DIY 筆電重上散熱膏] Lenovo G500s重上散熱膏](https://i2.wp.com/kaikai.tw/wp-content/uploads/2021/05/P_20200822_160607.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[DIY 筆電重上散熱膏] Lenovo G500s重上散熱膏")
![[3C]Sony Ericsson T715 VS Pixel5 拍攝差異](https://i2.wp.com/kaikai.tw/wp-content/uploads/2022/11/20221120220548_44.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[3C]Sony Ericsson T715 VS Pixel5 拍攝差異")
![[3C] 小米靈感觸控筆搭配小米平板5 pro](https://i2.wp.com/kaikai.tw/wp-content/uploads/2021/10/7-scaled.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[3C] 小米靈感觸控筆搭配小米平板5 pro")
![[攝影] Google Pixel 5 VS Asus Zenfone4(ze554kl)夜景拍攝](https://i0.wp.com/kaikai.tw/wp-content/uploads/2021/08/PXL_20210311_142542106.NIGHT_-scaled.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[攝影] Google Pixel 5 VS Asus Zenfone4(ze554kl)夜景拍攝")