それは、どういうものですか？

WordPressのURLとして使われる投稿スラッグ。これは、標準だと投稿タイトルをURLエンコードしたものが自動的に使われて、やけに長くなるしかっこ悪い。

んで、ぼくは投稿タイトルを逐一英訳して投稿スラッグとして入力しているんだけど、ボキャ貧なので通じるかどうかわからない怪しげな英語になってしまう ＞＜

そこで、自動的に投稿タイトルを英訳してくれて、それが投稿スラッグになってくれると素敵だなと思い、WordPressのプラグインを作ってみました。

インストール方法と使い方

<?php
/*
Plugin Name: Slug translate J to E 
Plugin URI: http://creco.net/
Description: 投稿タイトルの日本語をそのまま投稿スラッグにするのではなく、Google AJAX Language APIで英訳したものを投稿スラッグにします
Author: Shintaro Inagaki
Version: 1.0
Author URI: http://creco.net/
*/

function slug_translate_j_to_e($title) {

    $translateApiUrl = 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q='.urlencode($title).'&langpair=ja%7Cen';
    $response = file_get_contents($translateApiUrl);  

    $parsedJson = json_decode($response);

    if(isset($parsedJson->responseData->translatedText)) {
        $title = $parsedJson->responseData->translatedText;
    }
    $title = strtolower($title);
    $title = str_replace(' ', '_', $title);
    $title = preg_replace('/[^%a-z0-9_-]/', '', $title);

    return $title;
}

add_filter('sanitize_title', 'slug_translate_j_to_e', 9);

?>

上のコードを適当なファイルに保存（ slug-translate-j-to-e.php とか適当な名前つけてね）して、WordPressのプラグインフォルダ（ /wp-content/plugins/ 以下）にアップロードすれば、プラグイン管理画面から「使用する」が選べるようになります。

後は、普通に投稿すれば自動的に投稿タイトルを翻訳したものが投稿スラッグとして使われてると思います。

翻訳を確認したいという場合は、「下書きとして保存」とし、その後に投稿スラッグを編集すれば、半手動で利用できるかと。

やっていること

Translation API のクラス リファレンス – Google AJAX Language API – Google Code をRESTで使用しています。

タイトルをAPIに投げて、JSONで帰ってきたものを処理。

処理は、上から順番に、大文字を小文字にする → スペースをアンダースコアに変換する → 小文字英数字とハイフン、アンダースコア以外の文字を削除する といった内容。

注意点

Google の翻訳は期待しないほうがいい。

昔は条件分け、繰り返しの記述ばかりで、テンプレートがカオスになりがちだったけど、テンプレート関数が充実してきてかなり楽になってる印象。

例えば、スレッド形式にできたり複雑化していたコメントも、

<?php wp_list_comments();?>

だけで表示され、後はスタイルシートで味付けするだけでお手軽ですね。

本題のテーマ作り、

Blueprint CSSはCSSのフレームワーク（ブラウザ間の表示差違をなくすリセットや、グリッドデザインが簡単にできたり便利！）なんですが、それをWordPressのテーマにあわせると幸せになれそうなのでやってみた。下にポイントをいくつか。

デフォルトテーマを使う

公開されてる自由に使えるテーマって沢山あるんだけど、国際化されてなくて日本語に対応させるだけで面倒。なので、デフォルトテーマを新しいテーマフォルダにコピーして使うのが楽。

不要なファイルを削除

私の場合は、

• index.phpを基準にsingle.php、archive.php、search.php、comments.php、footer.php、header.php、sidebar.php、page.phpの各テンプレート
• 国際化ファイルをフックするfunctions.php
• 日本語用ja.mo、ja.po、kubrick.pot
• スタイルシートとしてstyle.css

これくらいしか使わない。

必要になったときにあとから足せばいいやって考え。

Blueprint CSSの設置

テーマフォルダ以下にcss/blueprint/ としてファイルを置いた。

呼び出しは、header.php に

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

ってデフォルトのスタイルシートを呼び出してるところの前に挿入すればok。

デザインレイアウトの変更

header.php （footer.phpで閉じてね）に

<div class="container">

って記述すれば、Blueprint CSSのグリッド構造スタートの合図。containerクラスの幅が標準で950pxなので、それが気に入らない場合は、style.css のほうで上書き定義してやる（Blueprint CSS本体を修正しない！）。

メインコンテンツとサイドバーを分けるためのグリッド構造はお好みで、
index.php（single.php、archive.php、search.phpも同様） では、

<div class="span-14 colborder">
（中身）
</div>

sidebar.phpでは、

<div class="span-5 last">
（中身）
</div>

これでおしまい。簡単でしょ。

CSSの調整

あとは、style.css で必要ないものを削除して（幅の絶対指定など）、見た目の調整に移ればいい。

Blueprint CSS化しちゃえば、今後新しい異端なブラウザが登場してもCSSハックとか覚える必要なく、Blueprint CSSをバージョンアップさえすればいいし、
何より、どこでも同じCSSが通用するのが非常にキモチいい。おすすめです。