せっかくWPtouchでスマホ用にカスタマイズしたサイトに埋め込んだツイートが画面からはみ出してしまう問題。その原因と対策を備忘録としてまとめました。
なぜ起こる？
WordPress3.4からツイートURLを貼り付けるだけで自動的にツイートを埋め込む機能が追加されました。
この機能は、エントリのロード時にツイートURLを検知して自動的にhtmlコードを生成しており、この枠部分blockquoteのwidthがテーマの最大横幅もしくはダッシュボードで設定している固定幅になります。
この幅がスマートフォン画面の幅を超えると上図のようにハミ出して表示されてしまいます。これを解消する対処方法がいくつかあります。
ブックマークレット『Tweet2HTML』を使う
@feelingplace さんのブックマークレットを使う方法です。TwitterクライアントからツイートURLをコピーして実行すると必要なhtmlコードが指定するエディタアプリ（Textforce、DrafptPad、するぷろ等）に連携されます。
http://dl.dropbox.com/u/290961/js/tweet2html3mk.html
このブックマークレットを使用すると、blockquoteのwidthが指定されません。したがって、以下のとおりWPtouchが使用するthemesにあるstyle.cssで指定している幅にフィットすることになります。その他、このブックマークレットは返信のスレッド表示を無効化できるなど機能的に優れており、iPhoneでブログを書くユーザには必携とも言えるツールです。
Twitter公式サイトから埋め込みパーツを取得
@delaymania さんのエントリが参考になります。https://twitter.com の公式サイトからツイートの詳細を選択しこのツイートをサイトに埋め込むをクリックすると簡単にhtmlコードを取り出せます。
スマホ画面で最大幅表示したいWPtouchには直接関係ありませんが、貼り付けパーツの配置を左、中央、右と指定することが可能です。ただし、左と右を指定した場合、width要素（width=”350″）が追加されてしまうのでhtmlコード取得後に削除するようにします。なお、この方法はiPhoneからは利用できません。
WordPressのメディア設定から変更
WordPressのダッシュボードから設定＞メディアを呼び出します。自動埋め込みにチェックを入れると、ツイートURLを貼り付けるだけでツイートを埋め込むことが可能です（デフォルト状態）。
埋め込みファイルの最大サイズの幅はデフォルト状態でブランクになっています。このままだとテーマ最大幅に自動で調整されます。
iPhoneからWPtouchでカスタマイズされたサイトを見た場合には300がちょうどになると思います。iPhoneではTweet2HTMLと同じように表示されます。
ただし、この場合は通常のWPテーマにも反映するのでPCサイトではWPテーマ幅に対して狭くバランスが悪く表示されます。また、他のメディア系URLも影響を受けるため避けた方が良さそうです。
プラグイン『Blackbird Pie』をインストール
このプラグインを使用するとエントリにツイートURLを貼り付けるだけで、以下のように表示してくれます。ただし、PCサイト表示すると幅指定できないため自動的にテーマの最大幅となってしまうので好みが分かれるところです。
JavaScriptで強制的に幅を調整する
WPtouchのthemeにあるfooter.phpにJavaScriptを追記して、一旦、WordPress側で生成したコードの該当部分（blockquoteのwidth部分）を上書きする方法です。スゴいこと考えるなと・・・
http://actyway.com/7031
WPtouch用テーマをカスタマイズしているユーザ向け、作業前にバックアップ推奨です。以下のようにfooter.phpの最後のwptouch_get_stats()の手前に挿入しておきます。
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> <!-- window.onload=function(){ if(jQuery('.twitter-tweet-rendered').size()>0){ jQuery('.twitter-tweet-rendered').each(function(){jQuery(this).css("width","");}); } }; //--> </script> <?php wptouch_get_stats(); |
以下のように表示され、Tweet2HTMLやTwiter公式の埋め込みパーツとは若干見え方が異なります。
ツイート埋め込みのTips
以下については、Tweet2HTMLかTwitter公式サイトの埋め込みからhtmlコードを取得後に必要な部分を書き換える方法です。
配置場所は、divなどで囲んで指定すると表示が狂ってしまいます。そのため、blockquoteのclassを次のように変更すると配置場所を指定できます。Twitter公式が提供するclassは!important指定されています。ブランド統一を推進しているのでフォントの変更などテーマCSSでは上書きできないと思います。
左： class=”twitter-tweet tw-align-left”
中央： class=”twitter-tweet tw-align-center”
右： class=”twitter-tweet tw-align-right”
言語は、blockquoteのlang要素を指定します。フォローボタンの文字列や「返信」「リツイート」「お気に入り」、年月日表示が指定言語になります。たとえば以下のような言語を指定できます（中国はTwitterをブロックしているためか中国語【zh】は認識しませんでした）。
英語：lang=”en”
ドイツ語：lang=”de”
フランス語：lang=”fr”
ロシア語：lang=”ru”
韓国語：lang=”ko”
まとめ
WordPress3.4になってからURL貼り付けで埋め込んでいましたが、WPtouchでスマホ用サイトをカスタマイズしたところいろいろと副作用が出てきました。このツイート埋め込みもそのうちのひとつ。過去分を一気に修正するのは面倒なのでfooter.phpで強制的に変えるようにしています。今後はTweet2HTMLとTwitter公式サイトの併用していこうと思います。
（ここまで書いてなんですが）WPtouchは扱いが難しい。カスタマイズするとキリがなくなります。これはまた別の機会に。