どや！？KtaiStyleをカスタマイズするときのポイントと注意点

今更になりますが、「Ktai Syle」をそこそこカスタマイズ。携帯サイトまでフルで対応した案件が無かったので、楽しく勉強させてもらいました。以下を網羅しておけば、次回はスピードを上げて制作できそうです。

はじめに

Ktai Style は、あなたの WordPress ウェブログを日本の携帯電話対応 (5キャリアおよびスマートフォン対応) にするプラグインです。WordPress + Ktai Style だけで、携帯ブログが構築できます。
WordPress Plugins/JSeries » Ktai Style (携帯対応プラグイン)

そんな便利なプラグイン Ktai Style ですが、いつもwebサイトを制作した際にとりあえず入れておくことが多かった自分。ガッツリカスタマイズをやったことがないので、どこまで使いこなせるのか不安でしたが、ポイントを押さえておけばPCサイトのテーマ編集のように簡単にできました。
そのポイントだけをサラッとまとめてみました。

カスタマイズするテーマを用意
インラインCSSに対応
Ktai style テーマディレクトリのパス
header.phpで全体の色や機能指定
投稿・固定ページの画像サイズ変更
外部サイトへのリンク
外部サイトの画像を直接読み込みできるように変更
投稿の記事表示
カスタム投稿タイプの記事表示
アーカイブやカテゴリページへのURL
まとめ

①カスタマイズするテーマを用意

「/ktai-style/themes」内に予め6つのテーマが用意されています。カスタマイズしたいテーマを「/wp-content/ktai-themes」フォルダにコピーしましょう。
※ktai-themesに保存しないと、バージョンアップの際に消えてしまいます
※ktai-themesが無い場合は新しく作成

テーマのフォルダ名を書き換えて、テーマ内「style.css」のテーマ名も書き換えます。

/*
Theme Name: テーマ名（日本語文字列OK）
Theme URI: 配布元 URI
Version: 1.0.0
Description: テーマの説明（日本語文字列OK）
Author: 作成者（日本語文字列OK）
Author URI: 作成者URL
Requires: Ktai Style 2.0.0, WordPress 2.6
License: GPL v2 or later
*/

ちなみに、オススメのテーマは「default」です。
テーマを改造するにあたって下記を読んでおくと良いです。

②インラインCSSに対応

各社3G端末は、限定的ながらスタイルシートに対応しています。
ただし、ガラケー用のホームページを作る場合、ドコモの古い端末が外部CSS形式の表記に対応していないため、style=”xxx”といったインラインCSS形式で記述を行わなくてはなりません。
Ktai Style では「 ks_use_appl_xhtml(); 」と書けば、インラインCSSに対応できます。

<?php ks_force_text_html(); ?><html>
<?php ks_use_appl_xhtml(); ?>
<head>
<meta http-equiv="Content-Type" content="<?php ks_mimetype(); ?>; charset=<?php ks_charset(); ?>" />

③Ktai style テーマディレクトリのパス

Ktai style テーマ内の画像を読み込む場合は、テンプレートタグ「 ks_theme_url(); 」を使います。

<?php ks_theme_url(); ?>/images/logo.gif

④header.phpで全体の色や機能指定

header.phpを開くと以下のようなコードが記述されています。

<?php global $ks_settings;
$ks_settings = array(); // erase array for security
$ks_settings['h2_style'] = '';
$ks_settings['list_pages'] = 'sort_column=menu_order,post_title';
$ks_settings['ol_max'] = 9;
$ks_settings['ol_count'] = 1;
$ks_settings['date_color'] = ks_option('ks_date_color');
$ks_settings['time_color'] = ks_option('ks_time_color');
$ks_settings['author_color'] = ks_option('ks_author_color');
$ks_settings['comment_color'] = ks_option('ks_comment_color');
$ks_settings['edit_color'] = ks_option('ks_edit_color');
ks_page_title();
?>

このコードは独自のテンプレートタグです。
携帯サイトはインラインCSSなので、毎回同じ記述をしなければいけません。
複数のページに同じものを書くと、修正するときにページ分だけ手を加えなければならない…。それをテンプレートタグで管理してしまおうといった感じです。

例えば…「全ページのh2にCSSを追加したい場合」

$ks_settings['h2_style'] = '';

↓↓↓↓↓

$ks_settings['h2_style'] = ' style="background-color:#0675BD;color:#ffffff;"';

に変更することで、テーマ内に記載されている h2 に、
背景色「青」の文字色「白」のインラインCSSをあてられます。

表示側（index.php）を見ると、入力されているときにインラインCSSが入るようになっています。

<div<?php if (isset($ks_settings['h2_style'])) {
	echo $ks_settings['h2_style'];
} ?>><h2><?php single_cat_title(); ?></h2></div>

同じCSSを使う場合は、非常に便利ですね。

⑤投稿・固定ページの画像サイズ変更

管理画面の固定ページからの投稿において、画像は「/wp-content/uploads」内に保存しないと表示されません。また、普通に投稿した画像は、KtaiStyleに実装されている機能によって自動的に縮小されるようになっています。縮小サイズは、長辺96pxの比率固定で縮小されるため、今の時代ではサイズが結構小さいです。QVGA（240px）サイズの端末からのアクセスを想定して以下のどちらかの方法で修正しましょう。

1） /ktai-style/inc/shrinkage.phpを修正

42行目あたりの「 THUMBNAIL_MAX_SIZE 」を240に修正します（バージョン 2.0.5）。

const THUMBNAIL_MAX_SIZE = 240;

2）テーマのfunctions.phpを修正

※無い場合は新しく作成

<?php
function my_thumbnail_max_size() {
        return 240;
}
add_filter('ktai_thumbnail_max_size','my_thumbnail_max_size');
?>

携帯専用画像が生成されるタイミングは、imgタグを埋め込んで、更新を掛けた時点で、画像が生成されます。一度登録した画像は削除して再アップロードしなければなりません。
※既に投稿されている記事やページの画像は小さいままです。

「一度登録した画像を削除」は以下を参考に。

【生成される画像の種類】

元の画像（画像名.拡張子）
元の画像と同サイズのPNG画像（画像名.png）
元画像を「指定サイズ」に縮小した画像（画像名.ktai.拡張子）
縮小された「指定サイズ」のpng画像（画像名.ktai.png）

⑥外部サイトへのリンク

携帯から外部サイトへのリンクをクリックすると「PC 向けサイトを訪問しようとしています」と表示されてワンクッション入ります。これをワンクッション入れずにリンク先を表示させるには、以下のどちらかの方法で解決できます。

1) テーマの「functions.php」に追記

※無い場合は新しく作成

<?php
function ks_direct_external_link($link_html, $href, $label) {
    return '<a href="' . attribute_escape($href) . '">' . $label . '</a>';
}
add_filter('external_link/ktai_style.php', 'ks_direct_external_link', 90, 3);
?>

2) 管理画面からドメイン指定

管理画面の「Ktai Style設定」で直接リンクを貼るサイトに、除外したいのドメインを記述します。
例）GoogleMapの場合

⑦外部サイトの画像を直接読み込みできるように変更

外部の画像を直接読み込まない仕様になっているので変更したい場合に、以下を追記してください。

<?php
function ks_keep_amazon_image($replace, $orig, $src) {
    if (preg_match('#^http://www.doya-doya.com/images/#', $src)) {
        $replace = $orig;
    }
    return $replace;
}
add_filter('image_to_link/ktai_style.php', 'ks_keep_amazon_image', 10,3);
?>

「 http://www.doya-doya.com/images/ 」の部分を変更する事で、対象となるドメインを変更可能。

⑧投稿の記事表示

投稿に登録された記事を3件表示

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<span><?php the_time('y/m/d'); ?></span>
	<a href="<?php the_permalink();?>"><?php the_title(); ?></a><br />
<?php endwhile; endif; ?>

⑨カスタム投稿タイプの記事表示

カスタム投稿「news」に登録された記事を3件表示

<?php query_posts('post_type=news&showposts=3');
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<span><?php the_time('y/m/d'); ?></span>
	<a href="<?php the_permalink();?>"><?php the_title(); ?></a><br />
<?php endwhile; endif;
wp_reset_query(); ?>

⑨アーカイブやカテゴリページへのURL

URLパラメータをつけてあげることで、カテゴリ一覧ページにリンクを貼ることができます。

【最新のコメント】
http://www.***.jp/?menu=comments

【年月アーカイブ】
http://www.***.jp/?menu=months

【カテゴリ一覧】
http://www.***.jp/?menu=cats

【タグ一覧】
http://www.***.jp/?menu=tags

【ログイン】
http://www.***.jp/wp-content/plugins/ktai-style/login.php

まとめ

今回制作したwebサイトのボリュームはそれほど大きくなかったので、今後注意点が増えれば追記したいと思います。
本家サイトを見れば細かい所まで書いてあるので、これからやるぞ！って方は一読をお勧めします。
WordPress Plugins/JSeries » Ktai Style サイト設定とテンプレートの改造