タグ: Markup

気づかないうちに Amazon の商品情報を表示するプラグイン wp-tmkm-amazon が動かなくなっていたので Amazon の仕様変更に対応された wp-tmkm-amazon をインストールしてみました。あとは気になるところを修正。

出力される HTML の文法エラーを修正

Amazon の仕様変更に対応された wp-tmkm-amazon の Ver1.3 をインストールしてみましたが p タグの閉じ忘れが残ったままなので修正。修正が必要なのは 626、631 行目の 2 箇所。

書き換え前

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a>';

書き換え後

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a></p>' . "\n";

その他の修正

div 直下にインライン要素を置くのは個人的に気持ち悪いので 517、564、593、618 行目の 4 箇所を下記のように修正。

書き換え前

$output .= '<a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a>';

書き換え後

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a></p>' . "\n";

あとは、wp-tmkm-amazonのAmazon API対応 - 更新を怠る日々を参考にして修正。

以上でとりあえず完了。無事表示されて良かった良かった。

Amazon の仕様変更によりこの記事は参考になりません。Amazon の仕様変更対応版については以下の記事をご覧ください。

• wp-tmkm-amazon の Amazon API 認証対応版 + 文法エラー修正

Amazon から商品情報をひっぱってこようと思って wp-tmkm-amazon というプラグインを入れてみました。ダウンロードは WordPress Plugins/JSeries » wp-tmkm-amazon 。

そして、出力される XHTML のソースが invalid だったのでちょっと修正。

1つ目、 wp-tmkm-amazon.php の 588 行目。

書き換え前

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a>';

書き換え後

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a></p>' . "\n";

2つ目、 wp-tmkm-amazon.php の 593 行目。

書き換え前

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a>';

書き換え後

$output .= "\t" . '<p><a href="'.$url.'"' . $windowtarget . '>' . $Title . '</a></p>' . "\n";

修正は以上の 2 カ所。

あと、個人的な趣味で border="0" を削除したり、 alt="" を alt="' . $Title . '" に書き換えたりもしました。そもそも p じゃなくて dl でマークアップする方が妥当かなとも思ったけどそれは保留で。

そしてさらに wp-tmkm-amazon に Amazon の販売価格を表示するパッチもあててみました。感謝感謝。

下のは、現在、うちに対する Amazon からのおすすめ商品の 1 番目。

WordPress のテーマである wp.Vicuna で、サイドバーの最新記事一覧 (Recent Entries) に投稿日を表示させる。どのテーマでもいけるんですけどね。

sidebar.php の 16 行目辺り。

書き換え前

<?php wp_get_archives('type=postbypost&limit=10'); ?>

書き換え後

<?php
$lastposts = get_posts('numberposts=10&orderby=post_date');

foreach($lastposts as $post) :
    setup_postdata($post);
    ?>
                <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> (<?php the_time('Y-m-d'); ?>)</li>
<?php endforeach; ?>

以上で完了。

the_date ではなく the_time であることに注意。the_date だと1ページに同一投稿日の記事があれば、その最初の記事にのみ表示されて、後に続く記事には表示されない。

投稿日の書式を変えたい場合は the_time('Y-m-d'); の部分を書き換えると良い。その際は、 PHP の日付/時刻の書式が参考になる。あと、うちが使うとしたら <span class="date">(<?php the_time('Y-m-d'); ?>)</span> のように span で括ってやるかな。

参考リソース

• テンプレートタグ/get posts – WordPress Codex 日本語版
• テンプレートタグ/the time – WordPress Codex 日本語版
• PHP の日付/時刻の書式

ここの WordPress では wp.Vicuna を使わせてもらってますが、サイドバーのカテゴリーと月毎アーカイブの項目に記事数を表示するように書き換えてみた。

カテゴリー一覧 (Categories)

カテゴリー一覧のとこでは現在非推奨のテンプレートタグが使われているようなのでそれもかねて修正。sidebar.php の 22 行目辺りにある下記の部分。

書き換え前

<?php wp_list_cats ('sort_column=name&optioncount=0&hierarchical=1'); ?>

書き換え後

<?php wp_list_categories('show_count=1&title_li='); ?>

アーカイブ一覧 (Archives)

sidebar.php の 29 行目辺り。

書き換え前

<?php vicuna_archives_link(); ?>

書き換え後

<?php wp_get_archives('type=monthly&show_post_count=1'); ?>

以上で完了。

記事数のとこ、<span class="count">(17)</span> のように span で括ってくれると有り難かったりすんだよなあ。

参考リソース

• テンプレートタグ/wp get archives – WordPress Codex 日本語版
• テンプレートタグ/wp list categories – WordPress Codex 日本語版

一昨日から夜勤のバイトしていて、帰って来ると風呂入ってお酒飲んでバタンキュー。彼岸のお団子作りです。

コメントを頂いていたので、とりあえず Lightbox JS とドロップシャドウの併用はできますよ例。

Lightbox JS とドロップシャドウ併用

<div class="image">
    <a href="http://seize-a-day.up.seesaa.net/image/bass.jpg"
            rel="lightbox" title="うちのバスちゃんズ" target="_blank">
        <img src="http://seize-a-day.up.seesaa.net/image/bass-thumbnail2.jpg"
                width="150" height="112" border="0" align="left" alt="うちのバスちゃんズ" />
    </a>
</div>

見やすいように空白類文字を加えました。

表示例

Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)と合わせて読んでみてください。

マウスが壊れている。ドラッグがうまくいかない。うまくブロギれない。そして眠い。今日はここまで。おやすみなさい。

ふと思い立ち、Another HTML-lint gateway を使って文法チェックを試みる。

ふつうです。

http://seize-a-day.seesaa.net/ を XHTML1.0 Transitional としてチェックしました。71 個のエラーがありました。このHTMLは 60 点です。タグが 29 種類 244 組使われています。文字コードは Shift JIS のようです。

いやはや何とも中途半端な結果。ほとんどのエラーは、 Seesaa BLOG が自動生成するコード、アフィリエイトアンカーだったりするので対策のしようがない。直せるところは直してみようと思う。

ソースコードのマークアップで参考にしたとこをメモ。

• コンピュータ – mozilla.org マークアップ参考資料
• ソースコードのマークアップに関する議論リンク集

なんだか懐かしい気持ちになった。

CSS によって画像にドロップシャドウを付ける Tips。

• Easy CSS drop shadows | Blog | 1976design.com

ほとんどそのままソースを使わせてもらいました。仕組みについては A List Apart: Articles: CSS Drop Shadows を見れば、図解されているので非常にわかりやすい。

Seesaa BLOG サービスでは、アップロードした画像を記事に貼付ける時は自動でソースを埋め込んでくれる。

Seesaa BLOG が書き出すソース

<a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg"
        target="_blank">
    <img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg"
            width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" />
</a>

見やすいように空白類文字を加えました。

あたしの場合、この生成されたソースを実際に使う時は <div class="image"> で囲んでいるので、こいつを CSS のクラスセレクタとして利用することにします。

まずは Easy CSS drop shadows | Blog | 1976design.com からドロップシャドウの画像素材をダウンロードして Seesaa BLOG にアップロードしておく。そして CSS のソースも参考にしながら、margin の微調整と画像が連続する場合のみ float で流し込むように書き換える。

実際に使う HTML ソース

<div class="image">
    <a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg"
            target="_blank">
        <img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg"
                width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" />
    </a>
</div>

見やすいように空白類文字を加えています。

CSS のソース

/****************************************************
 *    Easy CSS drop shadows
 *    http://www.1976design.com/blog/archive/2003/11/14/shadows/
 ***************************************************/

/* 画像が連続する場合のみ流し込みするため、他のは流し込み解除 */
.posted
    {
    clear: both;
    }

/* .image の場合 */
.text .image
    {
    text-indent: 0;
    background: url('http://hoge(環境に合わせて書き換え)/shadow.gif') no-repeat bottom right;
    clear: none;
    float: left;
    width: auto;
    margin: 0 1em 1em 5px;
    padding: 0;
    position: relative;
    }

.text .image img
    {
    color: inherit;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    display: block;
    margin: -5px 5px 5px -5px;
    padding: 4px;
    position: relative;
    }

/* もしもアンカーだった場合のために :hover 時の装飾 */
.text .image a img:hover
    {
    color: inherit;
    background-color: #fff0f0;
    border: 1px solid red;
    }

表示例

ここで使った猫の写真は、So-net blog:HDV/ハイビジョン/ネコ年は来ないの Studio Kukky さんちの猫、キムチです。 勝手に出演させちゃいました。

以下、追記。

スタイルシートをやや修正。

• 記事本文中のみに影響範囲を限定するため、各セレクタの親に .text を追加
• 流し込み解除するセレクタを変更
• 画像がアンカーではない場合も想定し、.image a としていたセレクタを .image に変更
• 画像がアンカーの場合は、マウスオーバーでアンカーであることがわかるように装飾を変更

さらに追記。

• 流し込み解除のセレクタとして .text > a と .posted を追加（けっこう重要）

さらに追記。

• 流し込み解除のセレクタを .posted のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います