WordPressのエディタで改行を無効化するプラグイン

今日は久々にWordpressのプラグインネタ。
今日仕事の時にWordpressでちょこちょこっとやってたら、こんな事につまずきました。
それはエディタを切り替えたら改行とかがおかしくなったという事。
Wordpressの改行がエディタであんまり具合がよくないというのは分かってたんですが、ブログを書く程度ならまあルールで吸収できるんですが今回の場合はちょっとどうしようもなかったのでプラグインにお願いしました。
今回助けてもらったプラグインがPS Disable Auto Formattingというプラグイン。
WordpressのHTMLエディタで自動整形する機能を無効化してくれるプラグインです。
これを有効化するとHTMLエディタで改行してもpやbrが出力されずにエディタ内でのbrが反映されるようになります。
これでbrを多用するであるとか、細かい調整とかを全てコントロールする事ができるようになるのがいい感じです。

WordPressのフォーラムにある説明文を引用

「HTML編集モードでコードを記述したら、改行が消えた。。。」
「正しいコードを書いたのに、貼り付けたら入れ子構造がおかしい不正なコードになってしまっている。」
「ビジュアルモードとHTMLモードを切り替えると改行が消える」
などなど、HTMLモードでの編集は大変気を遣う必要があります。

PS Disable Auto Formattingは、これら自動整形に起因する問題を解決するだけでなく、ビジュアルエディタでの編集をも可能にし、よりWordPressの使い勝手を向上させます。

また、すでに作成済みの記事がある場合への対応として、一括整形処理機能を搭載しています。
本プラグインを有効化すると、元来段落や改行を付加していた処理が行われなくなるため、作成済みの記事の表示が変わってしまいます。これを簡単に修正するための機能が一括整形処理機能で、最終更新時刻が指定時刻以前となっている全ての公開・下書き・レビュー待ちの記事内容を段落・改行付きに整形します。

機能

投稿・コメント・抜粋・説明、各エリア毎の自動整形停止
HTMLモード利用時のp, brタグ除去回避
作成済み記事に対する一括整形処理

との事。
適用したら過去記事が未整形になってしまって表示が崩れるところを回避するための一括整形処理があるのはうれしいです。
とはいえいきなり実装も怖いので僕のどうでもいいテスト環境で実験しましたがきちんと一括整形もされていたので安心しました。
念の為バックアップを取ってからプラグインの有効化をした方がいいとは思います。

インストールは簡単でPS Disable Auto FormattingはWordpressのプラグインディレクトリに登録されてるのでプラグインの新規追加ボタンからPS Disable Auto Formattingで検索すれば出てきますので、あとはインストールして有効化するだけです。

基本的には整形してくれる前提でpやbrが入る事を想定してコーディングしてるので特にこれまでの分にどうこうという話でもないんですが、今後の案件とかでCMSとしての利用色は強い場合などには役に立ちそうです。

あと、このプラグインをもにょもにょしてる時に思ったんですが元々からWordpressにHTMLとか書いてあるからタグ打つ感じで対応しようとしてるのに自動整形されて自分で書いたHTMLが無効化されるのってどうなんやろって思いました。
それなら最初からHTML・ビジュアルという2つじゃなくてHTML・改行自動変換・ビジュアルとかの3つのパターンのエディタを用意してくれたらそもそもプラグインで対応する必要もなかったのにと思うわけです。
ということで次回のバージョンアップにこういう変更があるとうれしいなという超個人的な意見でしたｗ

WordCamp KOBE 2011に参加してきたよ

今日はWordCamp KOBE（神戸） 2011に参加してきました。

前々から気にはなっていたもののどうしようかなと決めかねていましたが、当日になって妻が言った「行ってきたらいいやん」の一言が決定打になって当日申し込みの当日参加してきましたｗ
開催場所が神戸芸術工科大学だったのですが、場所は神戸地下鉄の学園都市駅という場所でかなり遠めでした。
この駅の一歩手前の総合運動公園は仕事の関係で何回か来たことがありましたが、やっぱり何回来ても遠いもんは遠い！
おまけにものすごい暑さでかなりスタート時点で参ってしまってましたが、始まってから話を聞いてたら来てよかったなと思いました。

神戸芸術工科大学にあるWordCamp KOBE（神戸） 2011の入り口は分かりやすかったです。

会場に着くと既にすごい人でした。
それもそのはず参加人数は公式サイトによると700人オーバーで過去のWordCamp史上最大規模だったようです。
そんな訳でセミナー会場はずっと立ち見が出るほどの大盛況でした。

今回サイトのデザインを担当された@rie05さんの時とかものすごい人でした。

色々なセミナーの内容を見て回ろうかと思いましたが、あまりにも人が多いのとその分の熱気で立ち上がる気力も起きなかったのと、けっこう自分が見たいのがDesigner’s Cafeに集中していたのもあって最後の方までずっと同じ席で見てましたが、色々考えさせられるところもありとてもいい刺激になりました。
今回は用事もあったので懇親会には参加しませんでしたが懇親会もきっと盛り上がっていたと思うのでまたあれば参加してみようと思います。

今回もノベルティーをたくさん頂きました。シールとかあとシールとか、シールとか。

色々な意味で暑くて大変なイベントでしたがおかげでとても有意義な一日になりました。
主催者の皆さん、参加者の皆さんお疲れ様でした！

WordPressでパーマリンクからindex.phpを消す方法

今日は仕事で少し困った事態になったんですけど何とか回避する方法を見つけたのでそれを忘れないようにメモします。
その困った事というのがWPでのパーマリンクの設定。
WPのデフォルトのパーマリンクは?p=123という感じで記事のナンバリングなわけですがP=が入っているので動的ファイルという風に検索エンジンに思われちゃうかもしれません。
あと個人的に好きじゃないんです。
なのでパーマリンクには拘りたいところです。
やはり個人的に好きな構造のカテゴリ名/エントリ名/という形にしたいと思うわけです。
で、その構造にしようとしたらWPの管理画面のパーマリンク設定でカスタム構造にチェックを入れて

/%category%/%postname%/

と記述すればいいんですが、ここで詰まりました。
何とこの設定をしたあとでサーバー側の設定によって分岐する事が分かったんです。
1つはそのまま設定が通るパターン。
これは何の問題もないです。実にスマート。
で問題がもう一個のパターン。
なぜか

index.php/%category%/%postname%/

のような感じでindex.phpが表示されるパターンです。
こっちが結構やっかいでindex.phpを消してもパーマリンクが表示されないばかりかタグの検索やpunycode変換までもがキャンセルされるというひどい事になってしまいます。
(まあパーマリンクが存在しないのでここの部分が正常に動いてもたいした意味はないんですけど。)

で、色々調べた結果.htaccessファイルを変更してアップしてあげれば修正分が適用されるという事が分かりました。
実際の.htaccessの記述は以下のような感じです。
(以下の例はWPのインストール箇所がドメイン/wpの場合で、ドメイン/で表示させる場合です。)

php_flag mbstring.encoding_translation off
php_value default_charset "UTF-8"

# BEGIN WordPress

RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


# END WordPress

これでパーマリンクの設定が完了して正常に表示され、タグの検索やpunycode変換も正常に動作するようになります。
あと、1点だけ注意が必要で最後の行のRewriteRule . /index.php [L]の部分の.と/の間の半角スペースを消すと正常に動作しません。
ものすごく細かいですがここでかなりの時間格闘しましたｗ
ちなみに今回使用したサーバーはファーストサーバーさんなのでたぶんファーストサーバーさんはこの設定でいけると思います。
あと他に動作を確認しているのはヘテムル、コアサーバー、ハッスルサーバーです。他のサーバーで動くかどうかは分からないので実際に試してみる方は自己責任でやってみてください。

WordPressの最上段にでてくる空白を消す方法

結構前から気になってた問題が解決したのですっきり！
(知ってる人からしたらたぶん今更感満載な事ですけどね)

それはWPで作ったブログの最上段に出てくる謎の空白の消し方。
まあ謎でもなんでもなくて管理画面へのショートカット的な奴が出たり出なかったりという実に不安定でうざいったらないやつだったんですけどやっと消し方が分かりました。
やり方は簡単。
管理画面に入ってメインメニューからユーザーを選んで
「管理バーの表示」にある「サイトを表示する際」のチェックをはずすだけという・・・。

てかデフォルトでここにチェック入れるのやめて欲しい。
だってこっちはヘッダー部分とかに勝手に変な白場のマージンなんか入れて欲しくないわけだし。
なんにせよすっきりしてよかった！

ブログの高速化？WPプラグインで画像を外注化

今日はまたWPのプラグインの紹介なんですけど、その前に最近考えてるサイト・ブログの高速化について少しまじめに書きます。

サイトやブログを表示する時にFlashのローディングのパーセンテージが進まなくてイライラしたり、動画の読み込みが遅くてイライラする事があるんですがそんなリッチコンテンツなんかないのにサイトが重かったりすると「何でこんな普通のサイトなのにこんなに遅いねん！」って余計イライラしませんか？
僕はけっこうイライラしますｗ
これには色々原因があるんですが主に
・読み込んでる画像が重い
・サーバーに負荷がかかって処理に時間がかかっている
という2つが主な原因である場合が多いです。
要は重い画像やトラフィック増によるサーバーレスポンス低下がだいたい遅くなってる犯人だという事です。
（もちろん異論は認めますｗ）

そこでその原因を外に持っていけばアクセスが増えたりしてもブログやサイトが安全に運用できるよね！っていうのが今回の趣旨です。
前置きが長くなりましたが本編はここから。

画像を外注化（別サーバーに置いておく）するメリット
・画像のデータをブログの本体のサーバーに置かないのでサーバー容量を圧迫しない
・画像データが別サーバーから読み込まれるので本体のサーバーのサーバーレスポンス低下を招きにくい
・その結果「サーバーが落ちにくい」「アクセスが多くなっても安定してサイトやブログが表示される」
・SEOの面でも効果的（サイトの表示スピードの件で）
・移転する時もらくちん（ここがけっこう重要）

上記のようなメリットが考えられるので画像は外部のサーバーに置いておくのがいいと思います。
そこで考えるのが「どこに置くか」
今回は大御所のFlickrとPicasaにします。
これには理由があってFlickrやPicasaのような大手サービスは「サーバーが安定していてまず落ちる事がない」というのが1番大きな理由です。
せっかく画像を外注化してもそこがだめでは話になりませんからねｗ
ただ、外に置くのにその影響で管理する手間や作業工数が増えるとかえって負担になるのでそこをできるだけ減らして楽にかつ簡単に運用するためにWPのプラグインを使用します。
今回紹介するプラグインはこの2つ
・WordPress Media Flickr
・Picasa Express x2

では実際に僕が使用している方法を紹介します。

WordPress Media Flickr
こちらは主に息子達の写真を貼り付ける時に使っています。Flickrの有料アカウントを持っているので容量を気にせず撮った写真をガンガン放り込んでブログ用のやつだけ公開設定にしてsetにまとめています。
アップロードしたらFlickrが勝手にリサイズしてくれるのでサイズとかも気にせずどかどか入れれるのがいい感じです。
インストールはWordPress Media Flickrから手動でもいいですし「Wordpress Media Flickr」で検索して自動インストールでもどっちでもいいと思います。
好きなほうでやってくださいｗ

実際の埋め込み手順
プラグインをインストールしたら下の画面のようなアイコンが出ます。
Flickrに画像を放り込んで準備ができたらアイコンをクリックします。

Media Flickrアイコンをクリック

するとlightboxでギャラリーが出てくるので埋め込みたい画像をクリック

lightboxでギャラリーがでてくるよ

あとはサイズを選んで挿入ってするだけ

サイズを選んで挿入

僕の場合は500pxで埋め込んでます。
続けて他の写真を挿入ってするとどんどん画像を埋め込んでいきます。
でここが少しポイントなのですが少しでも作業効率をよくすることが大切だと思うんです。
だってそれが手間になってめんどくさいからブログしないってなったら本末転倒ですからね。
で、ブログを書く時に僕は実際こういう手順をしています。

1.写真をFlickrやPiucasaにアップロード
2.大枠の記事を書く
3.画像を一気に埋め込む（このとき場所はどこでもいいです。一番上でも一番下でも好きなところにドカンと挿入します）
4.テキストエディタに埋め込んだ画像タグをカット＆ペースト
5.テキストエディタで不要なタグを一括削除したりAltやtittle、リンク先URLの調整
6.調整済みのタグを記事内の適切な箇所にコピペする

という感じです。実際には息子達の写真は妻に撮影してもらってるので妻が撮影した画像をFlickrにアップしてもらっている間にこっちは記事の下書きをしているんですけどね。ブログを複数人で運用する場合の作業分担もできるので作業の効率もいいと思っています。
で、その埋め込んだ画像なんですがプラグインで埋め込むと不要なタグがどうしてもでてきます。
気にしなければいいところではありますが僕はすごく気になるのでテキストエディタでさくっと一括削除してやります。
これがブラウザで入力でする時に比べて作業スピードが格段に違いますのでかなり作業効率がいいです。
こだわりたい方はぜひ試してみてください。

余談ですが旅行先などでの移動中にはポメラでブログの記事を下書きしたりする事もあります。
画像と記事を別のタスクにするとどんな場所でもブログを書く準備ができて快適になってきますよ。

Picasa Express x2
こちらもインストールはPicasa Express x2から手動でもいいですし「Picasa Express x2」で検索して自動インストールでもお好きなほうでどうぞ。
Picasaは有料アカウントではなくて無料アカウントなんですが、こちらは画面のキャプチャとかの画像用で（息子達の写真以外ですね）使うので1024 MBも容量あればまず足りなくなる事はないでしょう。
これまではWP入れてるサーバーにアップしてましたが上記のような事を色々考えて外に出す事にしました。
ちなみにこの記事の画像はPicasaに入れてます。
運用手順は以下のとおり

インストールするとPicasaのアイコンが出てくるのでこれをクリック

Picasaのアイコンをクリック

Picasaの方で公開用のギャラリーを用意しておき、画像はそこに入れておきます。

ギャラリーを選択

画像を選んでInsertをクリック

あとはFlickrの時同様に画像をどんどん挿入してテキストエディタで編集すればOK。
こんな感じで用途別に画像を保管するエリアを分けて運用する感じにしています。
これでアクセスが増えてもサーバーに負担が増えにくくなったので快適にブログを運用できますね。
まあこのブログがそんなにアクセス増えることもないんですけどｗ

勢いで書いてたらえらい長文になってしまいました。
最後まで読んでいただいてありがとうございます。

WPの入力支援プラグイン「AddQuicktag」

ちょっと便利なWPのプラグインを見つけたので紹介します。
今回紹介するプラグインはWPのエントリ画面で入力支援をしてくれる機能を追加できる「AddQuicktag」っていうプラグイン。
使い方によってはかなり便利です。
まずはインストール。
今回はFTPとか使うのめんどくさかったのでプラグインディレクトリからの追加。
まずはプラグインの新規追加から「AddQuicktag」で検索

するとこんな感じで結果に表示されるのでインストールを実行。

はいこれでインストールは完了。
おれはFTPでインストールしたいんだよ！っていうこだわりがある人はこっちから手動ダウンロードしてください。
AddQuicktag

インストールが完了したので設定を開始。
プラグインの中からAddQuicktagを確認して設定をクリック

するとこんな画面が出るのでラベル名とかタグとかを設定します。（自分でCSS当てた要素とかを入れます。）

するとエントリ画面上部にさっき追加した要素がボタン化されて置いてあります。
これをクリックするとさっき登録したタグが自動で挿入されるっていう仕組み。

以前紹介したMTの入力支援プラグインCustomEditorButtonのWP版みたいな感じですね。
これならHTMLとか詳しくないお客さんにもこっちで指定した構造の記事を書いてもらいやすくなって仕事にも使えるっていうけっこういい感じの代物です。
気に入った方は自己責任で入れてみてね！

WordPressのプラグインでシンタックスハイライト

いきなりですが、シンタックスハイライトをでろぐでも実装しようと思いました。
というのもあまりコードとか公開しないしシンタックスハイライトとか使う機会ないしめんどくさいしいいかなと放置してきたんですが、自分用のメモ記事とかでコードを書くときにシンタックスハイライトがないほうが逆にめんどくさいという事を気付いたのでちょっと実装してみました。

で、早速実装するにあたって色々調べてみたんですが
・手動で対応
・プラグインで対応
の2パターンでできそうな感じ。ここは迷わずプラグインで対応す売る事に。
なぜかというと手動がめんどくさいから。プラグインのほうが手っ取り早いｗ
で、いいプラグインないかなって探してたんですけど色々ありすぎて訳わかんなくなってきたのでとりあえずSyntax Highlighter and Code Prettifier Plugin for WordPressていう長い名前のプラグインを入れてみました。
ちなみに最近はWPのプラグインはFTPでアップロードせずに「プラグイン→新規追加」から検索していれるようにしてます。
手動アップロードは手間がめんどくさいのでｗ
（さっきからめんどくさいばっかりですな）

で、インストールも難なく終わりましたが使い方がよく分かんなかったので教えてGoogle先生。
調べた結果こんな感じの記述でいいようです。

これでコードってわかるようになりました。
コピペもしやすくなって自分用に最適化されてきていい感じですｗ
brush:[html]のhtmlの部分は各コードの種類に合わせて以下から選択してあげましょう。

Bash/shell			[bash][shell]
C＃					[c-sharp][csharp]
C++			[cpp][c]
CSS			[css]
Delphi			[delphi][pas][pascal]
Diff			[diff][patch]
Groovy			[groovy]
JavaScript			[js][jscript][javascript]
Java			[java]
Perl			[perl][pl]
PHP			[php]
Plain Text			[plain][text]
Python			[py][python]
Ruby			[rails][ror][ruby]
Scala			[scala]
SQL			[sql]
Visual Basic		[vb][vbnet]
XML			[xml][xhtml][xslt][html][xhtml]

あと、オプションも付けられるので状況にあわせて付けましょう。

ツールバーの表示・非表示	[toolbar: false][toolbar: true]
指定行の強調表示		[highlight: [1, 3]]
行番号の表示・非表示		[gutter: false][gutter: true]
行番号の初期値変更		[first-line: 10]
クリックで詳細表示		[collapse: true]
URLリンク有効・無効		[auto-links: false][auto-links: true]

これでよりブログをコードのメモ帳代わりに使えるぞ！

WordPressのアイキャッチ画像の使用方法【基本＆応用】

WordPress3になって使えるようになった新機能で「アイキャッチ画像」が便利なんですが、ちょっとつまづいた点があったのでメモ。
まずアイキャッチ画像が何に使うものかですが、個人的な解釈では「エントリ用のサムネイル」が一番分かりやすい使い方ではないかなと思います。（異論は認めますｗ）
ブログに彩りを加える要素として使えるこのアイキャッチ画像はWodpressを更新したらデフォルトでは投稿タグの下に表示されるようになります。

こんな感じで表示されるようになります。

のはずですが、例外があります。それは

テーマにアイキャッチ画像を使いますよという宣言がないとアイキャッチ画像の枠自体がエントリ画面に表示されない

という点です。
こないだ作った子供の遊び場でもアイキャッチ画像の設定を使って作ったんですが、最初にバージョンアップした時にあったはずのアイキャッチ画像の枠が自作テーマにしたら使えなくなったのでもしやと思い色々調べてみるとやっぱりテーマの中にアイキャッチ画像を使いますよという宣言が必要だっていう事が分かりました。
テーマファイルの中のfunctions.phpに

function mysetup() {
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

を記述するとエントリ画面内にしっかりアイキャッチ画像の枠が戻ってきました。
これでテキストリンクをクリックして画像を設定さえしてあげればアイキャッチ画像が表示される準備が出来ました。

エントリ内の「アイキャッチ画像として使用」をクリックしてアイキャッチ画像を設定できます。

これで基本設定が終わったのであとはそのアイキャッチ画像を「どこに使うのかの指定」をしてあげます。
基本は以下タグをテーマのテンプレート内に入れたらおｋ

<?php the_post_thumbnail(); ?>

なんですが、ここではもう一歩踏み込んだ使い方を紹介します。
例）子供の遊び場での実際の仕様
・TOPページには指定したサイズのサムネイルを表示
・固有ページには元ファイルサイズの画像を表示

こんな感じでの使用を想定します。
ここでのポイントは「一回画像をアップロードしてアイキャッチ画像に登録するだけでTOPと固有ページに指定したサイズで設定が反映されるようにする」という事。だってサムネイルとオリジナルサイズの画像を2パターン作るのめんどくさいでしょｗ
で、ネットで調べてみたら

<?php the_post_thumbnail( array(200,200) ); ?>

て感じの記述で横幅200px縦を最大200pxにWPがリサイズしてくれて表示できるという事が判明。
早速この記述をindex.phpに設定して、single.phpの方にはサイズ指定のない方を記述します。
これでしようとしていた事が実現できました。
意外と簡単でよかったｗ

ちなみに今回例で使用したテーマは無料で使えるブログテンプレート！のサイトで配布してますので興味ある方は使って見てください。

WPでphpのreadfileが読み込まない不具合を回避する方法

今日は少し仕事で困った事があったので忘れないようにメモ。
まず前提としてページ内にあるサブナビだけをサイト内の共通要素として使用したかったのでいつも使っているphpのreadfileで対応しようとしたわけです。
ただ今回はその埋め込む対象が静的なHTMLファイルではなくWPのページ部分に追記する場合だったのがそもそもの事の発端です。

いつもやってる方法(一応メモ)
htmlファイルでもphpが読み込めるように.htaccessに「AddHandler php5-script .html」と記述しphpを動作させるようにします。
今回の場合はサーバーがヘテムルだったのでこんな感じでおｋ。
もちろんphpのバージョンも既存の環境にあう設定です。
次に読み込むファイルを作成。今回はサブナビなのでsubnavi.htmlとでもしておきます。
subnavi.htmlには以下のみを記載するとします。

めにゅー
めにゅー
めにゅー

で、埋め込む側のファイルに絶対パスで
<? readfile("http://xxx.cm/subnavi.html"); ?>

と記載。すると埋め込みを指定したページにsubnavi.htmlの記述が反映されて埋め込み完了。
動作も確認してきちんと埋め込まれている事が確認できました。

と、ここまではいつもどおりにうまく行ってたんですがWPのページ内にこの記述を埋め込むとなぜか反映されない・・・・・。
ためしに埋め込んだページと全く同じ記述の静的なHTMLファイルを作りアップロードしてみると反映されている・・・。
という訳でこの時点でもうお手上げでした。
同じ記述をしているのにHTMLファイルとWPのページ内では動作が違うなんて・・・プログラムがよくわかんない僕ではここでお手上げです。
これは困ったと思いTwitterで愚痴っているとふとアイデアが浮かびました。(ここからが本題ですｗ)

「あのプラグインを使えばreadfileと同じような動作をWP上で実現できるんじゃね？」

そのプラグインというのがContact Form 7です。
このContact Form 7というプラグインはその名のとおりWP上で簡単にフォームが設置できるようになるプラグインなのですが、
このプラグインを使ってサブナビを実装しちゃいましたｗ

使い方は簡単でプラグインの設定画面から新規でフォームを作成し、フォームの部分にsubnavi.htmlに記述してある

めにゅー
めにゅー
めにゅー

をまるコピすればおｋ。
あとはプラグインで指示されたコピペする記述をWPのページ内に貼り付けるだけ。
結果からいうとこっちの実装の方がWPでは簡単ですね。
フォームとかでめんどくさい時とかにたまに使ってたこのプラグインがこんな形で有効活用できるとは思ってもいませんでした。

これを応用すればサイト内のちょっとした共通要素をまとめて管理できる素晴らしいプラグインにはやがわりです！
もちろんフォームにも使えるのでカバーできる範囲がとっても広い。
これからはインストール時の基本メニューに決定です！

Twitter公式「Twitter Button」のちょっとまとめ+あるふぁ

先日Twitterの公式ツイートボタン「Twitter Button」がリリースされたので早速試してみました。
まずは実験という事ででろぐに実装してみる事にしましたがTwitter上でWordpressのプラグインTweetButtonが紹介されていたので早速入れてみました。
このプラグインはWPのほかのプラグインと同様にダウンロードしてきてWPのプラグインディレクトリにフォルダごとアップしてから、管理画面にログインしてプラグインの有効化をすれば使用できます。
まあ導入は至って簡単です。
導入後の画面がこちら

前からあるTOPSYのツイートボタンの横に同じような体裁でボタンが追加されました。
ためしにボタンを押すとこんな感じに。

Twitterにログインしているとボタンをクリックするとそのままツイートできる感じです。
まあ便利。
短縮URLはt.coが使われます。

でもよく考えると本家版を使っていなかったのでついでに調べてみました。
http://twitter.com/goodies/tweetbutton
こっちを使うとボタンの表示やツイート内の表示テキストURLや言語の選択などがカスタマイズでき、あとオススメフォローユーザーのアカウント表示までコントロールできます。
使い方次第ですが、例えばキャンペーンサイトなどに表示させてハッシュタグを埋め込んだり、意図的にRTを促進させたり、運営者のアカウントのPRが出来たりするのでけっこう便利かも。無料で利用できるので導入しやすいですし。
実装したいだけならWPのプラグインとかで簡単にできていいと思いますがカスタマイズしたいなら公式の方を使った方がいいような気がします。
あくまで個人的な意見ですけどね。

おまけ
このTwitter Buttonの事を調べていたら知らなかった少し便利な事が分かったので追記します。
それはTwitterのロゴやアイコンや公式のボタンがあるということです。(ボタンは今回のTwitter Buttonの事ではなく単純な画像の分ですよ)
Twitterロゴとアイコン
Twitterボタン
利用シーンによりますが使う場合はこっちを使った方がいいかも。
もちろん利用する場合は利用ガイドラインをしっかり把握した上で使うのは当然です。