delab:

ins delのdatetimeを日本時間に修正

とっても気になっていたのですが、Wordpressの投稿クイックタグを使ってinsdelを生成すると、投稿時間にずれが生じています。

生成される形式

<ins datetime="2008-06-01T10:10:39+00:00"></ins>

生成された形式を見るとわかりますが、日時表記は国際標準のISO 8601準拠しています。

datetime=”2008-06-01T10:10:39+00:00″一番最後の+00:00は、世界標準時間を表しています。投稿された時間は世界表時間に合わせているようです。

日本はGMT+09:00ですので、これに合わせて修正します。

修正箇所

wp-includes/js/quicktags.js 27行目

var now = new Date();
var datetime = now.getUTCFullYear() + '-' +
zeroise(now.getUTCMonth() + 1, 2) + '-' +
zeroise(now.getUTCDate(), 2) + 'T' +
zeroise(now.getUTCHours(), 2) + ':' +
zeroise(now.getUTCMinutes(), 2) + ':' +
zeroise(now.getUTCSeconds() ,2) +
'+00:00';

修正後

var now = new Date();
var datetime = now.getFullYear() + '-' +
zeroise(now.getMonth() + 1, 2) + '-' +
zeroise(now.getDate(), 2) + 'T' +
zeroise(now.getHours(), 2) + ':' +
zeroise(now.getMinutes(), 2) + ':' +
zeroise(now.getSeconds() ,2) +
'+09:00';

ins del タグがXHTML準拠するように内部を修正

insタグを使うと不正なXHTML形式になる問題も修正しました。

insは、その場所によってブロック要素としてもインライン要素としても使えるタグですが、Wordpressで記事として投稿すると、自動修正機能でインライン要素として判断されて、pタグで括られてしまいます。

例えば、こういう場合

<ins>
  <p>追記の内容</p>
</ins>

Wordpressに投稿されると、自動修正されます。

<p>
   <ins>
     <p>追記の内容</p>
   </ins>
</p>

ブロック要素のinsをPタグが囲む形に修正されてしまいました。これは、設定の「不正な XHTML 構文を自動的に修正する」のチェックを外しても同じですので、内部のコードを修正しました。

修正箇所

wp-include\formatting.php 66行目

	$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr)';
 // 該当部分を書き換え
	$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|ins|del)';

	$pee = preg_replace('|<ins([^>]*)>|i', "<ins$1>", $pee);
	$pee = str_replace('</ins>', '</ins>', $pee);
	$pee = preg_replace('|<del([^>]*)>|i', "<del$1>", $pee);
	$pee = str_replace('</del>', '</del>', $pee);
 // if ($br) {　の前に上の4行を入れる
	if ($br) {

ins,delタグの要素をCSSで表示させる

せっかくinsに正しく要素がくっついてくるようになったので、それをサイトに反映させるために、CSSで要素を表示させます。

これは追記です。

insの要素となっているdatetimeをCSSのcontentプロパティを使って表示させています。

CSSはこんな感じで書いてます。

ins{
	display: block;
	margin: 10px 0;
	background: #EFEFEF;
	border: #999 1px dotted;
	padding: 10px 20px;
	text-decoration:none;
	}
ins:before {
 	display: block;
	content: "\8ffd\8a18  - (" attr(datetime) ")";
	text-align: left;
	font-size: 85%;
}

擬似要素を使っているのでIE6では「追記…」部分が表示されません。

対策として、本文との区別がつくようにボーダーで囲んでボックスで表示しています。

• 2008-06-01
• Article
• CSS
• Wordpress
• xhtml
•