カテゴリー: 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対応 – 更新を怠る日々を参考にして修正。

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

カテゴリー
Web

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

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

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

カテゴリー
Web

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 を加筆修正。

カテゴリー
Web

wp.Vicuna のサイドバーの最新記事に投稿日を表示

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 で括ってやるかな。

参考リソース
カテゴリー
Web

検索ロボット用 XML サイトマップを手軽に作成

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

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

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

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

robots.txt の記述
Sitemap: http://hoge/sitemap.xml

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

参考リソース
カテゴリー
Web

wp.Vicuna のサイドバーのカテゴリーとアーカイブに記事数を表示

ここの 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 で括ってくれると有り難かったりすんだよなあ。

参考リソース
カテゴリー
Web

フッターの著作権 (Copyright) 表記

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

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

Copyright ©

まずは Copyright の記述。SONY のサイトでは Copyright と記述されているけど、略式記号の © (&copy; と記述) を使うことにする。閲覧環境によっては © が表示されない場合があるかもしれないのでとりあえず 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 してやると幸せになれる。

参考リソース
カテゴリー
Web

PHP を使って IE 6 以外の UA では XML 宣言をする

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

404 not found – error.cgi

とりあえずエラーページを用意してみました。いわゆる 404 Not Found とかいうアレです。

なぜって？ディレクトリ内の丸見えを防ぎたかったんです

使っているサーバはさくらインターネットのレンタルサーバ スタンダードプランで、さくらは .htaccess で設定をいぢることはできるんですが、Options が使えない。なのでインデックスファイルが存在しないディレクトリを開いた時に中身が丸見えになるのを防ぐには、Options を使わずに違うアプローチが必要になる。公式サポートのひみつのフォルダにあるファイルの一覧を見られないようにしたいというページでは DirectoryIndex を使ってインデックスファイルの設定の最後にエラーページを指定して、インデックスファイルが存在しない場合はエラーページに飛ばす方法が書かれていました。まあ、この方法を使うことにしたわけですが、ただエラーページを用意しただけじゃつまらないので色々と細工をしてみました。

めんどくさいことは Perl に投げちゃお

細工と言っても単純で、エラーコード 404 だけでなく 403 や 500 にも対応できるように、エラーページを Perl スクリプトにして動的に出力してやることにしました。

ステータスコードは検索ロボットたちに優しいんです

Perl スクリプトにすることでステータスコードをきちんと返すことができるようになる。きちんとステータスコードを出力することによって、エラーを、人にだけでなく Google や Yahoo などの検索ロボットにも伝えることができるので、結果的に検索から訪れる人に対してのエラーを減らすことができる。

真っすぐな視線には弱いんです

なお、当初の目的である、インデックスファイルがない時に error.cgi へ飛ばした場合ですが、error.cgi へ直接アクセスされることになります。なので、直接 error.cgi へアクセスがあった時はエラー 404 を返し、ファイルは存在しませんよと偽装することにしました。

error.cgi の大まかなサンプルコード
my $error_code = $ENV{REDIRECT_STATUS};

# エラー 500 (Internal server error) の場合
if ( $error_code eq "500" ){

# エラー 404 (File not found) の場合
} elsif ( $error_code eq "404" ){

# エラー 403 (Permission denied) の場合
} elsif ( $error_code eq "403" ){

# error.cgi への直接リンクの場合
} else {
    # 404 を偽装しステータスコードも 404 を返す
    print "Status: 404 Not Found\n";

}
.htaccess の中の関連する項目
#-----------------------------------------------
# インデックスファイル

DirectoryIndex index.cgi index.php index.xhtml index.shtml index.html /error/error.cgi

#--------------------------------------------------
# エラー400 (Bad Syntax) リクエストの方法が違います
# エラー401 (Authorization Required) 認証に失敗しました
# エラー403 (Permission denied) アクセス権限がありません
# エラー404 (File not found) 該当するページが見つかりません
# エラー500 (Internal server error) 内部サーバーエラー（主にCGIなどの誤り）

#ErrorDocument 400 /error/400.php
#ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/error.cgi
ErrorDocument 404 /error/error.cgi
ErrorDocument 500 /error/error.cgi
error.cgi の実行結果例

エラーページ作成にあたって 68user’s page 内の error.cgi を参考にしました。

カテゴリー
Web

seesaa.Vicuna

seesaa.Vicuna - style-vega

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

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

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

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

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

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

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

なるべく日本語で

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

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

テンプレート

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

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