月: 2009年6月

[wp]投稿された画像のサムネイルが表示される記事一覧ページを作る

by

以前書いた記事　[WP]画像サムネイルを投稿された記事へのリンク付きで表示 の応用編です。
ページテンプレートをちょっと弄って、画像のサムネイルがずらっと並ぶ一覧ページを作る方法について解説します。

Sample

表示するのは、記事に投稿された画像（のサムネイル）・記事タイトル・カテゴリー名、の３つとします。
記事に関連付けられていない画像（ライブラリから引っ張った画像）は表示されません。
※上記のサンプル画像のwordpressでは、サムネイルの最小サイズを100x100pxの切り抜き設定にして、それを表示しています。

※記事のギャラリーに投稿された画像のサムネイルを利用するもので、
2.9で実装された投稿サムネイル機能とは全く別物です。ご注意ください。

続きを読む

[Ajax] Google AJAX Feed APIでRSSを表示する

by

Google Ajax APIシリーズ記事その３はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、３ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ！

※Mapはこの記事、Searchはこの記事で解説しています。

続きを読む

[mootools]セレクトメニューを連動させて動的に選択肢を変更する

by

セレクトメニューが２つあって、1つ目のセレクトメニューを選択したら、その値によって２つ目のセレクトメニューの選択肢を入れ替えるというものです。
わざわざ何番煎じか分からないネタを遇えて取り上げたのは、巷でよく見かける「配列にデータを入れて出力する」という方法ではなく、Validなソースでこれをやりたかったためです。
選択肢がやたらと多くなりがちなもの、たとえば県から市を選んだりするフォームなどでよく使われていると思います。
とりあえずセレクトメニュー２つだけ連動させてみました。

XHTML

連動させるセレクトメニューにそれぞれIDが必要。
親セレクトメニューのoption要素につけたクラス名と、子セレクトメニューのoptgroup要素のクラス名を同じにします。
optgroup内に入れた要素が選択された時に入れ替わる選択肢になります。

<label for="select">選択肢１</label>
<select name="select" id="select">
	<option value="果物" class="fruit">果物</option>
	<option value="肉" class="meat">肉</option>
	<option value="魚" class="fish">魚</option>
</select>
<label for="select2">選択肢２</label>
<select name="select2" id="select2">
	<optgroup class="fruit" label="果物">
	<option value="リンゴ" selected="selected">リンゴ</option>
	<option value="みかん">みかん</option>
	<option value="ぶどう">ぶどう</option>
	<option value="桃">桃</option>
	</optgroup>
	<optgroup class="meat" label="肉">
	<option value="m1">牛肉</option>
	<option value="m2">豚肉</option>
	<option value="m3">鶏肉</option>
	</optgroup>
	<optgroup class="fish" label="魚">
	<option value="maguro">マグロ</option>
	<option value="sisyamo">ししゃも</option>
	<option value="iwashi">イワシ</option>
	<option value="sanma">サンマ</option>
	</optgroup>
</select>

見ての通り普通にソース書くのとそう変わらんので、javscriptオフでもフォームは機能します。
option要素を持たないselectを作る必要もないからバリデートに怒られる心配もない。
optgroupのラベルはどっちでもいい。

続きを読む