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;
}
?>

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

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