以前WPtouchのカスタマイズ（トップページ編）ということで記事を書きました。
すぐに記事画面編を書くつもりでしたが、なかなかまとまらず、ものすごく間が空いてしまいました。
ようやくひと区切りついたので、まとめます。
これがいいとか悪いとかはともかくカスタマイズの一例として見てもらえれば。トップページのカスタマイズはコチラから
私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと
項目別に読む
1. はてなブックマークカウンター
ここはトップページ画面編の4と同じです。
/wp-content/plugins/wptouch/theme/default/single.php
の（今回はsingle.phpをイジります、良い意味で）>
<a class="h2" href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a>
の下に
<a rel="nofollow" target="_blank" href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"> <img border="0" src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" alt=""/> </a>
を追加します。
2. ソーシャルボタン
single.phpの
<div class="clearer"></div> <?php wptouch_include_adsense(); ?>
の下に表示させたいソーシャルボタンのコードをテキトーに付けてください。
ソーシャルボタンのコードの前には
<div class="clearer"></div>
をつけましょう。
ソーシャルボタンの設置には以下のエントリーがとても参考になりました。
カウント数のでないバージョンのTwitter共有ボタン。それとGoogle+共有のボタンも設置してあります。詳しくは以下のエントリーにて。
Google+の「+1」ボタンについて考えてみた
はてなブックマークのボタンも付けてもいいかも。
3. Facebook Like Box設置
Facebookページのリンクを貼るよりもこのほうがアイコンや「いいね！」の人数がわかるのでリンクとは別に設置。方法は@norirowさんに教えていただきました。
<?php the_content(); ?>
の下に
<fb:like-box href="http://m.facebook.com/knk-ncom" width="292" height="60" show_faces="false" border_color="" stream="false" header="false"></fb:like-box>
を追加します。iPhoneでスペースが狭いこともありfaceやstreamはfalseにしてあります。
4. Google Adsense追加
single.phpの
<?php the_content(); ?>
の下にGoogle Adsenseのコードを追加します。
5. はてなブックマークのコメントを表示
以前のブログテーマカスタマイズ以来使っている、Hatena bookmark anywhereですがWPtouchでも表示されるようです。
Hatena bookmark anywhereはプラグインのオプションで「自動的に表示する」のチェックを外しておくと
<div id="hatena_bookmark_anywhere"></div>
と書いた部分に表示されます。
6. Facebook Comments Box
この前（といってもだいぶ前になってしまいましたが）、@spring_friendさんのエントリーを読んでからコメントの共有にFacebookを使うことにして導入した「Facebook Comments Box」がWPtouchでも同じように機能するみたいです。
参考記事: ブログのコメント欄をDISCUSからFacebookに変更しました | なまら春友流
参考記事: Hacks for Creative Life! » Blog Archive » ローソンガジェットとFacebook Commentsを設置してみたよ♪
この記事を書いた当初はこのやり方でいいかなと思っていたのですが
このようにコメント欄の長さをPC用のページに合わせているためiPhone側では意味もなく横長になってしまいます。これが少し不満だったのでこのまま記事として出すわけにもいかずにそのまま数ヶ月が経過。
これは、直接コードを別々に埋めこむしかない。ここからが最近の話です。
WordPress or WEBサイトにFacebookコメント欄を埋め込む方法 | FBN Future box news | Facebook、Android、 iPhone WEBのこれからを伝えるメディア
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:comments href="<?php the_permalink(); ?>" width="320"></fb:comments>
案外簡単でした。iPhone側ではwidthを320に、PC側では600にしてあります。これで横長にもなりません。
これによって「Facebook Comments Box」プラグインの必要がなくなりました。使うプラグインがひとつ減ったことによりページの読み込み速度的にもいい感じです。
7. Feedback ChampuruでTwitterなどのコメントを表示
@feelingplaceさんのエントリーを読んで導入したWordpressプラグイン「Feedback Champuru」がこちらでも表示されます。Twitterでのコメントが表示されます。
その他のカスタマイズ
米が好き | 【WordPress】WPtouchを自分好みにカスタマイズしまくる
WPtouchのカスタマイズ記事はなかなか少ないですがその中でも特に役に立った記事リンクを参考に載せておきます。
おわりに
前回やその前のエントリーでのTwitterコメントの中に「前よりも見づらくなった」というものを見かけました。
私も「紹介したものが間違いなく最適なものである」なんて自信は持てませんし、あくまで「こんなカスタマイズもやろうとすれば出来るんだぜ （・∀・）ﾆﾔﾆﾔ」ぐらいの気持ちで書いてます。「他人と同じじゃツマラナイ」という気持ちもあります。
読者の方が見やすいように今後も工夫していきたいと思います。「どこがどのように見づらいのか」をコメントしていただけると参考になります。
みなさまもいろいろ試してみてはいかがでしょうか。
