WordPress 投稿エディタに LightBox のコードを挿入

2007/08/19 日曜日 11:38 投稿者 zon

コア部分を変更するのであまり参考にしない方がいいと思います。

変更後のイメージは以下のようになります。

LightBox のコードを挿入

■バージョン:2.1.3
■変更ファイル:/wp-admin/upload-js.php

修正点その1

【変更前】116行目:

h += "<label for='link-file'><input type='radio' name='link' id='link-file' value='file' checked='checked'/> <?php echo attribute_escape(__('File')); ?></label><br />";

【変更後】file のチェックをはずして、その上に LightBox のラジオボタンを追加

h += "<label for='link-lightbox'><input type='radio' name='link' id='link-lightbox' value='lightbox' checked='checked' /> <?php echo attribute_escape(__('LightBox')); ?></label><br />";
h += "<label for='link-file'><input type='radio' name='link' id='link-file' value='file' checked='checked'/> <?php echo attribute_escape(__('File')); ?></label><br />";  

修正点その2

【変更前】236行目~241行目:

if ( 'none' != link )
	h += "<a href='" + ( 'file' == link ? ( this.currentImage.srcBase + this.currentImage.src ) : ( this.currentImage.page + "' rel='attachment wp-att-" + this.currentImage.ID ) ) + "' title='" + this.currentImage.title + "'>";
if ( display && 'title' != display )
	h += "<img src='" + ( 'thumb' == display ? ( this.currentImage.thumbBase + this.currentImage.thumb ) : ( this.currentImage.srcBase + this.currentImage.src ) ) + "' alt='" + this.currentImage.title + "' />";
else
	h += this.currentImage.title;

【変更後】LightBox を選択時、rel 属性に lightbox[post-id] を設定する処理を追加。ついでに、img タグに width、height、title 属性を設定する処理を追加

if ( 'none' != link ) {
	h += "<a href='"
	if ( 'file' == link )
		h += this.currentImage.srcBase + this.currentImage.src;
	else if ( 'page' == link )
		h += this.currentImage.page + "' rel='attachment wp-att-" + this.currentImage.ID;
	else if ( 'lightbox' == link )
		h += this.currentImage.srcBase + this.currentImage.src + "' rel='lightbox[" + this.postID + "]";
	h += "' title='" + this.currentImage.title + "'>";
}
if ( display && 'title' != display ) {
	h += "<img src='";
	if ( 'thumb' == display ) {
		imageThumb = new Image();
		imageThumb.src = this.currentImage.thumbBase + this.currentImage.thumb;
		h += imageThumb.src + "' width='" + imageThumb.width + "' height='" + imageThumb.height;
	} else {
		imageBase = new Image();
		imageBase.src = this.currentImage.srcBase + this.currentImage.src;
		h +=  imageBase.src + "' width='" + imageBase.width + "' height='" + imageBase.height;
	}
	h += "' alt='" + this.currentImage.title + "' title='" + this.currentImage.title + "' />";
} else {
	h += this.currentImage.title;
}

img タグの width、height、title 属性は、LightBox とは関係ないのですが、W3C XHTML1.0 valid を意識して、毎回設定しているのが面倒になったので、コア部分を変更するならと、ついでにやっておきました。

プラグインを駆使してなんとかなるものなら、コア部分を変更せずになんとかしたいものですが分からないのです。

2.0系でこのカスタマイズを行いたければ、inline-uploading.php 辺りを変更すればいいのかと思って、ソースをざっくり追ってみましたが、2.1.3 の仕組みとは大きく変わっていたので追うのが面倒になりました。2.0系をカスタマイズしたい人は、ほとんど参考にならないと思います。

Yahoo!ブックマークの表示をW3C XHTML1.0 validにする

2007/06/15 金曜日 2:38 投稿者 zon

Yahoo!検索結果Yahoo!ブックマークの登録数が表示されるようになってます。

Yahoo!検索 スタッフブログの記事に書かれているYahoo!検索結果にブックマーク登録人数表示を開始!の内容を読む限りでは、Yahoo!の検索結果に直接的に影響があるようなニュアンスは読み取れませんでしたが、間接的なSEOの効果は考えられるので、利用するサイト運営者は増えるのではないかと思います。

Yahoo!ブックマークでは、便利ツールのブログパーツとして「Yahoo!ブックマークに登録」リンクとブックマーク人数表示リンクが用意されていて、HTMLコードをコピーして、ソースに貼り付ければいいようになっているのですが、これがXHTML1.0に準拠していないので、そのまま貼ってしまうと The W3C Markup Validation Servic でエラーが出てしまいます。

これに手を加えて使うことにしました。

「Yahoo!ブックマークに登録」リンク

Yahoo!ブックマークに登録のコードに関しては、Yahoo!ブックマークに登録と同様に<img>タグのタグを閉じる部分に/を入れておくことと、&を&amp;に変更しておくこと。コードは下記の通りです。

<img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" /> <a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&amp;u='+encodeURIComponent(window.location.href)+'&amp;opener=bm&amp;ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0);">Yahoo!ブックマークに登録</a>

ブックマーク人数表示リンク

ブックマーク人数表示のコードに関しては、<img>タグのタグを閉じる部分に/を入れておくことと、もうひとつが厄介で、リンク先と人数を表示するところまでが可変で、「人が登録」までが固定なので、<a>と人数までをJavaScriptで読み込んで、後の部分をそのまま記述していて、XHTML上では、</a>が突然出現して、<a>がない状態になっています。「人が登録</a>」の部分まで読み込んでくれるようにしてくれてもいいと思うのですが。それだけのデータ送信量すら節約したいのでしょうか?まぁ、利用者が半端な数じゃなさそうなので、膨大な量になりそうですけど。

良い対処方法が思い浮かばず、仕方がないので自分で「人が登録</a>」を読み込むJavaScriptを用意しました。

jsファイルに以下のコードを記述してください。

document.write('人が登録</a>');

上記のjsファイルをサーバの任意の場所に設置して、下記のコードを貼り付ければOKです。

<img src="http://i.yimg.jp/images/ybm/icons/view_url.gif" width="16" height="16" alt="Yahoo!ブックマークでこのサイトを登録している人数" /> <script type="text/javascript" src="http://num.bookmarks.yahoo.co.jp/ybmno.php"></script><script type="text/javascript" src="jsファイルのパス"></script>

Yahoo!に限らず、ブログパーツ等で用意されているコードはXHTMLに準拠していないものが多いので困ります。
HTMLの方が需要は多いかもしれないけど、W3Cに準拠してるかどうか気にしている人はXHTMLでコーディングしている人の方が多いと思うので、XHTMLにあわせて提供したほうがいいと思うのですが。

XHMTL valid でなくなるので、(Yahoo!に限らず)ブログパーツやAPIを使うのをやめたという人って結構多いと思うのですがどうですか?

_blankを使わないで別ウィンドウを開く

2007/05/28 月曜日 19:10 投稿者 zon

個人的に別ウィンドウを開かせるようなリンクの張り方はほとんどしないのですが、たまにどうしても別ウィンドウで開いて貰いたい場合があります(PDFデータのダウンロードページとか、そのページからリンクが張れなくて、行き止まりになってしまう場合とか)。

でも、_blankは XHTML 1.1 では廃止されたとか、HTML4.01とXHTML1.0で非推奨だとか、そういった感じのイメージだけはなんとなくあって、今は基本的にほとんどが XHTML1.0 で書いているので良くはなくてもダメではないという感じなので、使ってもいいかとも思うのですが、将来的に XHTML 1.1 とかにしていくときに修正するのが大変なので、軽く調べて以下を参考にすることにしました。

_blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。

_blank 使わない別ウィンドウを開く方法

コメント欄を見るといろいろと議論されていて、この記事の内容から修正されている点もありますが、特にガチガチに XHTML に準拠した形にしたいわけでもないので、とりあえずは、a タグに class="extarnal" を指定して、JavaScriptで anchor.target = "_blank"; にすることにしました。

rel="extarnal" にしなかった理由は、WordPress のコア部分の auther 関連が既に class="extarnal" を指定していたからです。コア部分に手をつけるのはあまりしたくないし。

それなら external じゃなくて、別の名前にすればよかったのですがもう一つ理由があって、上記の記事のコメント欄を読んでいると、rel="external" は非準拠だどうだといった議論があったりして、詳しく調べるのも面倒なので、無難に class にしておくことにしました。ついでに rel属性の準拠、非準拠の話の中で、(X)HTML仕様に定められていないリンクタイプを記述するときは、プロファイルをhead要素で指定しないといけないといったことが書かれていました。

headタグの profile要素の指定について

プロファイルとか言われても、あまり意味が分からないので、とにかく参考にされている以下のリンク先などをざっと読んで rel="nofollow" を使う場合もプロファイルを指定しておく必要があるとありました。

rel="nofollow" ほかメタデータのプロファイル

WordPress のプロファイルは既に、XFNを使っていますが、このプロファイルが、どうも複数指定は出来ないようで、XFN をとるか XHTML metainformation profile 二者択一になってしまうので、XHTML metainformation profile を採用することにしました。幸い XFN は、指定するのが面倒で、全く使っていなかったし。

ソースコードは、<head profile="http://gmpg.org/xfn/11"> を <head profile="http://purl.org/net/ns/metaprof"> に変更すればOKのはず。

zontheworld
うまい焼肉が喰いたい。
HTML convert time: 0.071 sec. ( Login )