WordPressで企業向けの携帯サイトを作る。

動画で学ぶWebアクセシビリティ Open Accessibility Library Projectを久々にカスタマイズし、携帯サイトに対応しました。元々がブログではないので、PC向けに作ったサイトをどのように携帯向けにするかを書いておきます。

導入

今回は携帯向けに新しくWordPressを入れたりはしていません。元々PC向けに作ったWordPressのサイトそのままを携帯サイト向けに対応してみました。いくつかスクリーンショットを貼り付けておきます。

まず、携帯に対応するためのベースとして、Ktai Style (携帯対応プラグイン)を入れました。

ちなみに、今回はFirefoxのFireMobileSimulatorを使っています。全くの個人で作ったので、予算や時間があるわけではなく、実機を用意することもできていません。そのため、各々の携帯では多少なりとも僕が意図していないデザインになっていることがあり得ます。

きちっと作り込んだからこそ、携帯サイトが作りづらい。

PCサイトを携帯サイトに切り替えるときに面倒なのが、p、ul、li、dl、dt、ddなどの要素です。PCサイトではよく使える便利なやつらですが、携帯サイトでは外部CSSをろくに使えないため、この要素を使っていることがネックになります。

特に、今回のOALPでは個々の記事にあるキャプションをすべてdl要素で組んでいるため、携帯サイトで見たときはdd要素の左側に大きく余白ができてしまいます。本来はCSSで余白を詰めればよいのですが、そうもいきません。

そこで、functions.phpにこんなコードを入れます。

<?php
function html_replace_s() {
	$cont = get_the_content();
	$conts = strip_tags($cont, '<dt><dd><a>');
	$html_r = array('<dt class="kikite">', '<dt class="hanashite">', '<dt class="kaisetsu">', '</dt>', '<dd>', '</dd>', '<a>', '</a>');
	$html_k = array('<img localsrc="3" alt="" />', '<img localsrc="2" alt="" />', '<img localsrc="73" alt="" />', '<br />', '', '<br /><br />', '<a>', '</a>');
	echo str_replace($html_r, $html_k, $conts);
}
?>

ええ、力技です。記事を取得し、dt、dd、a要素以外の要素をすべて消去。その上で、各class属性を指定している要素を絵文字やbr要素に変換します。

ページはこのようにしました。

<?php
function html_replace_p() {
	$cont = get_the_content();
	$conts = strip_tags($cont, '<p><li><a>');
	$html_r = array('<p>', '</p>', '<li>', '</li>', '<a>', '</a>');
	$html_k = array('', '<br />', '└', '<br />', '<a>', '</a>');
	echo str_replace($html_r, $html_k, $conts);
}
?>

やってることはほとんど一緒です。携帯では使いにくい要素を取り除き、必要なタグを携帯向けに置き換えます。

個々の動画の下部にある関連動画のセクションはこんなコードにしました。

<?php
function related_contents() {
	global $post;
	if(!is_single()) return;
	foreach(jrelated_get_array($post->ID) as $id=>$value) {
		$title = $value['title'];
		$link = $value['link'];
		echo '└<a href="' .$link. '">' .$title. '</a><br />';
	}
}
?>