Archive for 12月, 2011

パンクズリスト自動生成プラグイン「Breadcrumb NavXT」

12月 13th, 2011 by berry | No Comments | Filed in wordpress

パンくずリストとは、トップページから現在表示しているページまでの階層を示したリストのことです。
↓のようなやつですね。

トップページ > 商品一覧 > 亀こ子たわし

ユーザーを迷わせないためには欠かせない表示ですね。
企業のサイトでこのパンくずリストを設置していないサイトはほとんど見なくなりました。

wordpressでは、「Breadcrumb NavXT」というプラグインを利用することで簡単にパンクズリストを設置することができます。wordpress利用者の方にはおなじみの定番プラグインですね。
現在は日本語対応もされておりさらに使いやすくなっています。

プラグインをインストールすると 管理画面の「設定」の中にBreadcrumb NavXTが追加されており、細かく設定が可能です。
何も設定しなくても動作しますが、最低限は「ホームタイトル」の設定は必要でしょう。

あとは以下のコードを書き込むだけで、自動的にパンクズリストを表示してくれます。
index.php か header.phpに書き込むのが一般的だと思います。

<?php
if(function_exists(‘bcn_display’))
{
// Display the breadcrumb
bcn_display();
}
?>

すると、

<a title=”トップページ” href=”http://○○.com”>あいうえお商会トップ</a> &gt; <a title=”最新情報” href=”http://○○.com/category/news/”>最新情報</a> &gt; 新商品の紹介

と、aタグのみ使用でシンプルに出力されます。
これをechoで<div>を出力するようにすればスタイルの設定等できますね。

<?php
if(function_exists(‘bcn_display’))
{
// Display the breadcrumb
echo ‘<div class=”kuzu”>’;
bcn_display();
echo ‘</div>’;
}
?>

出力はこうなります。

<div class=”kuzu”>
<a title=”トップページ” href=”http://○○.com”>あいうえお商会トップ</a> &gt; <a title=”最新情報” href=”http://○○.com/category/news/”>最新情報</a> &gt; 新商品の紹介
</div> 

スタイルの設定はこんな感じにしています。
CSSのおさらい:heightとline-heightを同じにすることで、文字をボックスの中央に寄せる事ができますね。

.kuzu{
height:40px;
line-height:40px;
font-size:12px;
}

最新のコメントや最新のトラックバックを分けて表示・好きな場所に表示できるプラグイン「Commented entry list」

12月 8th, 2011 by berry | No Comments | Filed in wordpress

ヴィジェットの最新のコメントを使うと最新のトラックバックも一緒に表示されてしまいます。

コメントだけ表示させたりしようとするにはややこしいコードを書かないといけないのですが、「Commented entry list」というプラグインを使えば簡単に、しかも好きな場所に表示させることができます。

注)wordpress3.0以上をご利用の場合、うまく動作しません。プラグインの中身を修正しないといけなくなっています。

ありがたいことに以下のブログ運営者様が修正済のものを公開してくださっていますので、そちらのご利用をお勧めいたします。
http://www.koikikukan.com/archives/2011/01/13-005555.php

あとはインストールして有効化し、表示させたい場所に次のコードを入力するだけです。

最新のコメント表示
()の中は表示させたいコメントの数を入力します。デフォルトでは10件となっています。

<?php get_recently_commented(5); ?>

最近のトラックバック/ピンバックの表示
()の中は表示させたいトラックバック/ピンバックの数を入力します。デフォルトでは10件となっています。

<?php get_recently_trackbacked(5); ?>

 

 

複数のRSSフィードを表示 「Google Feed API」利用その2 フィードごとにアイコン表示

12月 2nd, 2011 by berry | No Comments | Filed in RSSフィード

Google AJAX Feed APIではフィードプロパティの値「author」を使ってブログ投稿者の名前を呼びだすことができるので、これを利用してフィードごとに違うアイコンを表示することができます。

以下は前回のJavaScriptコードのHTMLを呼び出す部分です。

wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);

ここの年月日とタイトルの間に赤字の部分を追加してみました。

wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><img src=”img/’ + entry.author + ‘.gif” /><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);

entry.authorの部分に投稿者名の名前が呼び出されるので
この場合img/の中の「投稿者名.gif」が呼び出されます。

※アメブロの場合は投稿者(name値)が設定されていない為か、呼び出されず「.gif」となってしまいます。
なので

<img src=”img/’ + entry.author + ‘.gif” />

<img src=”img/icon‘ + entry.author + ‘.gif” />

としておきimg/の中に「icon.gif」を入れておけばアメブロ用のアイコンとして表示されます。
その場合、他のアイコンは「icon投稿者名.gif」となります。