CLOSE
CLOSE

WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました

Webtreats Magic Marker Social Media Icons
テーマ開発に終わりが見えず、どうしたものかと考える毎日を過ごしております。@knk_nです。
そんなテーマいじり(あるいはWPtouch卒業)が最近ブームのようで、多くの方がスマートフォン用のテーマをこしらえ始めています。
今回のエントリーはそこのところに関係するようなしないような。

「WP Social Bookmarking Light」卒業のお知らせ

この度私は長らくお世話になったWordPressプラグインのひとつ「WP Social Bookmarking Light」に別れを告げることを決意しました。
理由は主に2つ

1. ボタンの大きさ

最近スマートフォンのテーマいじりに凝っている私。
PC用テーマと違い、スマートフォンは操作を行うのが人の指なものですから、ボタンやテキストの大きさひとつで使いやすかったり使いにくかったり。
ボタンが小さいと隣りのボタンを押し間違えちゃったりすることもあります。
見たほうが早いかな。
Goodbye wp social bookmarking light1
こっちが「WP Social Bookmarking Light」で配置しているソーシャルボタン。ボタン自体も小さいし、揃ってなくて見た目もあんまりよくない。

Goodbye wp social bookmarking light2
こっちが手製で配置したソーシャルボタン。サイズも大きく少しは押しやすくなったんじゃないかな。
詳細は実際のページで確認してください。
「WP Social Bookmarking Light」はテーマごとにボタンの大きさの指定ができないものですから、テーマづくりに凝りすぎてしまうと、このあたりが気になってきてしまうのです。

2. できればプラグインは…ね?

これは、@さんも書いてましたが、自作してて一番感じる点です。

以前使っていたテーマはあんなにファイルがたくさんあったのに、「え? 本当にこれだけでいいの?」と驚くファイル数で、WordPress のブログテーマは作成できるんです。

後、軽くなった気がしませんか?

via: [WordPrsss] ブログテーマ自作しました & 自作して感じたこと * ラクイシロク

最近テーマを自作された@rakuishi07さんも、自作によって「本当に」必要なファイルの少なさに気づき驚かれたようです。
自作記事以降も少しずつテーマ改造を続けた結果、いまではテーマファイルの総容量が500KBを切るまでになりました。テーマ変更前のほぼ五分の一です。
これは私の自己満ですが、テーマ変更前と比べて読み込みスピードも早くなった気がします。
そして同様のことがプラグインにも言えるということです。
「WP Social Bookmarking Light」は使えるボタンの数が多くて便利なのですが、全部使っているわけではないんですよね。
EvernoteとはてブとTwitter、Facebook、Google+くらい。
MixiとかTumblrとかもあればいいはずですが、私が使っていないこともあってか反応が拾えないので、あんまりメリットを感じていないのが現状です。
そのあたりのコードがムダなような…
このあたりのこだわりは人それぞれあると思いますが、ソーシャルボタンくらいプラグイン使わなくてもなんとかなるので、使わないことにしたってことですかね。

3. ソーシャルボタン設置のまとめ的なもの

せっかくなので使ったボタンのコードとかを今後わざわざ調べ直さなくてもいいようにまとめておこうと思います。

追記(2012/04/20 14:00)

ソーシャルボタンを縦一列にに並べたい場合についても記事を書かせていただきました。こちらもよろしければ合わせてご参考ください。

参考: ボタンレイアウトを見直しました | ソーシャルボタンを縦に並べて配置するときに大切なこと | けんけん.com

追記ここまで

JavaScript絡みのやつ

JavaScript関連はヘッダなりフッタにまとめちゃう主義です。

<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Evernoteサイトメモリー -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<script type="text/javascript">
<!-- Facebook -->
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=FacebookのAppID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<!-- Google+ -->
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Facebookは「en_US」の部分を「ja_JP」に置き換えると「Likeボタン」が「いいねボタン」になります。

1. はてなブックマーク

はてなブックマークボタンの作成・設置について
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title=" / @knk_n: <?php the_title(); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加">
    <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>

2. Twitterのツイートボタン

こちらはこの前記事を書いたのでそちらをご参照ください。

参考: [ブロガー必見]ブログ内ツイートボタンをカスタマイズしてTwitterアカウント名をイイ感じに表示してみた

3. Facebook Likeボタン

Like Button – Facebookディベロッパー
<div id="fb-root"></div>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div>

4. Google+ボタン

+1 ボタン
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>

5. Evernoteサイトメモリー

サイトメモリーって何? | Evernote Corporation
<a href="#" onclick="Evernote.doClip({}); return false;">
    <img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" />
</a>

おわりに

TumblrやMixiなど今回外したボタンは必要かどうかわからないから外したもので、「必要だ!」という声が多ければ復活させようと思います。(その時はPC版のみになると思います。スマートフォンだとスペースに限りがあるので。)
徐々にプラグインを使わなくてもできることが増えてきました。
スマートフォン用テーマを作っている方はこういった部分にもこだわってみてはいかがでしょうか。

NEW POSTS 最新記事を読む