カテゴリー: Web

気づかないうちに 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対応 - 更新を怠る日々を参考にして修正。

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

jQuery ベースの Quick Comments を入れてみました。早速動作確認を行ってみるも動作せず。あれれ。原因究明開始。WordPress のプラグインとしてでなくテンプレートに直接組み込んでいる jQuery lightBox plugin の記述を削除してみると動く。それならばと head 内の jQuery lightBox plugin と Quick Comments の記述する順番を変えたら無事動くようになりました。いやあ、これは便利便利。

WP-PageNavi (WP-PageNavi 日本語版) というプラグインを使うと手軽にページ番号によるナビゲーションを表示できる。で、WP-PageNavi のことを記事にしようと思って検索してたら Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示 (改良版)という記事を発見。プラグインを使うことなく WordPress のテンプレートタグでできるならそっちの方がいいかなってことで早速利用させてもらうことに。そしてさらに関数化してる記事を発見。

• 吟遊詩人の戯言 » ページナビゲーション機能を改版してみたり
• WP-PageNaviを使わずナビゲーション表示 – AZ note

喜び勇んで作業開始。さくっと完了。ありがたいっすね。

ちょっと古いプラグインのようですが、サイドバーとか好きな場所に、記事で使った画像をランダムに表示させることができる Random Image Plugin for WordPress を入れてみました。 WordPress 2.7.1 でも動くようです。

とてもシンプルに、記事へのリンクを貼った画像を表示するように設定。そして、リンク先の記事名を title 属性で明示すべく randomimage.php の 594 行目をちょこっと修正。

書き換え前

      $image_html = str_replace("%2", "<a href='$post_permalink'><img src='$image_src' alt='$image_alt' $image_attributes /></a>", $image_html);

書き換え後

      $image_html = str_replace("%2", "<a href='$post_permalink' title='$post_title'><img src='$image_src' alt='$image_alt' $image_attributes /></a>", $image_html);

あとは、埋め込みたいとこに <?php randomimage(); ?> と書いて、適当にスタイルシートをでっちあげて完成。うちの例だと以下のような感じ。

Random Image の設定

HTML Template のとこを <li>%2</li> に。

ランダムイメージを埋め込む – sidebar.php

     <dl class="navi">
<!-- 中略 -->
        <dt>Random Images</dt>
        <dd>
            <ul class="randomImages">
<?php randomimage(); ?>
            </ul>
            <br class="clear" />
        </dd>
<!-- 中略 -->
     </dl>

ランダムイメージにあてるスタイルシート

/* safari, IEでの余白消し */
div#utilities dl dd ul.randomImages li a img {
    line-height: 0;
    vertical-align: bottom;
}

/* ランダムイメージ */
div#utilities dl dd ul.randomImages {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #eee;
}
div#utilities dl dd ul.randomImages li {
    float: left;
    width: auto;
    margin: 0;
    padding: 0;
}
div#utilities dl dd ul.randomImages li a {
}
div#utilities dl dd ul.randomImages li img {
    display: block;
    width: 75px;
    height: 75px;
    border: 2px solid #eee;
}
div#utilities dl dd ul.randomImages li a:hover img {
    border: 2px solid #ff0000;
}
div#utilities dl dd br.clear {
    clear: both;
}

という感じでした。

参考リソース

• 記事の画像をサイドバーなどにランダム表示するプラグイン[WP] – ミblog : レビューや日常など

CSS を加筆修正。

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 の日付/時刻の書式

サイトマップと言っても閲覧者が見る方のではなく Google とか Yahoo! などの検索ロボット用の XML サイトマップ。それをオンラインで手軽に作れる。

• Create your Google Sitemap Online – XML Sitemaps Generator

英語のサービスなんですが、Starting URL んとこにサイトの URL を入力して Start ボタンを押し、あとはひたすら待つ。

XML サイトマップと同時に HTML 版のサイトマップや URL リストも作成してくれる。お手軽便利。ただし、HTML 版サイトマップはなぜか文字コードがおかしく指定されているので、もしもそれを使うなら文字コードを UTF-8 に書き換え OR 切り替えしてやる必要がある。閲覧者向けサイトマップはローカルで動くツールを使って作った方がいいかもですね。

で、まあ、出来上がった sitemap.xml はてきとうなとこにアップロードしてやって Google ウェブマスターツールとかで指定してやる。robots.txt にも下記のように記述してやるといいみたい。

robots.txt の記述

Sitemap: http://hoge/sitemap.xml

いやあ、Google ウェブマスターツールはインデックスされてるページとかエラーが出てる箇所とかわかるから便利っすね。

参考リソース

• サイトマップの作成と送信の方法 (Yahoo! ＆ Google)

ここの 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 日本語版

いろいろなサイトを見ているとフッターの著作権表記ってほんとに様々。

Copyright © 2009 Hoge. All Rights Reserved. といった感じで書かれてるとこが多いかな。でも SONY のサイトのように Copyright 2009 Sony Corporation といった感じで簡潔なとこもある。長ったらしいのもなんだし、Copyright と期間と所有者の3つに絞り、必要最低限の記述をすることにした。

Copyright ©

まずは Copyright の記述。SONY のサイトでは Copyright と記述されているけど、略式記号の © (© と記述) を使うことにする。閲覧環境によっては © が表示されない場合があるかもしれないのでとりあえず abbr で括って <abbr title="Copyright">&copy;</abbr> とし、© が略語であることを明示してやってお茶を濁す。

期間

続いて、期間については PHP で今現在が何年かを取得してやることで年が変わるごとに書き換えなきゃいけない面倒を削減する。

著作権の所有者

最後の著作権の所有者に関しては個人名とか企業名が妥当なのだろうけどとりあえず今はドメイン名にしておく。

まとめると

サンプルソース

<?php
    // 初公開の年 (要書き換え)
    $since_year = '2002';
    // 現在の日付（年）を取得
    $this_year = date("Y");

    if ($since_year >= $this_year ) {
        $copyright_year = $this_year;
    } else {
        $copyright_year = $since_year. '-'. $this_year;
    }
?>
<abbr title="Copyright">&copy;</abbr> <?php echo $copyright_year; ?> szdy.info

$since_year を 2002 として、今現在が 2009 年の場合の実行結果

© 2002-2009 szdy.info

全ページが PHP であることが前提だけど、こいつを個別のファイルとして保存し全ページで include してやると幸せになれる。

参考リソース

• コピーライト（copyright）著作権の書き方【意味や記号の表記方法】

XML 宣言をすると IE 6 では CSS のボックスの解釈とかおかしくなっちゃうんで、PHP を使って IE 6 では XML 宣言をしないようにし、それ以外の UA では XML 宣言させるようにする。

XML 宣言部分のソースコード

<?php
    $ua = $_SERVER['HTTP_USER_AGENT'];

    if (!(ereg("Windows",$ua) && ereg("MSIE 6",$ua))) {
         echo '<?xml version="1.0" encoding="UTF-8"?>' . "n";
    }
?>

参考リソース

• WEB Memorandum – xml宣言文をPHPでコントロール