カテゴリ別タグクラウド表示機能をGush/WordPressのサイドバーに組み込んでみた。

公開日: 

SiSO-LAB WPカテゴリ別タグクラウド表示

何かいろいろなジャンルの記事を書き散らしているうちに収拾のつかなくなってきたSiSO-LABです。このままいけばタグも大変そうなことになりそうです。しかし、これを技術で克服すべく?カテゴリ別タグクラウド機能を実装してみました。

本記事は、WordPress V4.0と無料テーマのGush2 V1.1.0にて動作確認を行っています。

カテゴリ別タグクラウド機能をサイドバーへ実装

ここまでの経緯については、前記事を読んでいただければと思います。

要は、

  • タグクラウドかっこいい、使ってみたい。
  • 当ブログはジャンルが広いのでタグが見辛くなりそう。
  • よし、カテゴリ別にタグを表示しよう!

という話です。

「PHP CODE」というプラグインを使って、ウィジェットでプログラム実行できるようにして組み込むのもいいかな?と思ったのですが、とりあえず今回は、素直に「sidebar.php」にソースコードを組み込むことにしました。

参考にさせていただいたソースコードは以下のものです。

WordPress › フォーラム » 各カテゴリにタグクラウド

上記情報では、「functions.php」に新しい関数を定義し、それを呼び出すようにしていますが、シンプルにサイドバーの表示を行っている「sidebar.php」に追記してみました。

親カテゴリに属するタグだけ表示

まずは追記した部分です。Gushでは新着記事リストはサイドバーに表示していますが、この表示は記事の個別表示時のみに行われています。これはウィジェットではなくPHPコードで表示しており、「sidebar.php」に記述されています。

ホーム画面ではいろいろな記事が一覧で表示されますので、ここでタグクラウド表示はしない方がよさそうです。そこで、Gushの新着記事と同様、記事の個別表示時のみ行うようにすることにしました。

追加したコードは以下のようなものです。


<?php if(is_home()): ?>
<?php else: ?>
<div class="side_contents">
<h4>カテゴリ別タグクラウド</h4>

<?php
  foreach((get_the_category()) as $cat) {
    $cat_id = $cat->cat_ID ;
    if( $cat->parent == 0 ) break ;
  }
  $args = 'cat=' . $cat_id;
   :
   :
<?php endif; ?>

まず、「is_home()」にてホーム画面か確認し、ホーム画面でなければカテゴリ別タグクラウド表示を行うようにしました。

また、カテゴリの取得ですが、複数カテゴリでうまくソートしてタグクラウドを表示する方法が思いつかなかったので1つだけにしました。

どうもget_the_category()はカテゴリIDの小さい方から取得してくるようで、ただ単に最初に見つけたカテゴリだと塩梅が良くなかったので、最初に見つかった親カテゴリ1つだけをタグ検索対象としました。

親カテゴリの検出方法

get_the_category()関数を調べてみたところ、単なるカテゴリID取得だけでなく、取得したカテゴリIDに親があるかどうか調べることができるんですね!

テンプレートタグ/get the category – WordPress Codex 日本語版

こちらによれば返されるオブジェクトのメンバー変数 「parent」が「0」なら「親無し」(=親かな?)、親カテゴリがあればそのカテゴリIDがセットされるようです。

そこで、「if( $cat->parent == 0 ) break ;」とすることで、親無しカテゴリならばすぐにループから抜けるようにしました。

また、親カテゴリが付いてない記事だった場合は、カテゴリIDが最後のものでタグ検索します。

あまりしっかりしたやり方ではないのですが、まあ、SiSO-LABの実用には耐えると思います。もし、もっといいやり方があったらぜい教えてください。

カテゴリ別タグクラウド表示全ソースコード

というわけで、「sidebar.php」に実装したコードは以下の通りです。


<?php if(is_home()): ?>
<?php else: ?>
<div class="side_contents">
<h4>カテゴリ別タグクラウド</h4>

<?php
  foreach((get_the_category()) as $cat) {
    $cat_id = $cat->cat_ID ;
    if( $cat->parent == 0 ) break ;
  }
  $args = 'cat=' . $cat_id;

  $defaults = array(
    'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'ASC',
    'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true
  );

  $args = wp_parse_args( $args, $defaults );

  global $wpdb;
  $query = "
    SELECT DISTINCT terms2.term_id as term_id, terms2.name as name, t2.count as count
    FROM
      $wpdb->posts as p1
        LEFT JOIN $wpdb->term_relationships as r1 ON p1.ID = r1.object_ID
        LEFT JOIN $wpdb->term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
        LEFT JOIN $wpdb->terms as terms1 ON t1.term_id = terms1.term_id,
      $wpdb->posts as p2
        LEFT JOIN $wpdb->term_relationships as r2 ON p2.ID = r2.object_ID
        LEFT JOIN $wpdb->term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
        LEFT JOIN $wpdb->terms as terms2 ON t2.term_id = terms2.term_id
      WHERE
        t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id = " . $args['cat'] . " AND
        t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
        AND p1.ID = p2.ID
  ";
  $tags = $wpdb->get_results($query);
  foreach ( $tags as $key => $tag ) {
    if ( 'edit' == $args['link'] )
      $link = get_edit_tag_link( $tag->term_id, $args['taxonomy'] );
    else
      $link = get_term_link( intval($tag->term_id), $args['taxonomy'] );
    if ( is_wp_error( $link ) )
      return false;

    $tags[ $key ]->link = $link;
    $tags[ $key ]->id = $tag->term_id;
  }

  $return = wp_generate_tag_cloud( $tags, $args );
  $return = apply_filters( 'wp_tag_cloud', $return, $args );

  if ( 'array' == $args['format'] || empty($args['echo']) )
    return $return;

  echo $return;
?>
<?php endif; ?>

カテゴリ別タグクラウド表示動作確認

というわけで動作確認です。まずはホーム画面(トップ画面)の表示です。この時はタグクラウド表示はされません。

WPカテゴリ別タグクラウド表示

続いて記事の個別表示です。この時は、記事に関連するタグクラウド表示を行います。

WPカテゴリ別タグクラウド表示

そして最後に、カテゴリで抽出表示した時のタグクラウド表示です。ちゃんと関連するタグが表示されているのがわかります。

WPカテゴリ別タグクラウド表示

とまあ、いい感じで動作はしているのですが、まだまだ作り込みが甘くてイマイチです(後述)。とりあえず今は用が足りているので、未来の自分に期待することにします。:-P

 

今日の一言二言三言

 

まだちょっと バッチリできた! には遠いかな

 

個別記事表示やカテゴリ抽出表示、タグ抽出表示ではいい感じで動作してくれる「カテゴリ別タグクラウド表示」ですが、これが検索表示になると必ずしもいい感じとは言い難い結果になります。

また、タグが見つからなかったときの処理も入れてなかったりします。

やはりここは、複数カテゴリにたいしてタグを取得、それをソートして表示するPHPプログラムを書けるスキル(SQLのスキルかな?)を付けないとですね。

 

WordPress/Gushでサイドバーにカテゴリ別タグクラウドを表示してみるとか。

SiSO-LABはWordPressに無料テーマのGushで運用しています。記事内容が雑多で収拾がつかないため、タグクラウド表示をカテゴリ別に表示することで少しでも見やすくならないか挑戦してみました。
  • このエントリーをはてなブックマークに追加
  • Pocket

関連前後記事

PAGE TOP ↑