看了很多人在討論側邊欄的小工具要如何製作~
想要自己做一個美美的小工具，但又不會寫程式碼
這邊教大家使用一招，使用內建的區塊編輯器就可以製作一個屬於自己的小工具
建立一個範本
這邊我使用的是“新增區塊版面配置”
(如果你的網站沒有這個工具，也可以使用新增文章，只有阿腸網頁設計維護的，後臺才看的到這個選單，其他家的應該是沒有辦法快速找到這個工具啦XD)
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_050531.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 2")
接著這邊可以建立成範本或是重複區塊，這裡可以自己取個名字
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_a2f367.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 3")
建立小工具的內容
這邊我選擇使用多重欄位，並且選擇 33:66的欄位 (不要問我剩下的1跑去哪裡了XD)
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i2.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_b89940.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 4")
接著在欄位左邊插入一張圖片，右邊插入一些文字
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_04021b.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 5")
這邊就隨意設定一些想要呈現的內容
最後這邊可以設定在行動裝置是否要堆疊，如果再行動裝置上一樣想保持左右排版
記得將開關關閉
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i2.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_cff3f3.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 6")
複製程式碼
製作好自己的區塊後，從右上角的點點裡，找一個叫做 “程式碼編輯器“
點擊後就可以看到程式碼
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_2f30b5.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 7")
接著將程式碼全選(ctrl + A ) 、複製(ctrl + C )
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i2.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_1cc05f.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 8")
插入小工具
接著到網站後台的 外觀 > 小工具
找到一個叫做 “區塊” 的工具，並拖曳至 Sidebar
並且將剛剛複製的程式碼貼上
最後按下Save儲存
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i1.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_e2b53f.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 9")
完成囉!
就可以在前台看見剛剛製作好的區塊
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i2.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_939c1c.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 10")
相關文章
![[3C] 小米平板5 Pro 也能做文書處理？！](https://i2.wp.com/kaikai.tw/wp-content/uploads/2021/10/Screenshot_2021-10-02-14-23-14-948_com.google.android.youtube.jpg "[3C] 小米平板5 Pro 也能做文書處理？！")
![[Google] Chromecast(支援 Google TV) 官方進貨了!哪裡買最優惠？chromecast with google tv](https://i1.wp.com/kaikai.tw/wp-content/uploads/2022/06/20220601104553_65.jpeg "[Google] Chromecast(支援 Google TV) 官方進貨了!哪裡買最優惠？chromecast with google tv")
![[3C] 小米靈感觸控筆 真的會延遲嗎?](https://i0.wp.com/kaikai.tw/wp-content/uploads/2021/10/11-scaled.jpg "[3C] 小米靈感觸控筆 真的會延遲嗎?")
![[攝影] Google Pixel 5 VS Asus Zenfone4(ze554kl)夜景拍攝](https://i2.wp.com/kaikai.tw/wp-content/uploads/2021/08/PXL_20210311_142542106.NIGHT_-scaled.jpg "[攝影] Google Pixel 5 VS Asus Zenfone4(ze554kl)夜景拍攝")
![[DIY 筆電重上散熱膏] ASUS 筆電重上散熱膏](https://i1.wp.com/kaikai.tw/wp-content/uploads/2021/09/PXL_20210905_035220481.jpeg "[DIY 筆電重上散熱膏] ASUS 筆電重上散熱膏")
![[DIY 筆電維修]Lenovo G500s筆電鍵盤如何更換?筆電鍵盤更換教學!](https://i1.wp.com/kaikai.tw/wp-content/uploads/2023/03/20230318235558_91.jpg "[DIY 筆電維修]Lenovo G500s筆電鍵盤如何更換?筆電鍵盤更換教學!")
![[3C]Sony Ericsson T715 VS Pixel5 拍攝差異](https://i2.wp.com/kaikai.tw/wp-content/uploads/2022/11/20221120220548_44.jpg "[3C]Sony Ericsson T715 VS Pixel5 拍攝差異")
![[DIY 筆電重上散熱膏] ASUS 筆電重上散熱膏](https://i0.wp.com/kaikai.tw/wp-content/uploads/2021/09/PXL_20210905_035220481.jpeg "[DIY 筆電重上散熱膏] ASUS 筆電重上散熱膏 11")
![[攝影] Google Pixel 5 VS Asus Zenfone4(ze554kl)夜景拍攝](https://i1.wp.com/kaikai.tw/wp-content/uploads/2021/08/PXL_20210311_142542106.NIGHT_-scaled.jpg "[攝影] Google Pixel 5 VS Asus Zenfone4(ze554kl)夜景拍攝 13")
無留言