出力される 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対応 - 更新を怠る日々を参考にして修正。

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

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

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

とてもシンプルに、記事へのリンクを貼った画像を表示するように設定。そして、リンク先の記事名を 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 を加筆修正。

• 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 番目。

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

カテゴリー一覧 (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 日本語版

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

アレです。現実逃避。

だって年間 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のライセンスに準じます。自己責任で。