だつえん！ブログで紹介されていた、
Simplicityで記事タイトル下にソーシャルシェアボタンを表示するカスタマイズ
を読みながら、あー確かに上のボタンたまに使う事あるよなーと思ったので、参考にして上にもボタン付けました。
ただ、PC版で上のボタンにバルーンがあるのはタイトルと本文の間が少し長すぎるな。と感じたので、バルーンなしのものを作ってそれを表示することにしました。
バルーンなしのPC版を作る(sns-buttons-top.php)
sns-buttons.phpをコピーして新規にsns-buttons-top.phpを作成します。
Simplicityの作者さんの作り方は、同じことを繰り返さない。同じことはテンプレートを分けて、それぞれ実装している感じなので、本来ならsns-buttons.phpをうまいこと何かしてやる方が良いんだと思います。
ソースコードが長いので、弄った部分だけ説明していきます。
まずはIDが下に表示するSNSボタンの所と被るので、新規で作ってるしせっかくなので変更します。
<div id="sns-buttons-top">
適当に-topを付けてみました。
以下のコードは、「シェアする」の文字を表示している部分なので、タイトル下に配置するボタンにはそれは要らないかな。と思うのでバッサリ削除。
<?php if ($options['share_msg']): ?> <p class="sns-share-msg"><?php echo esc_html($options['share_msg']) ?></p> <?php endif; ?>
classを変更(マージンとか一緒で良い人なら変える必要はないです)
<ul class="snsbt clearfix">
t付けただけって言ういい加減なやり方ｗ
あとは、各ボタンをバルーンなしの物に変えます。
data-count="none"
verticalをnoneに変更。
&layout=button&show_faces=false&width=70&action=like&colorscheme=light&height=20
src=の所のlayoutをbox_countからbuttonに。width,heightをそれぞれ変更。
style="border:none; overflow:hidden; width:70px; height:20px; border:0:overflow:hidden;background-color: transparent;"
styleの所も20pxに変更。
※20140817のバージョンでFacebookのいいね！ボタンのコードが変わっていました。新しい修正方法はこちら
Google+
data-annotation="none"
を追加しました。
はてなブックマーク
data-hatena-bookmark-layout="standard-noballoon"
vertical-balloonをstandard-noballoonに変更。
data-pocket-count="none"
verticalをnoneに変更。
自分の環境では、はてなブックマークボタンの右側に8px余計なスペースが出来てしまって、なんでだろう？と思ってChromeのDeveloper Toolsで表示してみると、iframeの所がstyle=”width: 88px; height: 20px;”となっていて謎なことに。治し方が分からないから、無理やり80pxに。
<div class="hatena-standard-noballon">hogehoge</div>
サイズはスタイルシートでいじることにして、はてなブックマークの所を<div>で囲んでおくことに。
子テーマのstyle.cssに追記
親テーマのstyle.cssからSNSシェアボタンの一部をコピーしてきてsnsbtとして追加
/************************************
** SNSシェアボタン(TOP)
************************************/
ul.snsbt{
padding:0 0;
margin-top: -1.0em;
margin-bottom:0;
}
.snsbt li {
float: left;
list-style-type: none;
margin-right: 5px;
padding-right:5px;
}
.snsbt div.hatena-standard-noballon {
width: 80px;
}
margin-top: -1.0emは、投稿日とかの下にマージンが1.7emとられていて、ボタンを配置すると少しマージン多すぎるなぁと思ったんで、追加しました。マージンが気にならなければstyle.cssに追加はいりません。
hatena～の所が、無理やり80pxにしている部分。コレであってるのかは？？？
適当に書いてみたらうまく表示出来たので、コレでいいかなーって言う適当っぷり。
間違ってたら教えて貰えたら嬉しいです。
スマホ版のSNSボタンも一応作る(sns-buttons-s-top.php)
PC版と同じく、IDの変更と「シェアする」の削除、classの変更をしました。スマホ版は元からアイコンだから「シェアする」だけ気にならなければ、新たに作らなくてもいいんじゃないかなと思う。
<div id="sns-buttons-top">
PC版同様に-top付けただけ。
「シェアする」のコードを削除
<?php if ($options['share_msg']): ?> <p class="sns-share-msg"><?php echo esc_html($options['share_msg']) ?></p> <?php endif; ?>
classを変更
<ul class="snsb clearfix snsbs">
single.phpに追記
新しくソースを作っているので、-topの付いたテンプレートを指定します。
<div id="sns-group-top">
<?php if (wp_is_mobile()) {//モバイルの時は単なるアイコン
get_template_part('sns-buttons-s-top');
} else {//PCの時はバルーン付きボタン
get_template_part('sns-buttons-top');
} ?>
</div>
完成
イメージ画像のように、バルーンなしのボタンだけシェアボタンが付きました。
記事の下の所は標準のバルーン付きのままにしています。
※Simplicity20140822(開発版)から横向きバルーン付きですが、タイトル下にSNSボタンを付けることが標準で可能になったようです！
Simplicity20140822公開。タイトル下に小さなSNSボタン追加機能、メニューの不具合修正他。
コメント