Simplicityテーマでタイトル下にSNSボタン

シェアする

だつえん!ブログで紹介されていた、
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付けただけって言ういい加減なやり方w

あとは、各ボタンをバルーンなしの物に変えます。

Twitter

data-count="none"

verticalをnoneに変更。

Facebook

&amp;layout=button&amp;show_faces=false&amp;width=70&amp;action=like&amp;colorscheme=light&amp;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に変更。

Pocket

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ボタン追加機能、メニューの不具合修正他。

スポンサーリンク
広告(大)

シェアする

フォローする

スポンサーリンク
広告(大)