【BizVektor】ヘッダーの連絡先をSNS各種のフォローボタンに変更する方法！

 
どうも、ジョニーです。

BizVektorのヘッダー（連絡先エリア）を、SNS各種のフォローボタンに変更するカスタマイズのご紹介です。

追記：【BizVektor】ヘッダーの連絡先をSNS各種のフォローボタンに変更する方法（Part2）もあります。

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

 

カスタマイズする理由（仕上がりイメージ）

私がBizVektorの子テーマ作成をする際にカスタマイズしたので、備忘録です。

デフォルトではこんな感じ ↓

 
仕上がりイメージはこんな感じ ↓

 

カスタマイズ スタート

「header.php」をいじる

Font Awesomeを使用しようできるように、「header.php」のheadタグ内に下記コードを追記します。
※私の場合は子テーマに書いてます。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

 

「functions.php」をいじる

「functions.php」に下記コードを追記します。
※私の場合は子テーマに書いてます。

// ヘッダーの連絡先をSNS各種のフォローボタンに変更する
add_filter('headContactCustom','do_head_contact_custom');
function do_head_contact_custom($headContact){
    $headContact =  '<div id="headContact"><div id="headContactInner">
<div class="follow">
<ul>
<li class="twitter"><a href="ツイッターのURL" target="_blank">Twitter</a></li>
<li class="facebook"><a href="フェイスブックページのURL" target="_blank">Facebook</a></li>
<li class="googleplus"><a href="Google+ページのURL" target="_blank">Google+</a></li>
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【サイトのドメイン】%2Ffeed%2F" target="_blank">Feedly</a></li>
</ul>
</div>
    </div></div>';
    return $headContact;
}

 

「style.css」をいじる

「style.css」に下記コードを追記します。
※私の場合は子テーマに書いてます。

/*----------------------------
headerフォローボタン 開始
----------------------------*/
.follow {
    margin-bottom:3px;
}

.follow ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.follow ul li{
    float: left;
    width: 8em;
    margin-right: 0px;
    padding: 3px;
    text-align: center;
}
    
.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;
    padding-top:3px;
    padding-bottom:5px;
    display:block;
    -webkit-transition:.15s ease-in-out;
    transition:.15s ease-in-out;
    color:#fff;
    font-size:26px;
    font-family: "FontAwesome";
}
    
.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: "\f099";
}
 
.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:"\f09a";
}

.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:"\f0d5";
}

.follow ul .googleplus a:hover,.follow ul
 .googleplus a:hover::before{
     color:#db4a39;
}
     
.follow ul .rss a{
    background-color:#ffb53c;
    border:2px solid #ffb53c;
}
.follow ul .rss a::before{
    content:"\f09e";
}
.follow ul .rss a:hover,.follow ul .rss a:hover::before{
    color:#ffb53c;
}

.follow ul .feedly a{
    background-color:#87c040;
    border:2px solid #87c040;
}
.follow ul .feedly a::before{
    content:"\f09e";
}

.follow ul .feedly a:hover,.follow ul
 .feedly a:hover::before{
    color:#87c040;
}
/*----------------------------
headerフォローボタン 終了
----------------------------*/

 
上記を参考にお好きにカスタマイズどうぞ。

《参考記事》
【STINGER5】コピペOK！サイドバーにアイコンフォントでSNS各種のフォローボタンを作る
Webアイコンフォント「Font Awesome」の使い方

 

まとめ（感想）

ありそうでなかったカスタマイズでした。BizVektorを使っている人は是非お試しあれ！