*

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になったりしましたので、テンプレート内に日本語を入れておいて文字コードの変更を確実にしました。具体的にはテキトーな場所に、

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

Google Adsense を埋め込む

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

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

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

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

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

Google Analytics を埋め込む

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

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

さらにfooter.phpに

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

うごくひと を埋め込む

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

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

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

としました。

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

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

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

としてリンクしました。

mixiチェックを埋め込む

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

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

などとしています。

GREE いいね! を埋め込む

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

としました。

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

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

ad

公開: | 更新: | WordPress , ,

ad

関連記事

新着記事

薪割り機のエンジン、しばらくぶりの火入れ式

去年買って大活躍してくれたエンジン式薪割り機。そこまで長く寝か...

記事を読む

2016年フォルクスワーゲン冬のキャンペーンの写真が素晴らしい

フォルクスワーゲンジャパンの今年の冬支度を呼びかけるサイトの写...

記事を読む

薪ストーブの煙突掃除

薪ストーブの煙突掃除に挑戦です。 屋根に登っての作業がベ...

記事を読む

ワーゲンバスはやっぱり「遊び」のシンボルだ

ワーゲンバス、安定して広告に使われてますね。今は売られてないクルマなの...

記事を読む

過去記事を検索できる! buslog Antenna をアップデートしました

めっちゃ久しぶりに、空冷ワーゲンブログを巡回して一覧にする『b...

記事を読む

コメント、お待ちしてます

  1. 通りすがり

    はじめまして、ktai styleをカスタマイズしていて通りかかりました。
    色々参考にさせていただきました!それで人気記事トップ10について質問させていただきたいのですが、
    フロントページの任意の場所に人気記事トップ10へのリンクを貼る場合は、ここでfooter.phpに記述するとされているものをそのまま任意の場所に書けば良いのでしょうか?
    トラッキングコードのような役割をしているからfooter.phpなのかなと思ったのですが、記事の通りにすると全てのページにPopular postsへのリンクが出現してしまったので・・
    素人質問でもうしわけないですが、よろしければご教授下さい。

  2. masahiro

    フロントページなら home.php だと思います。

    テーマによって home.php がない場合があるそうなので、
    その場合は index.php ですね。

  3. Pingback: Ktai Style で携帯用ブログのカスタマイズ(初歩) | Country Netlife plus

  4. Pingback: http://www.buslog.net/archives/2010/12/ktai-style-customize-template.html | 大塚智子

コメントを残す

メールアドレスが公開されることはありません。

ad

薪割り機のエンジン、しばらくぶりの火入れ式

去年買って大活躍してくれたエンジン式薪割り機。そこまで長く寝か...

2016年フォルクスワーゲン冬のキャンペーンの写真が素晴らしい

フォルクスワーゲンジャパンの今年の冬支度を呼びかけるサイトの写...

薪ストーブの煙突掃除

薪ストーブの煙突掃除に挑戦です。 屋根に登っての作業がベ...

ワーゲンバスはやっぱり「遊び」のシンボルだ

ワーゲンバス、安定して広告に使われてますね。今は売られてないクルマなの...

過去記事を検索できる! buslog Antenna をアップデートしました

めっちゃ久しぶりに、空冷ワーゲンブログを巡回して一覧にする『b...

→もっと見る

  • follow us in feedly
  • my bus

    buslogは、Volkswagen Type2(通称ワーゲンバス、略称バス)に乗るmasahiroのサイトです。バスの日々のメンテナンスやドライブ、試したアイテム、バスやクルマ一般についての情報を主に取り上げたブログがメインです。

PAGE TOP ↑