Ktai Style のテーマ作成と小技8つ

WordPressで構築してるブログを簡単に携帯対応サイトにしてくれる素晴らしいプラグイン、Ktai Style。デフォルトでテーマが用意されてますが、せっかくWordPressでブログを書いてるんですから携帯サイトのデザインもカスタマイズしたくなるところです。

一からテンプレートを作るのでなく既存のものを変更するのなら意外と簡単にできましたので、そのメモです。

はじめに

変更の方法は基本的には公式マニュアル、Ktai Style サイト設定とテンプレートの改造に載ってます。

テーマはデフォルトのテーマを変更するのでなく、独自のテーマを作ってカスタマイズします。

wp-content/plugins/ktai_style/themes から公式テーマをフォルダごとコピーし、wp-content/ktai-themes/ ディレクトリを作成し、そこに独自テーマを置きます。具体的には、wp-content/ktai-themes/my-theme となります。僕は動作がシンプルな Redportal 2.0.0 から作りました。

元の公式テーマと区別するために必ず wp-content/ktai-themes/my-theme/style.css の Theme Name 等を編集します。

テンプレート作成後スクリーンショットを撮り、your-theme/screenshot.png を置いておけば管理画面でさらにわかりやすく、また満足度も上がります（笑）　(サイズは元々が 240 x 600 ピクセルだったので僕もそれに倣いました)

また動作確認用にはドコモのiモードHTMLシミュレータIIやFIrefox のアドオン、FireMobileSimulatorなどを使いました。

さて、ここから少しずつカスタマイズしていきます。

テンプレートを確実にUTF-8にする

秀丸エディタ等を使って文字コードをUTF-8に変更・保存しても再度開けばShift-JISになったりしましたので、テンプレート内に日本語を入れておいて文字コードの変更を確実にしました。具体的にはテキトーな場所に、

<?php /* UTF-8にする用日本語 */ ?>

というコメントを入れておきました。

Google Adsense を埋め込む

Google Adsense から「モバイル コンテンツ向け」のコードを取得します。

• デバイスタイプ：全ての携帯電話
• 広告ユニット：お好みで
• 形式：お好みで
• マークアップ：テンプレートに合わせます。redportalならchtml
• 文字エンコード：自動検出かUTF-8
• スクリプト言語：PHP

生成されたコードをコピーして adsense.php としてUTF-8で保存し、使用しているKtai Styleのテーマディレクトリに放り込みます。あとはsingle.phpに

<?php include("adsense.php"); ?>

を追記。少し時間が経つのを待って、携帯電話でアクセスして確かめます。

広告が文字化けした場合は adsense.php が UTF-8 になってないので、上記と同じく日本語のコメントを入れておきます。

Google Analytics を埋め込む

Google Analytics の公式アナウンス通りに作業します。

Google Analytics から発行されるコードを、header.php のの直前に埋め込みました。また、 $url = のあとにドメインを入れないと動作しませんでした。

<?php
  // Copyright 2009 Google Inc. All Rights Reserved.

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $GA_ACCOUNT = "MO-XXXXXXXX-X";
    $GA_PIXEL = "ga.php";
    $url = "http://www.your-domain.com/";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $referer = $_SERVER["HTTP_REFERER"];
    $query = $_SERVER["QUERY_STRING"];
    $path = $_SERVER["REQUEST_URI"];
    if (empty($referer)) {
      $referer = "-";
    }
    $url .= "&utmr=" . urlencode($referer);
    if (!empty($path)) {
      $url .= "&utmp=" . urlencode($path);
    }
    $url .= "&guid=ON";
    return str_replace("&", "&amp;", $url);
  }
?>

さらにfooter.phpに

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src="<?= $googleAnalyticsImageUrl ?>" />

とし、ルートディレクトリに ga.php をアップロードして設置完了です。

うごくひと　を埋め込む

うごくひとに登録し、右上の『HTMLタグ発行』へ移動、PHP のコードをコピーし、footer.php に貼りつけて設置完了です。

関連エントリーを埋め込む

similar postsプラグインを導入のうえ、single.phpに

<br />
<img localsrc="44" alt="" />関連エントリー<br />
<font size="-1">
<?php similar_posts() ?>
</font>
<br />

としました。

人気記事トップ10ページを作る

Top 10 プラグインにて人気記事ページを作ることができます。

<?php ks_header();
global $ks_settings;
?>

<h1>人気記事トップ10</h1>
<font size="-1">
<?php if(function_exists('tptn_show_pop_posts')) tptn_show_pop_posts(); ?>
</font>

<?php ks_footer(); ?>

上記ソースを menu_popular.php　とし、UTF-8で保存してテーマディレクトリにアップロード。footer.php から

<?php ks_ordered_link('', $max, ks_blogurl(KTAI_NOT_ECHO) . '?menu=popular', __('Popular posts'));
?>

としてリンクしました。

mixiチェックを埋め込む

mixi のデベロッパー登録をし、mixi Developer Center から Developer Dashboard へアクセス、上部の mixi Plugin → 新規サービス追加　から許可ドメインリスト等を設定し、チェックキーを発行してもらいます。

<form action="http://m.mixi.jp/share.pl?guid=ON" method="POST" >
<input type="hidden" name="check_key" value="your-mixi-check-key" />
<input type="hidden" name="title" value="mixi" />
<input type="hidden" name="primary_url" value="http://your-domain.com<?php the_permalink(); ?>" />
<input type="hidden" name="mobile_url" value="http://your-domain.com<?php the_permalink(); ?>" />
<input type="submit" value="mixiﾁｪｯｸ" />
</form>

ケータイは input type=”image” が使えないらしいので、mixiチェックの画像を png と gif で保存したあと簡単に、

<img src="mixi-check.gif"> →
<input type="submit" value="mixiﾁｪｯｸ" />

などとしています。

GREE いいね！ を埋め込む

GREE Developer Center の携帯電話版サイト向けコードを参考に、　

<a href="http://m.gree.jp/?mode=share&act=write&url=http://www.your-domain.com<?php the_permalink(); ?>&button_type=0&button_size=16&guid=ON"><img src="gree.gif"></a>

としました。

一つ一つはどれも簡単な作業で、これで自分のケータイサイトをぐっと自分好みにカスタマイズすることができました。

プラグイン作者さまに感謝！

こちらもどうぞ！

Ktai Style のテーマ作成に使った絵文字一覧

Ktai Style にてこのブログをケータイ対応にしています。使用してる独自テーマはデフォルトテーマを少しカスタマイズした程度ですが、ケータイサイトらしくいくつか絵文字を使ったのでメモしておきます。 絵文字の挿入のしかたは、Ktai S...



WordPress の有料プラグイン、WPtouch Pro を買ってみました

自分のケータイを Xperia にしたのを機に、スマートファンからのアクセスを Ktai Style から WPtouch に任せることを検討しました。 無料版でもホントに十分なんですが、円高を理由に有料版の WPtouch Pro をえ...



ケータイ版buslogのURLが変わりました

ブログシステム変更に伴い、buslog ケータイ版は以下のURLに変更しました。 http://www.buslog.net/ （ケータイからアクセスすると自動で切り替わります） 今までと比べて見やすくなってると思います。画像はケータイ用...



WPtouch Pro のテーマを少しカスタマイズ

初めて購入した WordPress のプラグイン、WPtouch Pro は、テーマを少しだけカスタマイズして使ってます。 せっかくですのでその方法をメモ。 知ってると便利な WPtouch Pro の機能 テーマをカスタマイズする際に便...



WPtouch Proで、スマートフォン用テーマにサムネイルつきで関連記事を表示する

WordPress で書いてるブログの関連記事のところにサムネイルと概要を表示できましたので、WPtouch Pro で表示してるスマートフォン用テーマも同じようにしたいと思います。 基本的には以前書いたエントリー『WordPressの関...