rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

Stingerで関連記事に表示される対象カテゴリーを暫定カスタマイズする

      WordPress, 開発 ,

  • このエントリーをはてなブックマークに追加
  • Pocket

stinger0003

以前 WordPress テーマを Stinger切り替えてから、あまり詳細を気に留めることなくそのまま使っていたのですが、近頃になって投稿ページの記事下に出る関連記事の表示内容に、あまり関連してないようなエントリがよく表示されることが気になっていました。

その原因調査と、その対応にちょっとしたカスタマイズを入れた子ネタのメモです。

※以下、Stinger バージョン20140327 でのソースを前提にした説明となります。

原因

single.php の関連記事の表示部分を見てみます。

    <!--関連記事-->
    <h4 class="kanren">関連記事</h4>
    <div class="sumbox02">
      <div id="topnews">
        <div>
          <?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 10,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$st_query = new WP_Query($args); ?>
          <?php
if( $st_query -> have_posts() ): ?>
          <?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
          <dl>
            <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
              <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
              <?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
              <?php else: // サムネイルを持っていないときの処理 ?>
              <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
              <?php endif; ?>
              </a> </dt>
            <dd>
              <h4 class="saisin"> <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
                </a></h4>
              <p class="basui">
             <?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
              <p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
            </dd>
          </dl>
          <?php endwhile;
?>
          <?php else:
?>
          <p>記事はありませんでした</p>
          <?php
endif;
wp_reset_postdata();
?>
        </div>
      </div>
    </div>
  </div>
  <!--/kizi--> 
  <!--/関連記事-->

関連記事の表示には、ざっくり次のようなことがされているようです。

  • 表示している投稿のカテゴリーを全部取得
  • 取得したカテゴリーに属している投稿をランダムで10件取得
  • 取得した投稿を関連記事に表示

この処理を見て、このブログのカテゴリーの管理方法に原因があることに気付きました。

カテゴリー

例えば、当ブログでは現在上記のような親子階層を持つカテゴリー構造を作っているんですが、「生活」+「子育て」に属する投稿と、「生活」+「将棋」に属する投稿はどちらも「生活」に該当するので、関連記事として表示されるわけです。動きとしては全然問題無いんですが、「子育て」と「将棋」の記事が関連して出てきてはそりゃあまり具合がよろしくありませんよね・・・。

カスタマイズ

根本的な原因はカテゴリー設計が良くないことだなーと反省はしましたが、そちらを直すのは色々面倒なので、とりあえず暫定的な対応で関連記事をカスタマイズしてみました。

カスタマイズ方針としては、「表示している投稿の全カテゴリーから親階層のカテゴリーは対象外にする」という感じです。

    <!--関連記事-->
    <h4 class="kanren">関連記事</h4>
    <div class="sumbox02">
      <div id="topnews">
        <div>
          <?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
// 取得したカテゴリーをIDでソートして、先頭のレコード(親カテゴリー)は除く
sort( $category_ID);
$arr = array_shift($category_ID);
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 10,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$st_query = new WP_Query($args); ?>
          <?php
if( $st_query -> have_posts() ): ?>
          <?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
          <dl>
            <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
              <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
              <?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
              <?php else: // サムネイルを持っていないときの処理 ?>
              <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
              <?php endif; ?>
              </a> </dt>
            <dd>
              <h4 class="saisin"> <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
                </a></h4>
              <p class="basui">
             <?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
              <p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
            </dd>
          </dl>
          <?php endwhile;
?>
          <?php else:
?>
          <p>記事はありませんでした</p>
          <?php
endif;
wp_reset_postdata();
?>
        </div>
      </div>
    </div>
  </div>
  <!--/kizi--> 
  <!--/関連記事-->

これで、子階層のカテゴリーを持つ記事だけ関連表示されるようになったので、前よりいい感じになりました。

ちなみに、上記のカスタマイズはあくまでうちのブログ用に下記条件が前提となっています。

  • 必ず各投稿が親子それぞれのカテゴリーに属している
  • 親カテゴリーのID < 子カテゴリーのID になっている(必ず親→子の順に登録している想定なので)

ちゃんとやるなら、最上位階層にあるカテゴリーかどうか判定して除く、とかやるのが正しいやり方かと。どのブログでも流用できるカスタマイズではないことにご注意ください・・・。

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

Prime Timeline
WordPressのコア動作を解析できるプラグイン「Prime Timeline」を使ってみた

先日読んだ「詳解 WordPress」の中でも紹介されていたプラグイン「Prim …

地図
JavaScriptでUserAgentからスマートフォン判別して地図サイズ切り分け

photo credit: Annie Mole via photopin cc …

WordCamp Tokyo 2016
WordCamp Tokyo 2016 行ってきました! #wctokyo

WordCamp Tokyo 2016 行ってきました! 爽やかな朝です。Wor …

WordPress
WordPressで特定のタグを持つ投稿にだけ共通メッセージを表示させてみる

WordPressの小ネタです。 ある特定のタグを持つ投稿にだけ、本文の先頭に共 …

git2xserver
XSERVER に Git をインストールする手順

知人の XSERVER で作業をする機会があったのですが、標準で Git が入っ …

gopher
Vimeoのサムネイル画像をGo言語のコマンドラインツールから取得してみる

とある件で Vimeo のサムネイル画像を取得する用事があったんですが、Vime …

IPアドレス
IPエイリアスで一つのNICに複数IPアドレスを割り当てる設定手順(CentOS)

IPエイリアス機能を使って、一つのネットワークインターフェースに複数のIPアドレ …

Gravatar
Gravatar Widgetプラグインでサイドバーにプロフィール画像を表示してみた。

Gravatar Widget Gravatar WidgetというWordPr …

WordBench 東京
WordBench東京 7月「WordPressでのブログライティングとブログ運営」に参加してきたのでその感想など。

7月3日に開かれた、WordBench東京7月『WordPressでのブログライ …

20130328_jodconverter
OpenOfficeとLibreOfficeを使ってJODConverterのPDF変換結果を比べてみる

photo credit: hfreesartography via photo …