Home > べたろぐ。 > Web > 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 を加筆修正。

関連するかもしれない記事

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://szdy.info/wp/2009/05/06/525/trackback/
Listed below are links to weblogs that reference
WordPress のサイドバーに記事で使った画像をランダムに表示 from べたろぐ。

Home > べたろぐ。 > Web > WordPress のサイドバーに記事で使った画像をランダムに表示

最近のコメント
Search
Feeds
Meta

Return to page top