備忘録です。お話はWordPress。わからない方も多いと思いますが、必要な方にはかなり必要なポストだと思います。
WordPressには便利なプラグインが沢山ありますね。今回はソーシャルボタンを記事内ページトップに表示させたかったんですが、プラグインだとどうも、テーマで設定されているアイキャッチ画像とトラブってうまく表示されませんでした。
それまでは、WP Social Bookmarking Lightというとっても便利なプラグインを使用させて頂いていました。ちなみに2011/5月現在の記事ボトムにあるソーシャルボタンは「Add To Any」を使用しています。どちらもとても便利なプラグインです。
こちらでWP Social Bookmarking Lightの解説が見れます。↓
[WordPress]Twitter,Facebook,はてなブックマーク,Evernote,Instapapreに対応している神Plugin。
今回、私は見出し画像と、ソーシャルボタンを共存させるために、タイトル下の、投稿日などのメタ情報が載っているところに表示をさせようと決断。こんな感じにです。
今回はそれまでの備忘録として、WordPressにプラグインを使用せずソーシャルボタンを設置する方法を紹介してみたいと思います。
①まずは、ソーシャルボタンを取ってくる。
まずは、ソーシャルボタンを取得しましょう。
Twitterはhttp://twitter.com/goodies/tweetbuttonこちらから公式のソーシャルボタンを取得できます。
好きなボタンも自分で選ぶことが出来て良いですね！好きなボタンを選んで、下で自分のアカウントを設定しましょう。
＊Twitterはindex（トップ）にある記事に表示されると、トップページにリンクが貼ってしまうというかなりやっかいなことが起こります。そんな時は②をご覧ください。
はてなブックマークはhttp://b.hatena.ne.jp/guide/bbuttonこちらから。使いやすくなりました！とのこと。
②ソーシャルボタンを貼りつけ
アドレスを取得したら、任意の場所に貼り付けましょう。なお、この時に注意が必要です。Twitterはindex（トップ）にある記事に表示されると、トップページにリンクが貼られてしまいます。なので、私は以下のように書き換えて貼りつけています。
<a href="http://twitter.com/share" data-text="<?php the_title(); ?>" data-url="<?php the_permalink() ?>" data-count="horizontal" data-via="ichiha_gn" data-related="ichiha_gn">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
このように書き換えて入力すると、indexからも記事のツイートをすることが可能です。
参考URL → http://labs.techfirm.co.jp/ipad/cho/1190
ついでにはてなブックマークボタンのコードも書いておきます。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"class="hatena-bookmark-button"data-hatena-bookmark-title="<?php the_title(); ?> | <?php bloginfo( 'name' ); ?>"data-hatena-bookmark-layout="standard"title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
これを任意の箇所に設置すればOK！あとはなんだかんだで、配置法がめんどくさかったりします。
③CSSで見やすくする。
なんだかんだでこの作業が一番大変。今回私は今までのメタデータを左に。ソーシャルボタンを右に設置したいと考えていました。そこで、このような形に決定
<div class="postmeta-primary"> 日付データなど <div class="postmeta-social"> Twitter、はてなブックマーク、ソーシャルボタン </div> </div>
として、CSSでスタイル編集をかけました。styleを編集する時、役立ったのが、positonの設定です。postmeta-primaryには、relative。postmeta-socialにはabsoluteで場所の指定をつけて、設置。
初めはどうしても段落が入ってしまって、うまくいかなかったのですが、どうにか、position設定でうまくいきました（IEだとちょっと変になるのは許して・・・）。
こんなところです。WordPressって探せば何だってプラグインにあるし本当に素晴らしいなと思い、だけど、細かいところはやっぱり自分で編集していかなきゃいけないんだなと思う今日この頃でしたとさ。
