記事の表示順をカスタムフィールドの値で制御する

やりたいことは、つまりランキングですが、ランキングの並び順を「偏差値・年間学費・国家試験合格率」というカスタムフィールドの数値の昇降順を使って並べ替える、というケースです。並べ替えた上で、記事に「○位」というナンバリングを行うためにCSSを使いました。

下記の両方の記事のあわせ技になります。（少し変更しています）

CSSによる自動ナンバリング

アーカイブの表示並びの指示（wordpress）

<?php
$args =  array(
  'post_type' => 'ranking', //カスタム投稿名（投稿の場合はpost）
  'post_status' => 'publish',
  'posts_per_page' => -1,
  'meta_key' => 'ranking_deviation', //カスタムフィールド名
  'orderby' => 'meta_value_num',
  'order' => 'DESC'
);
?>
<?php $my_query = new WP_Query( $args ); ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php echo get_template_part('inc/loop','ranking'); ?>//テンプレート呼び出し
<?php endwhile; // end of the loop. ?>
<?php wp_reset_postdata(); ?>

CSSによる自動ナンバリング

htmlは実際のものよりも簡略化してあります。

<ul class="rankingList">
<li><span class="rank">位</span></li>
......
</ul>

.rankingList{
counter-reset: ranking;
}

.rank::before{
counter-increment: ranking;
display:inline-block;
content:counter(ranking);
}