Simplicity のフォローボタンを増やしてみました。

2014年11月20日2017年9月14日WordPress,技術

この記事は2014年11月20日に書かれたものです。ご注意ください。

このブログは「Simplicity」を使っています。
その中で、SNSへ対してのフォローボタン・フォローアイコンがあります。
今日はこれを自作で追加してみました。
正直、素人が手探りでカスタムしたので不具合や数値ミスがあるかもしれません。
また記載の仕方もなんとなくなので、察してください :;(∩´﹏`∩);:
（初めて改造した割には、良い感じ！！）

このフォローボタンを追加するには3つのファイルを弄ります。

simplicity/sns-pages.php
simplicity/lib/customizer.php
simplicity/style.css

その中で追加するコード、弄る箇所も備忘録として書いておきます。

sns-pages.php

フォローボタンを表示するために必要なファイルです。
この記載している順番がWEB上で表示される順番となりますので、自分の気に入る並び方にしてみてください。

<!--?php if ( get_steam_follow_id() )://Steamフォローボタンを表示するか ?-->
<ul>
<li class="steam-page">
<a href="http://steamcommunity.com/id/<?php echo esc_html( get_steam_follow_id() ); //SteamフォローIDの取得?>" " target="_blank" title="Steamをフォロー" rel="nofollow">
<i class="fa fa-steam-square">
</i>
</a>
</li>
<?php endif; ?>

customizer.php

テーマで使用する関数などをここに保存しています。
ここでは並び順などは気にしなくても良いのですが、分りやすいところに記載すると後々把握しやすいと思います。
私は全てTwitterの上部に記載してあります。
行数はデフォルトの状態を指しています。コメントを検索すると分りやすいかも？

（829行目 //TwitterフォローID）//SteamフォローID
$wp_customize->;add_setting('sns_options[steam]', array(
'type' => 'option',
));
$wp_customize->add_control( 'steam_textfield', array(
'settings' => 'sns_options[steam]',
'label' =>'steamcommunity.com/id/XXXXXXX',
'section' => 'sns_section',
'type' => 'text',
'priority' => 89,
));

（1840行目 //TwitterフォローボタンのIDを取得）//SteamフォローボタンのIDを取得
function get_steam_follow_id(){
$o = get_sns_options();
return $o['steam'];
}

style.css

おなじみのCSSです。追加したアイコンの色をここで設定できます。
全て似た感じのソースの上部に書き込んであります。
たとえば feedly や Twitte を参考にさがして付け加えてください

ul.snsp li a i.icon-steam-square{
font-size:34px;
}
ul.snsp li.steam-page a:hover{
color:#171A21;
}
ul.snsp li.steam-page a img{
margin-bottom:-3px;
width:32.5px;
height:32.5px;
border-radius:7px;
border-width:0px;
}