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

max

7 年前

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

WordPress Social Icons 建置步驟

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

<style>
	.so-1-slide {
		position: fixed;
		top: 260px;
		right: 0;
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
	}
	.so-1-slide:hover {
		right: 24px;
	}
	.so-2-slide {
		position: fixed;
		top: 309px;
		right: 0;
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
	}
	.so-2-slide:hover {
		right: 24px;
	}
	.so-3-slide {
		position: fixed;
		top: 358px;
		right: 0;
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
	}
	.so-3-slide:hover {
		right: 24px;
	}
	.so-4-slide {
		position: fixed;
		top: 407px;
		right: 0;
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
	}
	.so-4-slide:hover {
		right: 24px;
	}

</style>
<div class="so-1-slide">
	<a href="#"><img src="http://yourdomain.com/your_social_icon_01.jpg" /></a>
</div>
<div class="so-2-slide">
	<a href="#"><img src="http://yourdomain.com/your_social_icon_02.jpg" /></a>
</div>
<div class="so-3-slide">
	<a href="#"><img src="http://yourdomain.com/your_social_icon_03.jpg" /></a>
</div>
<div class="so-4-slide">
	<a href="#"><img src="http://yourdomain.com/your_social_icon_04.jpg" /></a>
</div>

<style>

.so-1-slide {

position: fixed;

top: 260px;

right: 0;

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transition-duration: 1s;

transition-duration: 1s;

}

.so-1-slide:hover {

right: 24px;

}

.so-2-slide {

position: fixed;

top: 309px;

right: 0;

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transition-duration: 1s;

transition-duration: 1s;

}

.so-2-slide:hover {

right: 24px;

}

.so-3-slide {

position: fixed;

top: 358px;

right: 0;

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transition-duration: 1s;

transition-duration: 1s;

}

.so-3-slide:hover {

right: 24px;

}

.so-4-slide {

position: fixed;

top: 407px;

right: 0;

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transition-duration: 1s;

transition-duration: 1s;

}

.so-4-slide:hover {

right: 24px;

}

</style>

</div>

</div>

</div>

</div>

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

（圖一）佈景主題外觀/小工具/文字小工具

（圖二）文字小工具填入式樣CSS設計

（圖三）浮動社群圖示完成圖

WordPress Social Icons 範例影片：

結論

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