Select Page

WordPress Social Icons – 如何建置社群連結小圖示

WordPress Social Icons – 如何建置社群連結小圖示

WordPress 官網裡關於社群媒體的外掛程式非常多,不過如果只是想要有一些社群連結的小圖示,那麼一定需要安裝外掛程式嗎?這是 max 最近朋友問到的問題,測試了幾個方法後,採用透過簡單的式樣(CSS)設計,使用後台管理介面的外觀/小工具,來創造浮動的社群連結圖示,而且可以完全的依據自己的需要建置來建置任何想要的社群圖示。因為只是採用式樣設計,完全不會影響網站運作效能,因為是透過小工具的方式建置,所以與佈景主題的相容性也很OK。以下的文章就是這一次建置社群連結小圖示的過程,有興趣的朋友可以參考看看。

 

WordPress Social Icons 建置步驟

  • 首先需要準備好社群媒體的小圖示檔案,例如臉書,Google Plus,Twitter或是LINE,任何想要在 WordPress網站上建置的社群圖示,並且上傳到 WordPress 網站的媒體。
  • 這次的式樣設計我們將利用小工具的文字區塊來建置,因此使用的佈景主題需要支援側邊欄(sidebar widget)。
  • 這篇文章我們使用 Suits 佈景主題來做範例,所以請到外觀/小工具/文字,將文字小工具拉到 Main Sidebar(圖一)。
  • 接著編輯文字小工具,標題請留空白不要填寫,內容請填入下方範例式樣檔案,然後儲存。

  • 以上完成後就可以在網站看到右側出現浮動的社群連結小圖示(圖三)。

 

(圖一)佈景主題外觀/小工具/文字小工具

(圖一)佈景主題外觀/小工具/文字小工具

 

 

(圖二)文字小工具填入式樣CSS設計

(圖二)文字小工具填入式樣CSS設計

 

 

(圖三)浮動社群圖示完成圖

(圖三)浮動社群圖示完成圖

 

 

WordPress Social Icons 範例影片:

 

結論

每一個網站的需求都不一樣,max 常常跟朋友分享,多測試幾款不同的解決方案,總會找到最合適自己需求的辦法,符合達到需求又可以兼顧往後的維護,將最大的心力放在網站內容的經營上,版面或是功能需求等等的程式需要,可以簡單建置就朝簡單的解決方法努力,這才是網站管理者或是設計者維持網站的長久之計。

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

Leave a reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *