【WordPress】様々なループ編（番外編：人気記事一覧を表示したい「WordPress Popular Posts」）

function my_widgets_init() {
  register_sidebar(array(
    'name' => '人気記事', //任意でお好きな名前にしてください。
    'id' => 'popular_articles', //任意でお好きなidにしてください。人気記事を追加したい場所で呼び出すために使います。
    'description' => '人気記事を表示するためのウィジェトです', //任意でお好きな説明にしてください。
    'before_widget' => '<div id="%1$s" class="widget %2$s">', //デフォルトだとlistタグになるためタグを変えたい場合に使用してください。
		'after_widget'  => '</div>',
  ));
}
add_action( 'widgets_init', 'my_widgets_init' );

<?php if (is_active_sidebar('popular_articles')) : ?>
    <div class="popular_articles">
        <?php dynamic_sidebar('popular_articles'); ?>
    </div>
<?php endif; ?>

/* 「人気記事」のランキング順位表示 */
ul.wpp-list li {
    position: relative;
}
/* ランキングカウンター */
ul.wpp-list li:before {
    content: counter(wpp-count);
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background-color: #666;
    border-radius:50%;
    z-index: 1;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}
/* カウント数 */
ul.wpp-list li {
    counter-increment: wpp-count;
    overflow: visible;
}
/* ランキング1〜3の色変更 */
ul.wpp-list li:nth-child(1):before{
    background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%);
}
ul.wpp-list li:nth-child(2):before{
    background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
ul.wpp-list li:nth-child(3):before{
    background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
}