タグ: WordPress

気づかないうちに 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 の日付/時刻の書式

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

Seesaa ブログの旧べたろぐ。からこの WordPress にログを移しました。

イライラしていてついやっちゃいました。ドメイン名取得。

テスト前日とかありませんでした？普段全然やらないのに、やる必要もないのにやたら掃除を頑張っちゃったりして。

アレです。現実逃避。

だって年間 950 円なんですもの。

実は、このドメイン名の前に違うドメイン名を取っていたんですが、それはちょっと恥ずかしい感じで後悔してます。

そんな感じでとりあえず WordPress を設置してみました。

WordPress を使う機会があって、その時に Vicuna – CMS をベースにしながらテンプレートを作成しました。そんなこともあってこの Vicuna – CMS を Seesaa BLOG でも使えないものかと思い立ち、移植してみました。Seesaa 独自のテンプレートタグの情報が少なすぎて悪戦苦闘しつつもなんとか形になったようです。

ページごとのレイアウト変更

オリジナルの Vicuna CMS と同じように、開くページによって body のclass 属性を変えることによってレイアウトが切り替わるようになっています。例えば、トップページとブログ内記事検索結果を見比べるとレイアウトが違うのがわかると思います。

パンくずナビとページャー

とりあえずな感じのパンくずナビを追加。次のページへのようなナビゲーションは Vicuna CMS 方式に。

コンテンツについては使うものだけ

サイドバー等に表示されるコンテンツに関しても使う物は修正。検索フォームとかなにげに面倒くさかった。カレンダーは個人的に必要ないと思っているので放置。それにしても Seesaa BLOG の Powered by なんちゃらはどうにかならんのかな。必ず表示しなければいけないにも関わらずソースが糞すぎる。そして修正できないというジレンマ。

なるべく日本語で

やっぱ日本人なので。でも、ところどころ英語のまま。

とりあえずファイル置いときます

テンプレート

• Seesaa.Vicuna – HTML
• Seesaa.Vicuna – 記事
• Seesaa.Vicuna – コンテンツ

スキンは適当なところにアップロードして、デザインのスタイルシートに以下のようなソースを書いてスキンを読み込む。

@charset "Shift_JIS";
/*
Theme Name: wp.Vicuna
Theme URI: http://wp.vicuna.jp/
Description: wp.Vicuna Structure Template + Skin
Version: 1.5.9
Author: wu
*/
@import url("http://hogefuga/スキン名(style-vegaなど)/import.css");

なお、元にするデザインはデザイン一覧から 3 カラムレイアウトのものを適当に選ぶと幸せになれます。左のサイドバーに置いたコンテンツは div id="utilities" 内 dl class="navi" の中へ格納され、右のサイドバーに置いたコンテンツは div id="utilities" 内 dl class="others" の中に格納されます。え？言ってる意味がわからない？すいません。

ライセンスとか

オリジナルの Vicuna CMSのライセンスに準じます。自己責任で。