Yuriko.Net 個別記事

2008-05-17
くもり時々晴れ

Ktai Entry + Ktai Location で XHTML 文法違反

ゆりこ による 02:29:58 の投稿
カテゴリー: WordPressハック
タグ: , , ,

Ktai EntryKtai Location を併用すると、Invalid な XHTML 出力になってしまうことが分かりました。例えば、「今度は入場時タッチ不良でエラー」という記事を Markup Validation Service で検査させてみると、「p 要素が始まってないのに終了タグがある」などのエラーになります。

旅行記の XHTML エラー結果画面

これは、Ktai Entry の投稿テンプレートと、Ktai Location が位置情報 URL を div 要素で囲む処理の相性が悪く、WordPress の XHTML 整形処理が正しく機能しなくなってしまうためです。投稿テンプレートは以下のように本文を p 要素で囲むようにしています。

<div class="photo">{images}</div>
<p>{text}</p>
<div class="photo-end"> </div>

で、本文に位置情報 URL があると、Ktai Location は locationurl というクラスで div ブロック化します。

<div class="photo">(画像)</div>
<p>(本文)
<div class="locationurl">(位置情報URL)</div>
</p>
<div class="photo-end"> </div>

これを WordPress は以下のように整形してしまいます。本文の直後に p 要素の閉じタグを入れるのです。このため、最初にあった p 要素閉じタグが浮いてしまうわけです。

<div class="photo">(画像)</div>
<p>(本文)</p>
<div class="locationurl">(位置情報URL)</div>
</p>
<div class="photo-end"> </div>

けっきょくのところ、p 要素の中に div 要素を入れてしまうのが不正なので、これは Ktai Location の処理が悪いわけですね。もしくは、Ktai Entry のテンプレートを変更して、本文を p 要素で囲まないようにしても OK です。wp-mta が生成する XHTML はそうなっていました。しかし、この場合、縦横の写真が混ざったときのレンダリングが変になってしまうため、Ktai Entry では本文を p で囲む処理としました。

つまり、Ktai Location の div 要素囲み処理を改善して、p 要素の外に出してやればいいわけです。どうせ class=”locationurl の部分は CSS で display:none となるので、位置をずらしても問題ありません。これは Ktai Location のバグフィックスとしたいと思います。現在のバージョンが 0.99 なので、ついに 1.00 とするか、0.991 と逃げるか……。

[追記] バージョンは 0.991 として、CVS に改良版をコミットしました。手元のテストでは動作良好ですが、これから生田緑地ばら苑見学で実テストする予定です。

[さらに追記] 実地テストはダメでした。今度は div 要素に </p> が入ってしまっていました。地図 URL として認識する部分に HTML タグ要素が入らないように修正してコミットしました。

トラックバック・コメント »

コメントはありません。

上に戻る

※スパム対策プラグインの影響により、すぐにトラックバックが反映されない場合があります。お手数ですが、半日ほど待ってみてください。

コメント投稿

※発言の責任を明確にするため「名無し」「通りすがり」「匿名希望」等の匿名は不可とします。捨てハンドルでもいいので必ず名乗ってください。
XHTML (使えるタグ): <a href="" title="" ktai=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt=""> .
※スパム対策プラグインの影響により、すぐにコメント内容が表示されない場合があります。お手数ですが、半日ほど待ってみてください。

上に戻る