WordPressサイトのトップページにランダムでカテゴリ名を表示する方法

たくさんのカテゴリを持ったサイトのトップページには、カテゴリページへのリンクを設置すると思います。
トップページにリピートするユーザーが多いサイトでは、いつも固定のカテゴリへのリンクではなく、アクセスするたびに変化するリンクを用意したいと考える時もあると思います。

そんな場合に、カテゴリごとに画像とタイトル・説明文を表示して、注目のカテゴリ的なものを1個と、その他的なカテゴリを4個表示させる方法を解説します。

具体的なイメージとしては下の画像のような感じです。

具体的にどのように設定をするか、順に解説します。

表示するカテゴリをランダムに並び替え

index.php（メインインデックステンプレート）など、トップページを表示しているテンプレートファイルに、以下のPHPのコードを書きます。

<?php
//全カテゴリデータを取得
$cat_all = get_terms( "category", "fields=all&get=all" );

//全カテゴリ数から乱数の配列を生成
$cat_list = range(0, count( $cat_all )-1);
shuffle( $cat_list );
?>

全カテゴリデータを取得しておいて、そのカテゴリの数を最大値とした数値の配列を作ります。
その後shuffleでそれをランダムに入れ替えています。

この処理をしないと、常に同じ順序でカテゴリが表示されてしまいますよ

ランダムに並べ替えたカテゴリリンクを表示する

次にページに表示する部分を書いていきますが、その前に表示する画像を準備します。
画像のファイル名はカテゴリ名のslugを使います。

blogというslugを持つカテゴリの場合、blog.pngやblog.jpgが対応する画像になります。
また作成する画像形式（拡張子）は必ず統一してください。
統一してあれば.pngでも.jpgでも構いません。

（デザイン的な要素は説明していませんので、適宜CSSで調整をしてください）

<!--slugをファイル名にした画像を表示-->
<img src="/images/category-img/<?php echo $cat_all[$cat_list[0]]->slug; ?>.png">

<!--カテゴリ名の表示-->
<?php echo $cat_all[$cat_list[0]]->name; ?>

<!--カテゴリの説明文を表示-->
<?php echo $cat_all[$cat_list[0]]->description; ?>

$cat_list[0]の数字の部分は、1、2、3という順に表示する場所ごとに変えます。

サンプルの一番上の大きなエリアを「1」とすれば、その次の小さめのエリアは「2」にします。

少しコードをスマートにする

ここまでで「トップページにカテゴリリンクをランダムに表示させる」という目的は達成できますが、コードがスマートではありません。

ランダム表示にするカテゴリリンクが、ページのあちこちにあるのであれば、一つ一つコードを書く必要がありますが、2個目以降のカテゴリリンクが一箇所に集まっているデザインにするなら、以下のようなコードがスマートです。

「$i<2」の数字は表示させるカテゴリの数をセットします。 例では2つのカテゴリをランダムに表示させるようにしています。

<?php
for( $i=0 ; $i<2 ; $i++ ){
	echo '<img src="/wordpress/wp-content/uploads/2014/02/'.$cat_all[$cat_list[$i]]->slug .’.png”>’;
	echo $cat_all[$cat_list[$i]]->name;
	echo $cat_all[$cat_list[$i]]->description;
}
?>

「役にたった」と思ったらシェアお願いします