ここでは、携帯サイトの見た目を変更する方法を説明します。管理画面での設定による方法と、携帯表示用テンプレートの改造による方法があります。
使用するテーマを選択します。初期状態では以下の4つのテーマがあります。
携帯電話キャリアごとにテーマを変更できますが、通常は「共通テーマと同じ」のままで構いません。
携帯サイトの見栄えを変更できます。
※バージョン 0.97 以降、外部サイトへのリンクは原則として残すことにしました。もし、外部サイトへのリンクを一律に削除したい場合は、ktai_style.php の冒頭にある
// define ('KS_DELETE_EXTERNAL_LINKS', TRUE);
のコメント記号 (//) を外してください。
要所要所の文字色を変更できます。設定値は #rrggbb の16進表記で記述します。HTML では一般的な書式です。値を入力すると、リアルタイムに色見本が変更され、色の確認がしやすくなっています。なお、Ktai Style の標準テーマ以外では設定が反映されない場合があります。
※背景色・通常の文字色・リンク色・訪問済みリンク色は、設定画面ではなく、テンプレートの改造 (templates/header.php の <body> 要素の属性を修正) で対応してください。
投稿やコメントの日付書式を変更できます。WordPress 一般設定の日付書式は、原則として使っていません (記事タイトルの上に表示する日付は一般設定を適用)。
これは、「今年の日付は年を省略して表示する」「今日の日付は時刻のみ表示する」という短縮処理を行うためです。したがって、それぞれの状況に応じて書式を設定する必要があります。
フォーマットに使う文字列は WordPress の設定画面と同じ (PHP の date()
関数と同じ) です。
Y-m-d
という ISO フォーマットです。スラッシュ区切りや日本語表記に変更して構いません。なお、年・月・日を示す文字それぞれが含まれる必要があります。Y/m/d , Y年n月j日, M jS, Y
n/j, Y年n月
n/j
という書式です。年省略では ISO フォーマットは不自然なためです。月・日を示す文字列それぞれが含まれる必要があります。H:i
です。本プラグインのテンプレートは、WordPress のテーマとほぼ同じ構造です。このため、WordPress のテーマを制作・改造したことがあれば、同じ要領で改造することができます。
なお、プラグインのソースコードおよびテンプレートは原則として UTF-8 で記述されています。このため、WordPress の管理画面で編集が可能です。ただし、ezweb.php, i-mode.php, softbank.php, willcom.php は Shift_JIS で書かれています。WordPress の管理画面で編集すると壊れますので、ご注意ください。
プラグインによっては、携帯電話表示のとき動作しないものがあります。この場合、header.php で wp_head()
を有効にしたり、footer.php で wp_footer()
を有効にすると動作するようになる場合があります (デフォルトではこれらのテンプレートタグはコメントアウト)。
独自のテーマを作るときは、既存テーマのフォルダーを複製して好きな名前を付け、その複製に対して作業することをおすすめします。default テーマを直接改造することは避けてください。
add_action('wp_head');
を利用しているプラグインの場合、このテンプレートの wp_head() 前後のコメントマークを削除すると動作するようになります。add_action('wp_footer');
を利用しているプラグインの場合、このテンプレートの wp_footer() 前後のコメントマークを削除すると動作するようになります。comments_template()
タグで呼び出されます。以上は WordPress の仕様に従って呼び出されます。もし、category-10.php というテンプレートを追加すれば、カテゴリー ID = 10 のアーカイブにはこのテンプレートが利用されます。
以後は本プラグイン独自のテンプレートです。 ウェブログ直下の URL に「?menu=XXXX」というクエリー文字列を付けると呼び出されます。
例: http://blog.example.jp/?menu=months
※バージョン 0.90 からファイル名およびクエリー文字列を変更しています。
<a href="<?php ks_blogurl(); ?>?menu=links">リンク</a>
テンプレートや投稿本文で以下の XHTML タグを使えば絵文字を挿入できます。EZweb の絵文字と同じ仕様です。
<img localsrc="999" alt="代替文字" />
localsrc 属性に絵文字番号 (上記の場合 999)、alt 属性は絵文字の代替文字です (PDA など絵文字非搭載の端末向け)。絵文字番号は KDDI のウェブサイトを参照してください。
ドコモ端末、ソフトバンク端末に対しては、似たような絵文字に自動的に変換されます。ウィルコム端末については、ウィルコム独自絵文字で似た絵文字があればそれを使い、なければ i モード互換絵文字に変換します。
変換テーブルは独自のもので、十分には揃っていません。変換テーブルにない絵文字は 〓 (ゲタ) になります。具体的な変換内容についてはソースコード (i-mode.php, softbank.php, willcom.php) を参照してください。
投稿本文に使った場合、PC では何も表示されません。携帯電話専用ウェブログにする以外では、投稿本文で使わないのが無難です。
原則として、すべての画像はリンクに変換するか alt 文字列を表示しますが、携帯電話でも画像をそのまま表示させたい場合は、その img 要素に
class="ktai"
という属性を追加してください。すでに class 属性があるなら、既存の class の後ろに空白を入れて ktai と書けばよいです。
例: <img src="/qr.png" class="noframe ktai" />
なお、画像のサイズが大きくてページの全体サイズが携帯端末の表示容量を越える場合は、画像を alt テキストの内容に置換して容量制限に収まるようにしています。複数の画像がある場合は、後ろの画像から順にテキスト化されます (前の画像を極力残します)。
ただし、画像サイズのチェックはウェブログ内の画像 (uploads フォルダー配下、プラグイン用画像、テーマ用画像など) に限られ、外部サイトの画像は対象外です。外部サイトの画像に class="ktai"
を付けて表示させた場合、携帯端末の容量制限を越えてしまう可能性があります。
JPEG 画像は、ほぼすべての端末で表示できますが、PNG 画像は i-mode (ドコモ) で表示できず、GIF 画像は Softbank の PDC 端末で表示できません。Ktai Style では、端末に応じてどちらか適切なフォーマットの画像を表示させることができます。
PNG や GIF 画像を使いたい場合は、同じファイル名で PNG フォーマット、GIF フォーマットの画像をそれぞれ用意してください。そして、img 要素の src 属性では、PNG 画像か GIF 画像どちらかを呼び出してください。PNG 画像の呼び出しは i-mode において GIF 画像に、GIF 画像の呼び出しは SoftBank PDC において PNG 画像に変更されます。
<img src="<?php ks_theme_url(); ?>title.png" class="ktai" />
<img src="<?php ks_theme_url(); ?>map.gif" class="ktai" />
※画像自体を変換するわけではありませんので、あらかじめ title.png, title.gif や map.gif, map.png それぞれを作っておく必要があります。
※img 要素に class="ktai"
をつけない場合、画像をリンクにする機能が優先され、PNG, GIF 切り替え機能は働きません。
default, compact, redportal テーマでは、WordPress の標準動作と異なり、コメント投稿時に必須事項 (コメント本文、名前、携帯電情報など) が記入されてないとき、コメントフォームを再び表示してその上部にエラーを出します (エラーのインライン表示)。classic テーマは、WordPress 標準の動作である、エラー画面に遷移となります。この場合、携帯電話の機種によっては、前の画面に戻ったとき、入力内容が消えてしまうことがあります。
エラーをインライン表示にするには、submit ボタンを ks_inline_error_submit()
テンプレートタグを使って出力します。
<?php ks_inline_error_submit(_e('Say It!')); ?>
<input type="submit" name="submit" value="<?php _e('Say It!'); ?>" />
DoCoMo FOMA, EZweb の WAP2.0 対応機、ソフトバンク 3G など、最近の端末ではスタイルシートにも対応しています。EZweb は、media="handheld"
指定によって独立したスタイルシートを作成できます。i-mode 用 CSS (i-CSS) は各要素に style 属性を付与したインライン形式しか対応しておらず、HTTP ヘッダで application/xhtml+xml を名乗る必要があります (text/html ではスタイルシートが無効になります)。
Ktai Style は、デフォルトではスタイルシートを使わず、HTTP ヘッダでは text/html を出力しています。しかし、ks_use_appl_xhtml()
テンプレートタグを使うことにより、DoCoMo FOMA, EZweb の WAP2.0 対応機、ソフトバンク 3G において、HTTP ヘッダで application/xhtml+xml を出力し、body, h1 hr, font 要素などの特定の属性を style 属性に変換します。
Ktai Style のテンプレートタグは、従来式の HTML 記述 (font color="blue" など) となっていますが、この変換機構によりスタイルシート記述に対応するようになります。
WordPress が提供するテンプレートタグのうち、以下のものは本プラグインが出力をフィルタして表示を簡略化しています。
the_title()
the_content()
ks_content()
を使ってください (the_content() はパスワード保護された投稿に非対応のため)。get_stylesheet()
get_stylesheet_directory()
get_stylesheet_directory_uri()
get_stylesheet_uri()
get_locale_stylesheet_uri()
get_template()
get_template_directory()
get_template_directory_uri()
get_theme_root()
get_theme_root_uri()
comments_template()
comment_text()
get_permalink()
get_page_link()
get_attachment_link()
get_year_link()
get_month_link()
get_day_link()
get_category_link()
get_tag_link()
wp_list_categories()
wp_list_pages()
Ktai Style 独自のフィルターフックを用意しています。以下のようにしてこのフックを利用できます。
add_filter('raw_content/ktai_style.php', '関数名');
複数の引数がある場合は、優先順位および引数の数を指定する必要があります。
add_filter('convert_link/ktai_style.php', '関数名', 10, 4);
$buffer
$buffer
$buffer, $page_num
$buffer
は出力用 XHTML、$page_num
は現在のページ番号 (最初のページは1) です。携帯電話各社に応じた HTML/XHTML タグ最適化は、このフックに10以上の優先順位を持つフィルターを追加することで行なってください。ページ分割前に li, dt, dd, option などの閉じタグ削除を行なっても、ページ分割処理で補完されてしまうためです。$allowedtags
$allowedtags['style'] = array();
$schemes
unset($schemes['tel-av:']);
$link_html, $href, $desc
$link_html
は Ktai Style による処理後のリンクHTML, $href
はリンク先 URL, $desc
はリンク先の説明テキストです。携帯電話キャリアや種別を知りたい場合は、$Ktai_Style->is_ktai()
や $Ktai_Style->get('type')
を使ってください。$link_html, $orig_html, $href, $desc
$link_html
は Ktai Style による処理後のリンク HTML、$orig_html
は処理前の a 要素そのもの、$href
はリンク先 URL、$desc
はリンク先の説明テキストです。フィルター結果を NULL にすると、a 要素の変換処理が行なわれなくなります。$image_html, $orig_html, $src
$image
は変換前の img 要素そのもの、$src
は画像のソース URL です。フィルター結果を NULL にすると、画像からリンクへの変換処理が行なわれなくなります。上記フックでは既定のフィルターを定義していますが、以下の通りにして削除することも可能です。
remove_filter('raw_content/ktai_style.php', array($Ktai_Style->ktai, 'shrink_pre_encode'), 9); remove_filter('encoding_converted/ktai_style.php', array($Ktai_Style->ktai, 'shrink_pre_split'), 5); remove_filter('encoding_converted/ktai_style.php', array($Ktai_Style->ktai, 'replace_smiley'), 7); remove_filter('encoding_converted/ktai_style.php', array($Ktai_Style->ktai, 'convert_char'), 9); remove_filter('split_page/ktai_style.php', array($Ktai_Style->ktai, 'split_page'), 5); remove_filter('split_page/ktai_style.php', array($Ktai_Style->ktai, 'shrink_post_split'), 9);
出力される XHTML が簡略化されたテンプレートタグを用意しています。これらの関数はテンプレートが読み込まれる直前に有効となるため、他のプラグインから使えません。
is_is_front()
ks_is_comments_list()
ks_is_comment_post()
ks_is_comments()
ks_option($name)
$name
: オプション名ks_header()
ks_footer()
ks_blogurl($echo)
$echo
: TRUE の場合、画面に出力します。FALSE の場合、関数の返り値とします。ks_siteurl($echo)
$echo
: TRUE の場合、画面に出力します。FALSE の場合、関数の返り値とします。ks_plugin_url($echo)
$echo
: TRUE の場合、画面に出力します。FALSE の場合、関数の返り値とします。ks_theme_url($echo)
$echo:
TRUE の場合、画面に出力します。FALSE の場合、関数の返り値とします。ks_admin_url($echo)
$echo
: TRUE の場合、画面に出力します。FALSE の場合、関数の返り値とします。ks_login_link($before, $after, $echo)
$before
: リンクの前に出力する文字列$after
: リンクの後ろに出力する文字列$echo
: TRUE の場合、画面に出力します。FALSE の場合、関数の返り値とします。ks_get_logout_url()
ks_is_loggedin()
ks_session_id_form()
ks_get_wp_version()
ks_term_name()
ks_use_appl_xhtml()
<html xmlns="http://www.w3.org/1999/xhtml">
ks_force_text_html()
ks_mimetype()
ks_charset()
ks_fix_encoding_form()
ks_detect_encoding()
ks_mb_get_form($key, $charset)
ks_fix_encoding_form()
で文字コード判別用隠しフィールドを埋め込んでおいてください。ks_is_required_term_id()
ks_require_term_id_form($action, $method)
$action:
フォームの送信先$method:
post, get のいずれかks_title()
ks_content()
ks_check_password($message)
$message
: 入力フォームの上に出すメッセージks_time($year, $month_date, $time)
date()
関数と同じです。引数を省略すると、プラグイン設定画面に入力したフォーマットとなります。$year
: 年月日を表示する場合のフォーマット (去年以前の日付)$month_date
: 月日を表示する場合のフォーマット (今年の日付)$time
: 時刻のフォーマットks_comment_datetime($year, $month_date, $time)
$year
: 年月日を表示する場合のフォーマット (去年以前の日付)$month_date
: 月日を表示する場合のフォーマット (今年の日付)$time
: 時刻のフォーマットks_orderd_link($count, $max , $link, $desc)
$count
: 出力したい数字。accesskey 用の番号にもなります。$max
: 絵文字を使う最大値。これより $count
が大きければ、絵文字の代わりに □ (四角) になります。$link
: リンク文字列。$desc
: リンク文字列。この引数を省略すると、閉じタグ (</a>) は出力しません。
ks_link_pages($args = '')
wp_link_pages()
の代わりとなる、分割ページ用ナビゲートタグです。パスワード保護された投稿で認証ずみの場合は、アンカーリンクではなく、隠しフィールドにパスワードを埋め込んだフォームボタンが表示されます。このため、パスワードの再入力なしにページ遷移が可能です。$args
: 各種パラメーター (wp_link_pages()
と同じ仕様)ks_pagenum($before, $after)
ks_previous_post_link($format, $link, $in_same_cat, $excluded_categories)
ks_next_post_link($format, $link, $in_same_cat, $excluded_categories)
ks_posts_nav_link($sep, $before, $after)
$sep
: 間に挟まれる分離文字列。$before
: リンクの前に付ける HTML タグ$after
: リンクの後ろに付ける HTML タグks_posts_nav_multi($num, $first, $last)
$num
: 前後何ページリンクするかの数$first
: 「先頭」を示す文字列$last
: 「末尾」を示す文字列ks_posts_nav_dropdown()
ks_get_comments_list_link($post_id)
$post_id
: 対象とする投稿 ID。投稿ループの中では空でよい。ks_comments_link($icon, $zero, $one, $more, $none, $sec, $accesskey)
$icon
: リンクの前に置く絵文字$zero
: コメントなしを示す文字列$one
: コメント1件を示す文字列$more
: コメント2件以上を示す文字列。「%」があればコメント数に置換されます。$none
: コメント停止中を示す文字列$sec
: パスワード保護している投稿を示す文字列$accesskey
: アクセスキー文字列ks_comment_post_link($desc, $before, $after, $icon, $accesskey)
$desc
: リンク先の説明$before
: リンクの前に置く文字列 (絵文字等)$after
: リンクの後に置く文字列$icon
: リンク先説明の前に置く絵文字 (デフォルトは鉛筆の絵)$accesskey
: アクセスキー文字ks_back_to_post($icon, $desc)
$icon
: リンクの前に置く絵文字$desc
: リンク先の説明ks_get_recent_comments($num, $type)
$num
: コメント表示数$type
: コメントの種類を示す文字列ks_category($separator)
$separator
: カテゴリーごとの区切り文字列ks_tags($before, $after, $separator)
$before:
一覧の前に置く文字列 (絵文字等)$after:
一覧の後に置く文字列$separator:
タグごとの区切り文字列ks_tag_cloud($args)
ks_get_archives($args)
wp_get_archives()
の結果から、余計な空白や title 属性を除去して出力します。$arg: ks_get_archives()
と同じ仕様のパラメーターks_list_bookmarks($args)
wp_list_bookmarks()
の結果から、余計な空白や title, rel 属性を除去して出力します。$arg: wp_list_bookmarks()
と同じ仕様のパラメーターks_pages_menu($sep, $before, $after)
$sep
: 項目ごとの区切り$before
: 前に付ける HTML タグ$after
: 後ろに付ける HTML タグks_switch_pc_view($before, $after)
$before
: リンクの前に置く文字列$after
: リンクの後に置く文字列<!--start paging-->
<!--end paging-->
他のプラグインにおいて、PC 向け出力か携帯電話出力かを区別できるよう、以下の関数を用意しています。
is_ktai()
本プラグインが有効・無効にかかわらずエラーが出ないよう、次のようにして使ってください。
if (function_exists('is_ktai') && is_ktai()) { ?> <img localsrc="334" alt="[new] " /> <?php }
次は、携帯電話でない場合にスタイルシートを追加する例です。この判別方法は、Mobile Eye+ を使っている場合や、WPhone Admin Plugin をインストールしている場合にも対応します。
if ((! function_exists('is_mobile') || ! is_mobile()) && (! function_exists('is_ktai') || ! is_ktai())) { ?> <style type="text/css" media="all"> .locationurl { display:none; } </style> <?php }
以前は、原則として is_mobile() 関数を提供し、WPhone Admin Plugin が存在するときのみ、名前の衝突を避けるため is_ktai() に名前を変えていました。
しかし、WPhone プラグインの提供する is_mobile() 関数は SoftBank PDC 端末を検出しないことが判明したため、is_mobile() だけで携帯電話かどうかの判定を行うことができず、is_ktai() 関数も併用する必要が出てしまいました (具体的なコードは上記の通り)。
そうなると、Mobile Eye+ との互換性を取るために、Mobile Eye+ でも使っている関数名である is_mobile() という名前にする、という措置も無意味となってしまいました。このため、バージョン 0.98 より is_ktai() 関数に一本化することとしました。
# WPhone Admin Plugin の作りが悪い、とも言えますね ;-)