WordPressのガラケー変換プラグイン・Ktai Styleでthe_content()内の要素をスタイリングしてみる

スマートフォンサイトのWebデザイン
に関する情報の配信が多いですが、
ガラケーサイトの制作需要もまだ健在
ですのでTipsを備忘録も兼ねて書いて
みます。WordPressのKtai Styleで
the_content()内をスタイリングする、
というもの。

まず最初に、僕はKtai Styleの仕様に関する知識は殆どありませんのであまり良くない方法なのかもしれません。その程度の記事としてお受け止め頂ければと思います。

Ktai Styleのテーマカスタマイズ

Ktai Styleのテーマデザインの前に下準備。基本的には開発者さんが用意してくれたKtai Style用の既存テーマをコピーし、style.css内を書き換えて作ります。

/*
Theme Name: foo
Theme URI: http://example.com
Version: 1.0.0
Description: My theme
Author: foo
Author URI: http://example.com
Requires: Ktai Style 2.0.0, WordPress 2.6
License: GPL v2 or later
*/

テーマを識別するためにstyle.css内の記述を任意のものに変更します。

上書きされないために

次にテーマファイルを置く場所ですが、普通にwp-content/plugins/ktai-style/themes/内に置くと、プラグインのアップデート時に折角カスタマイズしたテーマファイルが無くなってしまいます。これを防ぐには、wp-content/ktai-themes/というフォルダを作成し、ここにカスタマイズしたテーマを格納することで回避できます。

基本的なカスタマイズ方法

機種によってはインラインCSSで書く必要があるのでこの手法が一般的だと思います。

Ktai Styleの基本的なカスタマイズ方法は、header.phpでstyle属性を定義できるようになっています。

<?php global $ks_settings;
$ks_settings = array(); 
$ks_settings['foo'] = 'style=background:#fbfaf8;text-align:center;';
$ks_settings['bar'] = 'style=font-size:13px;';
?>

上記のように定義し、single.phpなどで定義したスタイルを呼び出します ↓

<h2 <?php global $ks_settings; if (isset($ks_settings['foo'])) { echo $ks_settings['foo'];} ?>><?php the_title(); ?></h2>

ここまでは開発者さんが書かれていますので参考になさってください。

Ktai Style サイト設定とテンプレートの改造

しかし、この方法だけではthe_content()内、つまり、管理画面で書いた部分をデザイン出来ません。

the_content()内の要素をスタイリングしてみる

ここから本題です。まず、冒頭にも書きましたが、僕はKtai Styleの仕様をちゃんと把握していませんので正しい方法では無いかもしれないです。じゃあ書くなよ、という話なのですが・・・書いちゃいます。

結論から書きますと、要素をインラインCSS有りの要素に置換します。

function.phpで以下のように記述

function change_ktai_content_style($text){
 	$replace = array(
		'<h3>' => '<h3 style=background:#f3f0ea;color:#8c5e0d;text-align:center;>',
 	);
 	$text = str_replace(array_keys($replace), $replace, $text);
 	return $text;
 }
 add_filter('ktai_raw_content', 'change_ktai_content_style');

これで、記事や固定ページ内のh3がインラインCSS付きのh3に置換されます。

通常のPC用テーマではthe_contentですが、Ktai Styleではktai_raw_contentという独自フィルターフックを使用します。