Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

ランダム記事の表示

今回はプラグインを使用しないでランダムな記事を表示する方法について。

サイドバーのこの部分のことです。

blog026

 

これは以下サイトを参照して実装しました(ランダム以外にもいろいろと参考になります)。

プラグインを使わずWordPressに9の機能をつける

 

ただしサンプルコードのままだとサムネイルがなくて少し寂しいので本ブログでは以下のようにしました。

 

css

.random {
    overflow:hidden;
    margin:0px 5px 5px 5px;
}
    .random ul{
        margin:0px;
        padding:0px;    
    }
    .random li{
        margin:0px 0px 5px 0px;
        padding:5px;
        min-height:80px;
        border-bottom:#42acff 1px solid;
    }
    .random a{
        color: #00f;
        text-decoration: none;
    }
    .random a:hover {
        color: #0f0;
        text-decoration: none;
    }

.random-thumbnail{
    float:left;
    width:80px;
}

.random-post-title{
    float:right;
    padding:0px 0px 0px 10px;
    width:188px;
    color:#00f;
    font-size:90%;
    overflow:hidden;
}