![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i1.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_939c1c.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 1")
看了很多人在討論側邊欄的小工具要如何製作~
想要自己做一個美美的小工具，但又不會寫程式碼
這邊教大家使用一招，使用內建的區塊編輯器就可以製作一個屬於自己的小工具
建立一個範本
這邊我使用的是“新增區塊版面配置”
(如果你的網站沒有這個工具，也可以使用新增文章，只有阿腸網頁設計維護的，後臺才看的到這個選單，其他家的應該是沒有辦法快速找到這個工具啦XD)
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_050531.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 2")
接著這邊可以建立成範本或是重複區塊，這裡可以自己取個名字
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i1.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_a2f367.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 3")
建立小工具的內容
這邊我選擇使用多重欄位，並且選擇 33:66的欄位 (不要問我剩下的1跑去哪裡了XD)
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.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://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_cff3f3.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 6")
複製程式碼
製作好自己的區塊後，從右上角的點點裡，找一個叫做 “程式碼編輯器“
點擊後就可以看到程式碼
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i2.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_2f30b5.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 7")
接著將程式碼全選(ctrl + A ) 、複製(ctrl + C )
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i1.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155059_0_1cc05f.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 8")
插入小工具
接著到網站後台的 外觀 > 小工具
找到一個叫做 “區塊” 的工具，並拖曳至 Sidebar
並且將剛剛複製的程式碼貼上
最後按下Save儲存
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_e2b53f.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 9")
完成囉!
就可以在前台看見剛剛製作好的區塊
![[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具!](https://i0.wp.com/kaikai.tw/wp-content/uploads/2024/04/20240403155100_0_939c1c.jpg "[WordPress 教學] 如何製作自我介紹的欄位?不用會程式碼也可以自己做出喜歡的側邊欄小工具! 10")
相關文章
![[壓縮圖片教學] 什麼！壓縮圖片只要一秒鐘！快速壓縮照片教學，免安裝軟體即可一秒壓縮照片](https://i1.wp.com/kaikai.tw/wp-content/uploads/2024/01/20240112234451_0.jpeg "[壓縮圖片教學] 什麼！壓縮圖片只要一秒鐘！快速壓縮照片教學，免安裝軟體即可一秒壓縮照片")
![[DIY 手機電池更換] 紅米note3 電池更換](https://i2.wp.com/kaikai.tw/wp-content/uploads/2021/05/P_20200820_082725.jpg "[DIY 手機電池更換] 紅米note3 電池更換")
![[攝影] 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)夜景拍攝")
![[3C] 小米平板5 Pro 67W快速充電器](https://i2.wp.com/kaikai.tw/wp-content/uploads/2021/09/PXL_20210901_145115893.jpeg "[3C] 小米平板5 Pro 67W快速充電器")
![[3C] Google Pixel 5 使用心得](https://i1.wp.com/kaikai.tw/wp-content/uploads/2021/08/P_20201105_203644.jpg "[3C] Google Pixel 5 使用心得")
![[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 行動電源開箱]倍思 10000mah 22.5W PD 行動電源開箱](https://i2.wp.com/kaikai.tw/wp-content/uploads/2022/11/20221120195709_51.jpg "[3C 行動電源開箱]倍思 10000mah 22.5W PD 行動電源開箱")
![[3C] 小米靈感觸控筆 真的會延遲嗎?](https://i0.wp.com/kaikai.tw/wp-content/uploads/2021/10/11-scaled.jpg "[3C] 小米靈感觸控筆 真的會延遲嗎? 20")
![[3C 行動電源開箱]倍思 10000mah 22.5W PD 行動電源開箱](https://i0.wp.com/kaikai.tw/wp-content/uploads/2022/11/20221120195709_51.jpg "[3C 行動電源開箱]倍思 10000mah 22.5W PD 行動電源開箱 21")
無留言