カテゴリー一覧ページに、アイキャッチをずらりと並べる

アイキャッチを一覧表示するようにしたときの備忘録です。
PHPとWordPressのカスタマイズについて、ちょっとわかる方向けの記事になります。

WordPressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

カテゴリーページが文字だけで殺風景だった
「Cocoon」はカテゴリーページにアイキャッチを設定できる
アイキャッチ画像の呼び出し方を調べる
一覧にアイキャッチを表示するコードを「functions.php」に書く
ショートコードを呼び出す固定ページを作る
カテゴリーを好きな順に並べ替えるコードを追加
固定ページを表示して確認
まとめ

カテゴリーページが文字だけで殺風景だった

最初は、カテゴリー一覧のページをWordpressの便利機能「wp_list_categories」で簡単に表示していたのですが、画像で表示できるようになったらオシャレかな。

と思って検索したのですが、自分の思いとバッチリ合うページが見つからなかったので、自分で作ってみました。

この画像は「wp_list_categories」を使ってショートコードを作り、CSSの設定は何もせずに表示したものです。

ただのリスト表示なので面白みのカケラもないので、私好みにカスタマイズしていきます。

「Cocoon」はカテゴリーページにアイキャッチを設定できる

超有名無料WordPressテーマ｢Cocoon」様には標準でカテゴリーページにアイキャッチ画像が表示できる機能があります。
他のテーマはできるかどうかわかりませんので、お使いのテーマで対応可能か調べてみてください。

まずは全カテゴリーページにアイキャッチ画像を設定していきます。

カテゴリーの中からお気に入りの一枚を選んで、文字を載せてアイキャッチ画像を作ったものをアップして設定していきます。

今回はアイキャッチ画像を一覧表示させるコードを書くのが最優先ですので、説明文などは簡単に入力して、追々修正していくことにします。

設定して更新ボタンを押してカテゴリーのページを確認すると、アイキャッチが追加されました。良い感じです。

この作業をすべてのカテゴリーページでやってから次の作業に移ります。

アイキャッチ画像の呼び出し方を調べる

まずは、カテゴリーのアイキャッチ画像をどうやって呼び出しているのかを調べます。

「/wordpress/themes/cocoon-master/tmp/categoriy-content.php」という、いかにもここに秘密がありそうなファイルを見つけましたので、これを開いて確認します。

//カテゴリIDの取得
$cat_id = get_query_var('cat');
$eye_catch_url = get_the_category_eye_catch_url($cat_id);
$content = get_the_category_content($cat_id);

ここっぽいですね。
get_the_category_eye_catch_url($cat_id);　でアイキャッチ画像が呼び出せそうなので、これを使ってアイキャッチ画像一覧表示を作ってみたいと思います。

一覧にアイキャッチを表示するコードを「functions.php」に書く

//カテゴリアイキャッチ一覧表示
function shortcode_get_eye_category(){
  $categories = get_categories('get=term_id'); //カテゴリIDを取得
  $cat_eye_link = '<ul class="cat_list_ul">' . "\n";

  foreach( $categories as $category ) {
    $cat_eye_link .= '<li class="cat_list_li"><a href="' . get_category_link( $category->term_id ) . '">'; //カテゴリーページのリンクを作る
    $cat_eye_link .= '<img src="' . get_the_category_eye_catch_url( $category->term_id ) . '"></a></li>' . "\n";//アイキャッチ画像を表示

  $cat_eye_link .= '</ul>';
  return $cat_eye_link;
  }
 add_shortcode( 'custom_category_eye', 'shortcode_get_eye_category' ); //ショートコードにして好きな場所で呼び出せるようにする

「get_the_category_eye_catch_url」がCocoonで定義されてる関数っぽいですけど、ちょっとどこに書かれているか見つけられませんでしたけども、使えたのでよし。

カテゴリーIDを取得 → リンク付きのアイキャッチ画像を表示 → ショートコード化　という処理が作れましたので、functhions.php に書き込み、サーバにアップします。

ショートコードを呼び出す固定ページを作る

固定ページにタイトル、簡単な説明、作ったショートコード custom_category_eye を呼び出す固定ページを作って表示してみました。

表示はできましたが、残念！プラグインで指定していたカテゴリーの順番がバラバラになっています。

今回のコードとカテゴリーを並べ替えるプラグインの相性が悪いようなので、並べ替えもPHPの中でやってしまおうと思います。

カテゴリーを好きな順に並べ替えるコードを追加

カテゴリーの説明欄に数字を入れて数字の順番に並べ替えられるようにして、「array_multisort」を使って並べ替えのコードを一旦作ったのですが、

 $categories = get_categories('get=term_id , description'); //IDと説明文を取得

 foreach($categories as $key => $value){
    $sort_keys[$key] = $value->description; //説明文の内容で並べ替え
 }
array_multisort($sort_keys, SORT_ASC, $categories); //配列全体を並べ替え

検索していたらもっとオシャレな感じのオブジェクトの並べ替えコードを見つけたので、こちらを採用することにしました。

usort($categories, function ($a, $b) {
  return $a->description< $b->description? -1 : 1;
});

この二つの結果は全く同じになったので好きな方を使えば良いと思います。
（オブジェクト指向もっと勉強しよう・・・。）

↑こちらのサイトを参考にさせていただきました。

最終的に完成したコードはこちら↓

//カテゴリアイキャッチ一覧表示
function shortcode_get_eye_category(){
 $categories = get_categories('get=term_id , description');

usort($categories, function ($a, $b) {
  return $a->description< $b->description? -1 : 1;
});  

  $cat_eye_link = '<ul class="cat_list_ul">' . "\n";
  foreach( $categories as $category ) {
    $cat_eye_link .= '<li class="cat_list_li"><a href="' . get_category_link( $category->term_id ) . '">';
    $cat_eye_link .= '<img src="' . get_the_category_eye_catch_url( $category->term_id ) . '"></a></li>' . "\n";
  }
  $cat_eye_link .= '</ul>';
  return $cat_eye_link;
}
add_shortcode( 'custom_category_eye', 'shortcode_get_eye_category' );