読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

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

WordPress

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

導入

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


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

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

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

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 />';
	}
}
?>

WordPress Related Post for Japanese (関連投稿表示プラグイン)で関連記事を取得し、タイトルとリンクを出力します。PCサイトなら、ul、li要素でマークアップするところですが、携帯サイトなので罫線とbr要素を使っています。

このように、必要なタグを残し、必要ではないタグは削除、または置き換えるということをしています。完全にバッドノウハウですが…。

ちなみに、今回投票 « WordPress サイトコンテストのNo.119で応募しているので、もしよければ投票してください!

参考書籍

基本的なレイアウト、デザイン、絵文字などの作り方、使い方は次の書籍を参考にしました。

携帯サイト コーディング&デザイン

携帯サイト コーディング&デザイン

モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。