ワードプレス(WP)でツイートを表示させる Twitter Widget Pro 完全日本語カスタマイズ

ワードプレスのサイドにTwitterのツイートを表示させてみようと思います。ツイートはブログ記事よりも手軽に投稿できるので、ブログの隙間を埋めるツールとして便利ですね。

 

いつものようにリサーチしていると評判の良いプラグインとして、Twitter Widget Pro が見つかったので、早速インストール→有効化します。

有効化の後に、ウィジェットとして追加します。設定はウィジェット内で行います。とりあえず「Twitter username」だけを設定後、表示を見てみると既にほぼ狙い通りで良い感じです。

しかし細かい部分を見ていくと、

  • 日本語になっていない部分がある
  • 投稿時間がずれている
  • 投稿方法(from webなど)の表示が邪魔
  • URLがリンクになっていない場合がある
  • 一部のリンクにマウスオーバーしてもホバーの反応をしない

などが気になったのでカスタマイズしていきます。

 

1.投稿日付を日本語化

「設定→Format to dispaly the date in, uses PHP date() format:」が、標準では ‘h:i:s A F d, Y’ だが、日本人には馴染みのないフォーマットなので ‘n月j日’ に変更。

 

2.投稿日時のずれ、URLがリンクにならないバグ、投稿日時の日本語化

これらはプラグインのPHP本体「/wp-content/plugins/twitter-widget-pro/wp-twitter-widget.php」を直接いじります。

投稿時間のずれはPHPのタイムゾーンが設定されていない為だったので、
<?php
の直後2行目に
date_default_timezone_set(‘Asia/Tokyo’);
を追加します。

<?php
date_default_timezone_set('Asia/Tokyo');

/**
 * Plugin Name: Twitter Widget Pro
 * Plugin URI: http://bluedogwebservices.com/wordpress-plugin/twitter-widget-pro/
 * Description: A widget that properly handles twitter feeds, including @username, #hashtag, and link parsing.  It can even display profile images for the users.  Requires PHP5.
 * Version: 2.3.4
 * Author: Aaron D. Campbell
 * Author URI: http://bluedogwebservices.com/
 * License: GPLv2 or later
 * Text Domain: twitter-widget-pro
 */
[/code]
<p>URLがリンクにならないバグは、URLの直前に半角スペースがないとURLとして認識できない為に発生していました。半角スペースが入らなくても文中のURLを認識できるように変更します。</p>
<p>方法ですが、URLのリンク作成ルーチン内において、全角スペース→半角スペースへ変換後、正規表現でURLを抽出し、直前に半角スペースを挿入します。</p>
<p>411行付近(バージョンによって変わります)<br />public function linkUrls( $text ) {<br />の直後に下の3行を追加します。</p>
[code]public function linkUrls( $text ) {

    $text = mb_convert_kana($text, 's', 'UTF-8');
    $text = preg_replace("/(<.*?>)|([a-zA-Z]+://[a-z][a-z0-9_..-]*[a-z]{2,6}[a-zA-Z0-9~/*-?&%]*)/ie", "'$1' ? '$1' : ' $2';" , $text);
    $text = str_replace('"', '"', $text) ;

    /**
    * match protocol://address/path/file.extension?some=variable&another=asf%
     * $1 is a possible space, this keeps us from linking href="[link]" etc

投稿日時の日本語化は、761行付近(バージョンによって変わります)の

$messages = array(
    'year'   => _n( 'about %s year ago',   'about %s years ago',   $count, $this->_slug ),
    'month'  => _n( 'about %s month ago',  'about %s months ago',  $count, $this->_slug ),
    'week'   => _n( 'about %s week ago',   'about %s weeks ago',   $count, $this->_slug ),
    'day'    => _n( 'about %s day ago',    'about %s days ago',    $count, $this->_slug ),
    'hour'   => _n( 'about %s hour ago',   'about %s hours ago',   $count, $this->_slug ),
    'minute' => _n( 'about %s minute ago', 'about %s minutes ago', $count, $this->_slug ),
    'second' => _n( 'about %s second ago', 'about %s seconds ago', $count, $this->_slug ),
);

$messages = array(
    'year'   => _n( '%s年前',   '%s年前',   $count, $this->_slug ),
    'month'  => _n( '%sヶ月前',  '%sヶ月前',  $count, $this->_slug ),
    'week'   => _n( '%s週間前',   '%s週間前',   $count, $this->_slug ),
    'day'    => _n( '%s日前',    '%s日前',    $count, $this->_slug ),
    'hour'   => _n( '%s時間前',   '%s時間前',   $count, $this->_slug ),
    'minute' => _n( '%s分前', '%s分前', $count, $this->_slug ),
    'second' => _n( '%s秒前', '%s秒前', $count, $this->_slug ),
);

に変更します。

「'about %s year ago', 'about %s years ago'」のように、同じような内容が2つ並んでいますが、これは、%sの部分が1の場合に前、2以上で後の文字列が使われます。日本語では英語圏のように複数形にする必要はないので、前後とも同じ内容が入ります。

以上で修正は終了ですが、漢字が含まれる変更なのでUTF-8で保存するのを忘れないようにしましょう。

 

3.投稿方法を消去、一部のリンクが反応しない問題を解消

2.にて、プラグイン本体のPHPファイルをいじっていますが、基本的にはバージョンアップ時などに困るので触らないほうが賢明です。

よって「投稿方法の消去」はCSSによって行います。「ダッシュボード→テーマの編集」より、CSSファイルに以下の記述を追加します。

.widget_twitter .from-meta{
    display: none;
}

一部のリンクが反応しない問題は原因究明まで時間がかかったのですが、原因は「Twenty Ten」のCSSとの衝突でした。「Twenty Ten」ではentry-contentというクラスが定義されており、padding topに12pxが設定されていました。Twitter Widget Proの本文も同じ名前のクラスが設定されており、さらにこちらはインライン要素なので、テキストリンクの下12pxが反応しなかったのでした。

よって、以下の記述をCSSに追加します。

.widget_twitter .entry-content{
    padding: 0;
}

以上で完全日本語化は終了です。PHP本体やCSS等、修正箇所が多くなってしまいましたが、標準状態に比べてとても見やすくなりました。動作チェックを兼ねて運用を続けてみます。

投稿日時のずれ、及び日本語化はWordPressにtwitter widget proを導入してからの試行錯誤 « 84stを参考にさせて頂きました。

 

広告