[WordPress] WPtouchにzenbackウィジェットを表示させる方法

WPtouchにzenbackウィジェットを表示させる

こんにちは、星影（@unsoluble_sugar）です。

突然ですが、WordPressをお使いの方で、スマホ画面の適用に「WPtouch」というプラグインを使用していませんか？

WordPress › WPtouch « WordPress Plugins

テーマをレスポンシブに対応されている方には関係のない話ですが、このプラグインはインストールしてちょこっと設定するだけで、ブログのスマホ対応が簡単にできてしまいます。

WordPress関連の入門書などでもよく紹介されているため、導入している方が比較的多いのではないかと思います。

また、それに加えて、ソーシャルボタンや関連記事の表示を簡単に実現できるブログパーツ「zenback」を設置されている方も結構多いと思います。

Zenbackであなたのブログに全てのフィードバックを。

僕は昨年のWordCamp Tokyoでzenbackの存在を知りまして、それ以降ずっと利用させていただいています。

[WordPress] Twitter Toolsの後継プラグイン「Social plugin」を有効化すると、zenbackウィジェットが表示されなくなる？ | Time to live forever

[Wordpress] Twitter Toolsの後継プラグイン「Social」と、zenbackウィジェットを共存させる | Time to live forever

WPtouchにzenbackウィジェットが表示されていない

WPtouchとzenback、僕はこの両方を使っているのですが、iPhoneなどで自分のブログ記事を見た時に、WPtouchのテーマではzenbackウィジェットが表示されていないことに気付きました。

というか以前から気付いていたのですが、これまで放置していたんですよね…(・_・;)

そんなある日、zenback運営事務局から、一通のメールが届きました。タイトルは「Zenback は スマホ用のテンプレートでも使えるって、ご存知でしたか？」。

最近、多くのブログサービスでスマートフォン用テンプレートが
別途用意されるようになってきていますが、このスマホ用テンプレートに
Zenback、貼り忘れていませんか？

Zenbackでは、スマートフォンにぴったりのデザインや、スマートフォン向けの機能をご用意しています。

「そういえば、PC用表示のほうにしか設置していなかったなぁ」という皆さま、この機会に、ぜひお試しいただければとおもいます。

Ω ΩΩ< な、なんだってー!! 

というわけで、この機会に設置してみることにしました。

WPtouchのソースファイルにzenbackウィジェットのコードを追加する

手順的には通常のテーマで設置する方法と同じやり方で、WPtouchでもzenbackウィジェットが表示されるようになります。要は、WPtouchの記事表示しているソースファイルに、zenbackウィジェットのコードを追加するだけです。

さっそくやってみましょう！c(`･ω´･ c)っ≡つ ﾊﾞﾊﾞﾊﾞ

single.php にコードを追加する

通常のテーマと同じく、zenbackウィジェットのコードを表示したい箇所に追加します。僕の場合は、記事の直後にzenbackウィジェットを表示したかったので、WPtouchの「single.php」にコードを追加しました。

single.php は以下の場所にあります。

/wp-content/plugins/wptouch/themes/default/single.php

<?php the_content(); ?> の直後に追加

single.php をエディタで開き、記事のコンテンツを表示している <?php the_content(); ?> の直後に、zenbackウィジェットのコードを追加します。

<!--?php the_content(); ?-->
<! – ここにzenbackウィジェットのコードを入れる – >

作業はこれだけです。

iPhoneで確認

コードの追加ができたら、iPhoneなどで記事ページを確認しましょう。問題がなければ、zenbackウィジェットが綺麗に表示されるはずです。

参考

幅狭の場所での表示レイアウトを自動で最適化し、スマホでも見やすくなりました！ – Zenback ブログ

[WordPress]WPtouchにzenbackを表示する方法 | DelightMode