Home > べたろぐ。 > Web

カテゴリー: Web

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

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

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

WordPress のコメント投稿を Ajax 化し便利にしてくれる Quick Comments

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

WordPress でページ番号によるナビゲーションを表示

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

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

WordPress のサイドバーに記事で使った画像をランダムに表示

ちょっと古いプラグインのようですが、サイドバーとか好きな場所に、記事で使った画像をランダムに表示させることができる 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> に。

random_image_settings
ランダムイメージを埋め込む – 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;
}

という感じでした。

参考リソース

CSS を加筆修正。

WordPress で Amazon の商品情報を表示するプラグイン wp-tmkm-amazon + α