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

01 12月

  • このエントリーをはてなブックマークに追加

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

はじめに

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

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

目次

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

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

「/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 サイト設定とテンプレートの改造

あと、携帯サイトすら作ったことがない方はこちらで勉強するのが良いですよ!
永久保存版!?携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき)

コメント

  1. sato より:

    こんにちは、ktai styleのページ分割についてなのですが、無効にする方法をご存じないでしょうか?
    古い端末だと、タイトルバナーの直後で分割が入ってしまうこともあります、、、。
    この点についての情報が見つからないので、ここで質問させていただきました。

  2. のぶ より:

    satoさま

    コメントありがとうございます。
    ktai styleのページ分割は端末に応じて、
    テキストのバイト数で自動調整されるようです。

    ▽参考
    http://wppluginsj.sourceforge.jp/ktai_style/

    これを無効にすると、端末毎の読み込みサイズをオーバーしてしまい
    全て読み込みきれない可能性があるので
    無効にすることは避けたほうが良いのではないかと思います。

    解決方法をし調べてみたのですが、
    WordPress プラグインを開発している方が、
    <!--KTAI_PAGE-->を入れるとページを分割できる開発版を作ったようです。
    まだ試していないので解決できるかはわかりませんが、
    以下URLからダウンロードできるので、試してみてはいかがでしょうか。
    http://ja.forums.wordpress.org/topic/7878

    こちらの件に関して、またご連絡いただければ幸いです。
    よろしくお願いいたします。

  3. sato より:

    回答ありがとうございます。
    最新のkai styleに教えていただいたタグを挿入してみましたが、変化はないようです。
    開発者も分割を排除することは推奨していないようですし、バグの原因となるかもしれないので、この点は諦めようと思います。

    ありがとうございました。

  4. のぶ より:

    satoさま

    >最新のkai styleに教えていただいたタグを挿入してみましたが、変化はないようです。
    最新のものではなく、以下URLからktaistyleをダウンロードしたのでしょうか。
    http://wppluginsj.sourceforge.jp/ktai_style/
    説明不足で申し訳ありません。

    >開発者も分割を排除することは推奨していないようですし
    そうなのですね。。。承知いたしました。
    情報をいただきありがとうございます!

トラックバック

  1. […] どや!?KtaiStyleをカスタマイズするときのポイントと注意点 […]

  2. […] しかし、このKtaiStyleで満足できないこともあります。そんなときKtaiStyleをカスタマイズする必要が出てきます。実力のある方は簡単でしょうが、そうでない方は「KtaiStyleをカスタマイズするときのポイントと注意点」などのサイトを参考にするのがベストでしょう。 […]

  3. […] 参考になります↓ どや!?KtaiStyleをカスタマイズするときのポイントと注意点 http://www.doya-doya.com/word-press/2011/12/01/8330 […]

  4. […] 「Ktai Style」のカスタマイズ ⇒web制作に役立つ情報を紹介する「どやブログ」 […]


  5. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL