WordPressのプラグイン「WPtouch」のソーシャルブックマークをカスタマイズ

2011.06.13

WPtouchのソーシャルブックマークをカスタマイズ
 
スマートフォンに最適化してくれるWordPressのプラグイン「WPtouch」。

これを使うとコンテンツの下にはメールやTwitter、Facebook、ソーシャルブックマークへアクセスするためのボタンが表示されます。その中の本みたいなアイコンを押すとソーシャルブックマークボタンが現われるのですが、なんだか馴染みのないものばかり。。はてなブックマークなど日本でおなじみのソーシャルブックマークを中心にいろいろ入れ替えておきました。
 
WPtouchのソーシャルブックマークをカスタマイズ
デフォルト(左)とカスタイズ後(右)。
 
 
まずWPtouch内のsingle.php内のコードを修正します
/wp-content/plugins/wptouch/themes/default にあるsingle.phpをダウンロードして、<div id=”bookmark-box” style=”display:none”><ul>〜</ul></div>内をごっそり入れ変えました。以下はそのコードです。
 

<li><a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>" target="blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/hb_icons.jpg" alt="" /><?php _e( "はてなブックマーク", "wptouch" ); ?></a></li>
<li><a href="http://buzzurl.jp/entry/<?php the_permalink() ?>" target="blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/buz_icon.jpg" alt="" /><?php _e( "Buzzurl", "wptouch" ); ?></a></li>
<li><a href="http://del.icio.us/post?url=<?php echo get_permalink()?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/deli_icon.jpg" alt="" /><?php _e( "Del.icio.us", "wptouch" ); ?></a></li>
<li><a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?ei=UTF-8&;u=<?php echo get_permalink()?>&t=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/yah_icon.jpg" alt="" /><?php _e( "Yahoo!ブックマーク", "wptouch" ); ?></a></li>
<li><a href="http://www.google.com/bookmarks/mark?op=edit&hl=ja&bkmk=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>" target="blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/go_icon.jpg" alt="" /><?php _e( "Googleブックマーク", "wptouch" ); ?></a></li>
<li><a href="javascript:var%20d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='http://www.tumblr.com/share',l=d.location,e=encodeURIComponent,p='?v=3&u='+e(l.href)%20+'&t='+e(d.title)%20+'&s='+e(s),u=f+p;try%7Bif(!/%5E(.*%5C.)?tumblr%5B%5E.%5D*%24/.test(l.host))throw(0);tstbklt();%7Dcatch(z)%7Ba%20=function()%7Bif(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=450,height=430'))l.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();%7Dvoid(0)" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/tumblr_icon.jpg" alt="" /><?php _e( "Share on Tumblr", "wptouch" ); ?></a></li>

 
 
つづいてソーシャルブックマークアイコンをアップロードします
デフォルト同様に /wptouch/themes/core/core-images/bookmarks にソーシャルブックマークアイコンをアップロード。私が使ったのをアップしておきますので必要な方はどうぞ。
 
・WPtouch用ソーシャルアイコンセット[Link]
 
できればlivedoorクリップも入れたかったのですがiPhone4での文字化けが解消できなかったので今回は見送りました。文字化けしない方法をご存知でしたらお知らせいただけると助かります。

関連してるかもしれない記事

Pocket