foreachの勉強がてら、ブログ内に存在するすべてのタグを取得し1件ずつ表示させるループを書いた[WordPress]

名古屋にある、ちょっとばかし個性的なデザイン会社である株式会社デックさんが、先日WebサイトをWordPressでリニューアルしました。
実は、この私めもこのサイトのごく1部分、というか数行だけコードを書かせてもらいました。
お手伝いしたのは、「作品集 プロジェクト別」のページです。

このページの仕様としては、

  • クライアント名 = 投稿タグ で管理している。
  • クライアント名、およびサムネイル画像をクリックするとタグアーカイブへ飛ぶ。
    (そのクライアント名のタグの付いた投稿が一覧表示)
  • サムネイル画像は、そのタグのついた投稿のうち、最新の投稿でアイキャッチ画像に設定されたものを自動で表示
  • クライアント(投稿タグ)数が今後どんどん増えていっても、テーマに手を加えることなく自動で増えていくようにする。

たまたまWordBencn Nagoya勉強会でデックのデザイナーさんにお会いした時にやり方を聞かれたのですが、即答できなかったので持ち帰って少し考えました。
ちょうどWordPressと関係なく、PHPのforeachの勉強をしてたので、これを使ってやってみました。
ブログネタに使わせてもらえるようお願いしましたので、このページの実装方法をご紹介します。

※注記:公開後、さっそくもっといい方法をツッコミいただきました。詳しくは最後のほうで。


ポイントとしては、

  • 同じ投稿タグが付いている投稿の中から、新着1件を取り出すループを書く
  • そのループの外側を、さらに存在するタグをすべて取り出すループで囲む

ということです。しっかりついてきてくださいね。

1. なにはともあれアイキャッチ画像を使えるようにする

まず、

お使いのテーマのfunctions.php内に、アイキャッチ画像を有効化する記述を追加します。

add_theme_support( 'post-thumbnails' ); //アイキャッチ画像を有効化
set_post_thumbnail_size( 480, 360, false ); //アイキャッチ画像のデフォルトサイズを定義(数字はサイトに合わせて適当に)
add_image_size( 'home-thumbnail', 178, 133, true ); //トップページ用に、2つめのアイキャッチ画像サイズを定義
/* home-thumbnailという名は私が適当につけたものなので変えてもOKです。 */

すでにadd_theme_supportとset_post_thumbnail_sizeが書いてある場合には、add_image_sizeのみ追記してください。

ここでのキモは、add_image_size ですね。
WordPressでは、画像の生成サイズで「サムネイル/中/大」の3つが用意されていますが、これに好きなサイズを増やしちゃうというものです。
といっても管理画面の画像アップ時に選べるわけではないのですが、何か画像をUPしてuploadsディレクトリ内を見ると、178×133サイズの画像がちゃんと生成されているはずです。

2. タグ1件分のコードを書いてみる

「デック」というタグがついた投稿のうち最新の1件を表示させる処理を書いてみましょう。

これはおさらいですが、get_postsを使いました。

<ul>
     <?php
     $alltagposts = get_posts( array( //以下の条件の投稿を取り出す
               'taxonomy' => 'post_tag', //投稿タグが付いている
               'term' => 'デック', //その投稿タグのスラッグが「デック」である
               'posts_per_page' => 1 //最新の記事1件分
          ));
          foreach($alltagposts as $post) :
          setup_postdata($post);
     ?>
     <li>
          <a href="<?php echo home_url(); ?>/tag/デック"><?php the_post_thumbnail('home-thumbnail'); ?></a>
          <a href="<?php echo home_url(); ?>/tag/デック">デック</a>
     </li>
<?php endforeach; ?>
</ul>
※$alltagpostsという変数名は私が適当につけたものなので変えてもOKです。

これを表示させてみると、アイキャッチ画像とタグ名が表示されているはずです。

しかし、これだと投稿タグの部分が「デック」決め打ちになっています。
次に、この部分を自動化します。

3. 存在するすべての投稿タグを順番に取得する

存在するすべての投稿タグを取得するには、get_terms関数を使います。
get_termsは、get_postsと同じように foreachでループさせることができます。

試しに以下のコードを動かしてみてください。

<ul>
<?php
     $alltags = get_terms('post_tag'); //ブログ内に存在するすべての投稿タグを順番に取得していく
     foreach($alltags as $taginfo):     //取得したタグをその都度、変数$taginfoに代入する
?>
     <li>
          <a href="<?php echo get_term_link($taginfo->term_id,'post_tag'); ?>"><?php echo $taginfo->name; ?></a>
     </li>
<?php endforeach; wp_reset_postdata(); ?>
</ul>
※$alltags , $taginfoという変数名は私が適当につけたものなので変えてもOKです。

※タグアーカイブへのリンクの部分をget_term_linkを使った書き方に変更しました。

<a href="<?php echo home_url(); ?>/tag/<?php echo $taginfo->slug; ?>"><?php echo $taginfo->name; ?></a>

すると、ブログ内で使われているタグ名がずらずらとリスト出力されるはずです。

今回は、この2つのループを入れ子にしました。

4.完成形

2と3の手順を組み合わせると、以下のようなコードが出来上がりました。

<ul>
<!-- リピート箇所start -->
<?php
     $alltags = get_terms('post_tag'); //ブログ内に存在するすべての投稿タグを順番に取得していく
     foreach($alltags as $taginfo):     //取得したタグをその都度、変数$taginfoに代入する
?>
 
     <?php
     $alltagposts = get_posts( array( //以下の条件の投稿を取り出す
               'taxonomy' => 'post_tag', //投稿タグが付いている
               'term' => $taginfo->slug, //その投稿タグのスラッグが、$taginfoに代入された値である
               'posts_per_page' => 1 //最新の記事1件分
          ));
          foreach($alltagposts as $post) :
          setup_postdata($post);
     ?>
 
     <li>
          <a href="<?php echo get_term_link($taginfo,'post_tag'); ?>"><?php the_post_thumbnail('home-thumbnail'); ?></a>
          <a href="<?php echo get_term_link($taginfo,'post_tag'); ?>"><?php echo $taginfo->name; ?></a>
     </li>
     <?php endforeach; wp_reset_postdata(); ?>
 
<?php endforeach; ?>
<!-- リピート箇所end -->
</ul>

あとはCSSでうまいことスタイリングしてやってください。

#補足
タグアーカイプーページヘのリンク

<a href="<?php echo home_url(); ?>/tag/<?php echo $taginfo->slug; ?>"><?php echo $taginfo->name; ?></a>

の部分を、以下のご指摘により変更しました。おぢさまいつもありがとうございます。

参考URL

コメント / トラックバック 2 件

通りすがりの私的マニュアル管理人2012/07/03 23:20

「タグアーカイプーページヘのリンク」は、
get_tag_link関数を使うほうが簡単だと思います。

:mypacecreator| 2012/07/03 23:59

>通りすがりの私的マニュアル管理人 さま

そうですよね・・・ご指摘ありがとうございます!
今回はより汎用性の高い get_term_linkを使った書き方を追記しておきました!
(私的マニュアルいつも拝見しております~m(_ _)mペコリ)

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索