curo.mobiでずっとグチってた「WordPressで投稿スラッグ（URI/URL/パーマリンク）を手動で連番にするのが面倒」な件で解決方法を考えてみました。

パーマリンクの設定をどうするべきかという話とWordPressの仕様を踏まえて記しておきます。

パーマリンクの設定

パーマリンクについての説明はパーマネントリンク宣言 をご覧いただきたい。そして、Curo.jpはWordPress:パーマリンク設定をしたときに、投稿スラッグを手動で設定する「%postname%」を含めて使っています。

「123」はWordPressの%post_id%を含めます。「sample-post」は%postname%を含めます。

前者は自動で数字が付加され、後者は手動で設定します。

「どの設定がいいのか」という答えはなく、ブログの運用方法や好みとか性格によって変わってくると思います。

たとえば、curo.mobiのように更新頻度が高いブログの場合、「毎回%post_name%を英語で指定するのは面倒で、かといって日本語のまま（タイトルと同値）だと冗長だし、数字指定でできれば連番投稿がいいな」となるわけです。

従って自分で納得できれば「何でもいいよ」とも言えそうです。

しかし、永続的にブログが続くものとして、一度決めたパーマリンク設定はなるべく変えないようにするべきで、最初の時点できっちりとパーマリンク設定をしなければいけません。

WordPressの%post_id%の仕様

WordPressで投稿記事を公開順に連番投稿しようとするとき、パーマリンク設定に%post_id%を含めればよさそうなのですが…。

%post_id%は投稿記事だけでなく、ページ投稿・下書き投稿・投稿リビジョン（オートセーブ）・メディアライブラリ（画像のアップロード）にもpost_idが使われるため、連番にはならないのです。

%post_id%で連番にこだわろうとすれば、以上の素晴らしいWordPressの機能を犠牲にするということで、おすすめできないです。

そんなわけで、%post_name%で手動で連番数字を入れていくということになるわけです。

WordPressの投稿スラッグに自動連番設定

これがちょっと面倒で、自分で次の記事の番号を調べて打ちます。手動のため、前と同じ番号を打ってしまったり、欠番になってたりするのです。ダルいわけです。

もっと簡単に連番を付与できるだろうと考えてみたところ、以下の方法を思いついた（というほどでもないが）のでメモしておきます。

1. WordPressの新規投稿画面の表示オプションから「投稿スラッグ」にチェックをいれて表示させます。
2. wp-admin/edit-form-advanced.php 499行目を以下のように（太字のところ）変えます。

ね、簡単でしょう？

いや、でも簡単だと思います。

get_usernumpostsはWordPressのテンプレートタグで引数のuser_idの公開記事数を取得できます。

それに+1しただけです。

複数ユーザーがいる場合でも、get_usernumpostsを複数足せばOKですね。

ちなみに、パーマリンクのスラッグ欄と投稿スラッグ欄に異なる入力がされていた場合、投稿スラッグ欄が優先されます。

ふとInternet Explorer7でCuro.jp見てみたら、タイトル文字が切れてしまっていた。

CSSのpaddingとmarginで縦の中央に寄せていたのですが、どうやらそれがまずかったようです。

paddingとmarginをやめて、line-heightで指定することで解決しました。

header {
	height: 200px;
	}

h1 {
	line-height: 200px;
	}

これで、headerボックスの縦の真ん中に文字列を寄せることができます。

横の中央揃えはtext-align: center;で簡単にできるけど、line-heightで縦の中央寄せもできるってのがポイントですね。

このページに書かれた情報はAmazonが推奨しているわけではなく、個人で勝手にまとめたものです。

Amazon 商品ページのURL + アソシエイトID

Amazonの商品ページのURLは大まかには3種類ありますが、ここでは初期のURLのみ紹介します。整形されたAmazon URLはおそらくこの型式が一番多いかと思います。[ASIN]はAmazonの商品識別番号10桁（書籍の場合はISBN）。末尾にアソシエイトIDを付加できます。YourID-22のところを変えてください。

（/ref=nosimはもはやなくてもいいかも？私はいれてないです。）

Amazonの商品ページからこのURL型式に変えるブックマークレットが色々と公開されているので、それを使うと楽ちんです。私は以下のブックマークレットを使ってます。感謝

（アソシエイトIDを付ける必要がないなら、もっと短いURL型式があります。さらに短くするならその下を。）

商品画像のURL

1は「images」でも可。2は前述の通り。3は国別コードで、09が日本。輸入盤CDなどの場合は01（アメリカ）にするといいかも。4は画像の大きさを変更できます。

指定できるサイズは4つです。大きい順に「LZZZZZZZ」「MZZZZZZZ」「TZZZZZZZ」「THUMBZZZ」です。これらを4のところで指定します。

別の商品画像を表示させたいとき

画像が複数枚ある商品の場合、以下のように指定します。3と4の間に「IN01.」、さらに別の画像を表示させるときは「IN02.」「IN03.」…と数字を増やします。区切りは「_ アンダーバー」ではなく「. （ドット）」じゃないとダメみたいです。

あと、画像をぼかしたり回転させたりするコマンドもあるのですが、まじめに使う人は皆無だと思うので省略します。ネタとしてはおもろいが…。

余談: WordPressとAmazon Plugin

以前はwp-amazonというプラグインを使ってたんですが、2.0にアップデートされて思ってたような使い方ができなくなったので、以上のやり方に変えました （単なるわがままですけどね！ｗ）

ということで、下のCuro.jpという文字列にカーソルを合わせてみてください。

右下にちょっとずれるのが分かるでしょうか。「ガタガタガタ」というのは、リンクの上側または左側ギリギリにカーソルを当てると、そうなります。これはもう「ガタガタガタ」としか言いようがない。

（Firefox2はガタガタしました。Internet Explorer6, Opera9は大丈夫でした。）

position

これは、リンクをマウスオーバーしたときに数pxほど右下にずらすようにCSS（スタイルシート）で以下のように設定されています。

a:hover	{
	top:1px;
	left:1px;
	position:relative;
}

なんで右下にずらすのか。おそらくはボタンを押したときのような感覚を狙っているのだと思います。クリック感とでもいいましょうか。

メニューなどのリストで使うと結構気持ちいい感じがします。こうカタカタカタっと。

でもやっぱり、上からマウスを当てにいくとリンクが逃げる感じがして好きになれない。下手したら空クリックしてしまいます。0.1秒を争うかもしれないウェブの世界でクリックし逃したなんてあってはならないのです。

padding

代替案として、こういうのはどうでしょう。

a:hover	{
	padding-left:4px;
}

右にずれるだけです。paddingなので、ずれたところでもリンクをクリックできます。「ガタガタガタ」ってなりません。

画像の場合（ロールオーバー）

画像も上のテキストリンクのように「ずらす」ことができるのですが、どうせならロールオーバーを使ってみるのはどうでしょう。

<a href="http://example.com/feed"><img src="http://example.com/img/feed-icons/orange1.gif" alt="Feed-Icon" onmouseover="this .src='http://example.com/img/feed-icons/orange2.gif'" onmouseout="this .src='http://example.com/img/feed-icons/orange1.gif'"/></a>

影の有無を利用して「押す」感じを演出。

これも、ロールオーバー前と後の画像の大きさを同じにしてあるので、「ガタガタガタ」ってなりません。

ちなみに、このアイコンはフリー素材:Web2.0チックなフィードアイコンに置いてあります。

なんだか終始、感覚的な話でした

普通の星

ベクトル画像編集ソフト（ドローソフト）「Inkscape」を使ってみる。

Adobe Illustratorと同じ種類のソフトと言うと分かりやすいでしょうか。Inkscapeは無料ですけどね。

Inkscapeの使い方を学ぶべく、Inkscape チュートリアル:シェイプのページを見ていると、「星形ツール」についての解説に目を引く記述がありました。

星形はもっとも複雑で刺激的な Inkscape のシェイプだ。もし友人を Inkscape で驚かせるなら、星形ツールを使わせよう。これはもう飽きの来ない面白さ、まさに中毒的！

Inkscape tutorial:シェイプ より引用

とまさに絶賛。このチュートリアルの続きも、さらに熱を帯びた解説になっていて実に興味深いです。こりゃ星形ツールを使ってみるしかない。

角は3から1024までの範囲で指定することができます。ここでは、5から20へ数値を変更しました。あんまり大きい数値を入力すると、動作が遅くなります。場合によっては固まるかも。

中心へ指向する度合「スポーク比」、どれぐらい角を丸めるか「まるめ度」、ランダムに角と角度を変形「ランダム度」に様々な値を入力して、一人楽しむ…。

上の画像は、わずかなランダム度を加えたもの。チュートリアルが言うところの、『わずかな乱雑さは、星形を少し乱す、より人間らしく、より可笑しく』するための方法です。

上の画像は、強いランダム度を加えたもの。チュートリアルが言うところの、『強い乱雑さは様々な熱狂的予測不可能な形状を作り出すための刺激的な方法』です。

私のように絵心がなくとも、何かそれらしいものができる熱いInkscapeを一度お試し下さい。

追記（2007年11月30日）

Inkscapeパーフェクトガイド

Inkscapeの本が出てた！日本では初めてじゃないですかね

コメント投稿者がサイトURLを記入した場合、そのサイトのfaviconをコメントとともに表示します。実際の動作はこの記事のコメント欄をご覧下さい。

（本当はもっと早く導入したかったのですが、なぜかプラグインをダウンロードできなかったのです… ）

導入についてはpower source*にてぼのさんが紹介しておられますので、詳しくはそちらを参照してください （またこのパターン…）

ここでは導入後のちょっとした注意をまとめておきます。

アイコンが大きい？

コメント投稿者のサイトのfaviconによっては、サイズが大きい場合があります。アドレスバーなどに表示される小さいサイズ（16px*16px）に統一したいときは、img属性のwidthとheightを指定しましょう。

favatars.php （ver.2） 22行目

function comment_favicon($before='<img src="', $after='" alt="favicon.ico" width="16" height="16" />') {

alt属性が空になっているので、ついでに指定しておきます。ここではfavicon.icoとしておきました。

faviconにリンクをはりたい

faviconにコメント投稿者のサイトのリンクをはるときは、テンプレートタグを使います。

<a href="<?php comment_author_url(); ?>"><?php comment_favicon(); ?></a>

faviconの所有者を示すことができるので、リンクをはっておくのが好ましいです。

Internet Explorerで表示されない？

コメント欄のfavicon.icoがInternet Explorer 6.0で表示されないことがあります。これは、favicon.icoが保存されているサーバーの設定によるようです。

p0tにてkomagataさんがその原因とPHPを使った解決策を詳しく述べておられます。

もう一つの解決策は、favicon.icoをPNG画像に変換する方法です。こちらは、power source*にてぼのさんが詳しく述べておられます。

どちらかの解決策を取り入れる必要があります。他に何か方法あるかなぁ…

追記（2007年1月1日）

PHPを使った解決策:任意の場所にphpを保存して、favatars.phpを書き換えます。

favatars.php （ver.2） 22行目

function comment_favicon($before='<img src="http://hogehoge.hoge/favicon.php?favicon=', $after='" alt="favicon.ico" width="16" height="16" />') {

上のURLのところは書き換えてくださいね。

表示中の記事の前後の記事へのリンクを出力するテンプレートタグ「previous_post_link」「next_post_link」の引数のところをちょっといじって、同一カテゴリーに属する記事だけを対象にします。以下にサンプル。

<?php previous_post_link('&laquo; %link', '%title', 'true') ?> |  Category: <?php the_category(',') ?> | <?php next_post_link('%link &raquo;', '%title', 'true') ?>

動作確認環境はWordPressME2.0.4です。メッセージループ内で使用してください。

一つ問題点があって、記事が複数のカテゴリーに属する場合、その記事の前後の記事へのリンクはカテゴリー一つ分しか表示されません。私の環境で確認してみたところ、同レベルのカテゴリーに属する場合、カテゴリーIDの若い方が優先されるようです。

「それは困る 」という方は、プラグイン:Next/Previous posts in same category（英語）を使ってみてはどうでしょうか。power source*にてぼのさんが紹介しておられますので、詳しくはそちらを参照してください