[コード有] icomoonを使ってWordPressに自作SNSボタンを設置する

この記事に記載しているコードは、主婦ライフさんの記事で紹介されているコードをicomoon用に改変したものになります。icomoonで必要なアイコンフォントをダウンロードして使って下さい。

icomoonの使い方については、以下のサイトで詳しく解説されています。

必要なアイコンフォントをダウンロード後、icomoonからダウンロードしたフォルダ内にあるfontsフォルダとstyle.cssを wp-content > themes > 使用中のテーマフォルダ内へアップロードします。

上書きを避けるため、アップロードする前にstyle.cssのファイル名をicomoon.cssに変更しておきましょう。（既存のファイルと被らなければ、ファイル名は何でもOKですが、以降はicomoon.cssに変更したものとして説明）

次に、アップロードしたファイルを読み込ませるために、以下の記述をheader.phpのhead内へ追加します。テーマ名の部分は、使用中のテーマのフォルダ名に変更して下さい。

<link rel="stylesheet" href="./wp-content/themes/テーマ名/icomoon.css">

もしも外部ファイルを使いたくない場合は、icomoonからダウンロードしたCSSファイルの中身を、WordPressのCSSへ追加すればOKです。その際、以下の様に、パスのfonts直前に./を追加します。WordPressのCSSへコードを追加するのであれば、先ほど説明したheader.php内への記述は必要ありません。

/*icomoon*/
@font-face {
	font-family: 'icomoon';
	src:url('./fonts/icomoon.eot?p1l8kn');
	src:url('./fonts/icomoon.eot?p1l8kn#iefix') format('embedded-opentype'),
		url('./fonts/icomoon.ttf?p1l8kn') format('truetype'),
		url('./fonts/icomoon.woff?p1l8kn') format('woff'),
		url('./fonts/icomoon.svg?p1l8kn#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-Pocket:before {
	content: "\e008";
}
.icon-hatena:before {
	content: "\e00a";
}
.icon-googleplus:before {
	content: "\e608";
}
.icon-facebook:before {
	content: "\e60d";
}
.icon-twitter:before {
	content: "\e611";
}

続いて、WordPressのCSSに以下を追加します。

/*自作SNSボタンCSS*/
.follow {
    margin-bottom:1em;
}
.follow ul{
    list-style:none;
    position:relative;
    margin:-10px 0 0 -10px;
    overflow:hidden;
}
.follow ul li{
    float:left;
    width:100px;
    margin:10px 0 0 10px;
}
.follow ul li a{
    padding-top:10px;
    padding-bottom:5px;
    display:block;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    color:#fff;
    font-family:'Open Sans',sans-serif;
    text-align:center;
    text-decoration:none;
}
.follow ul li a:before{
    position:relative;
    display:block;
    -webkit-transition:.15s ease-in-out;
    transition:.15s ease-in-out;
    color:#fff;
    font-size:26px;
    font-family: "icomoon";
}
.follow ul li a:hover{
    background-color:#fff;
}

/*ツイッター*/
.follow ul .twitter a{
    background-color:#00aced;
    border:2px solid #00aced;
}
.follow ul .twitter a:before{
    content: "\e611";
}
.follow .twitter a:hover,.follow .twitter a:hover::before{
    color:#00aced;
}

/*フェイスブック*/
.follow .facebook a{
    background-color:#3c5a98;
    border:2px solid #3c5a98;
}
.follow .facebook a:before{
    content:"\e60d";
}
.follow .facebook a:hover,.follow .facebook a:hover::before{
    color:#3c5a98;
}

/*グーグルプラス*/
.follow ul .googleplus a{
    background-color:#db4a39;
    border:2px solid #db4a39;
}
.follow ul .googleplus a:before{
    content:"\e608";
}
.follow ul .googleplus a:hover,.follow ul .googleplus a:hover::before{
     color:#db4a39;
}

/*はてなブックマーク*/
.follow ul .hatena a{
    background-color:#008cd2;
    border:2px solid #008cd2;
}
.follow ul .hatena a:before{
    content: "\e00a";
}
.follow ul .hatena a:hover,.follow ul .hatena a:hover::before{
    color:#008cd2;
}

/*ポケット*/
.follow ul .pocket a{
    background-color:#ee4156;
    border:2px solid #ee4156;
}
.follow ul .pocket a:before{
    content: "\e008";
}
.follow .pocket a:hover,.follow .pocket a:hover::before{
    color:#ee4156;
}

最後に、管理画面の外観⇒テーマの編集から、SNSボタンを表示させたい場所に下記のphpコードを貼り付ければ完成です。content-single.phpの