【AFFINGER4-カスタマイズ】関連記事をタグから判断して作成する方法

本日の記事は、AFFINGER既存の関連記事をタグから検索し表示するカスタマイズです。
既存のAFFINGER関連記事はカテゴリから判断され取得されています。それをタグから判断し取得するようカスタマイズしていきます。
カスタマイズ方法はカテゴリを条件にしている箇所をタグに変更するだけなので、難易度はそんなに高くないです。
それでは開始しましょう!
目次
関連記事を取得しているテンプレートはこれだ!
カスタマイズの基本は、カスタマイズするファイルを正確に見つけることにあります。
今回の目的は、関連記事の取得条件を変更することになるので、関連記事を取得しているテンプレートを見つけましょう。
まずは、記事一覧を取得している個別記事のテンプレート「single.php」を確認します。
1 |
if ((trim($GLOBALS['stdata74']) !== '') && ( in_category($GLOBALS['stdata74']) )) { |
AFFINGER管理画面の設定によって使用しているテンプレートが異なります。
一般的に多いのは「single-type1.php」のようですね。
「single-type1.php」の138行目に発見しました。
1 2 |
<!--関連記事--> <?php get_template_part( 'kanren' ); ?> |
これが関連記事のテンプレートですね。
では、「kanren.php」を覗いています。
1 2 3 4 5 6 7 8 |
<?php if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) { }else{ ?> <?php if ( trim( $GLOBALS["stdata63"] ) !== '' ) { $kanrenname = esc_html( $GLOBALS["stdata63"] ); |

1つ目の
1 |
if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) { |
はAFFINGER管理画面の「関連記事を非表示にする」が有効か無効かを見てますね。
7行目の
1 |
if ( trim( $GLOBALS["stdata63"] ) !== '' ) { |
は見出しの設定。
見出しが設定されていれば、その文字列を表示し、未設定ならば「関連記事」が自動的に設定されるようになっています。
肝心なのは15行目。
1 |
if ( isset($GLOBALS['stdata5']) && $GLOBALS['stdata5'] === 'yes' ) { |
ここは、「一覧のサムネイルを表示しない」が有効か無効かを見ています。
有効なら「kanren-thumbnail-off.php」を無効なら「kanren-thumbnail-on.php」のテンプレートを呼び出していますね。
私の場合、サムネイルは表示したいので「kanren-thumbnail-on.php」のテンプレートになります。
「kanren-thumbnail-on.php」をカスタマイズ
このテンプレートで重要なのは設定箇所である8~18行目!
ここをカテゴリ→タグに変更していきます。
1 2 3 4 5 6 7 8 9 10 11 |
$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' => $kanrenpost_no, 'category__in' => $category_ID, 'orderby' => 'rand', ); |
8行目~18行目はカテゴリの情報を元にarrayにして変数$argsに突っ込んでいますね。
ここを…
1 2 3 4 5 6 7 8 9 10 11 |
$tags = wp_get_post_tags( $post->ID ); $tag_ID = array(); foreach ( $tags as $tags ): array_push( $tag_ID, $tags -> term_id ); endforeach; $args = array( 'post__not_in' => array( $post -> ID ), 'posts_per_page' => $kanrenpost_no, 'tag__in'=>$tag_ID, 'orderby' => 'rand', ); |
黄色でマーカーしてある箇所がタグの情報に書き換えたところです。

タグが設定されていない場合の条件を追加しよう
21行目に「関連記事が存在したら~」の条件分岐があります。
1 |
if ( $st_query->have_posts() ): ?> |
ですね。
ここに「タグが設定されていたら~」の条件を追加する必要があります。
1 |
if ( $st_query->have_posts() && !empty($tag_ID) ): ?> |
!empty($tag_ID)
がタグの有無を現す条件分岐ですね。
これを設定しておかないと、タグが設定されていない場合も関連記事を作成してしまいます。
忘れずに設定しておきましょう。
完成系
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>"> <?php if ( trim( $GLOBALS["stdata56"] ) !== '' ) { $kanrenpost_no = $GLOBALS["stdata56"]; } else { $kanrenpost_no = 5; } $tags = wp_get_post_tags( $post->ID ); $tag_ID = array(); foreach ( $tags as $tags ): array_push( $tag_ID, $tags -> term_id ); endforeach; $args = array( 'post__not_in' => array( $post -> ID ), 'posts_per_page' => $kanrenpost_no, 'tag__in'=>$tag_ID, 'orderby' => 'rand', ); $st_query = new WP_Query( $args ); ?> <?php if ( $st_query->have_posts() && !empty($tag_ID) ): ?> <?php while ( $st_query->have_posts() ) : $st_query->the_post(); ?> <dl class="clearfix"> <dt><a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <?php if( trim($GLOBALS['stdata97']) !== '' ){ ?> <img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" /> <?php }else{ ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php } ?> <?php endif; ?> </a></dt> <dd> <?php get_template_part( 'st-single-category' ); //カテゴリー ?> <h5 class="kanren-t"><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h5> <div class="smanone2"> <?php the_excerpt(); //抜粋文 ?> </div> </dd> </dl> <?php endwhile; ?> <?php else: ?> <p>関連記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> |

管理人の完成版
私の場合はやっぱり<dd>とか<dl>タグが嫌いなので以下のような設定になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>"> <?php if ( trim( $GLOBALS["stdata56"] ) !== '' ) { $kanrenpost_no = $GLOBALS["stdata56"]; } else { $kanrenpost_no = 5; } $tags = wp_get_post_tags( $post->ID ); $tag_ID = array(); foreach ( $tags as $tags ): array_push( $tag_ID, $tags -> term_id ); endforeach; $args = array( 'post__not_in' => array( $post -> ID ), 'posts_per_page' => $kanrenpost_no, 'tag__in'=>$tag_ID, 'orderby' => 'rand', ); $st_query = new WP_Query( $args ); ?> <?php if ( $st_query->have_posts() && !empty($tag_ID) ): ?> <?php while ( $st_query->have_posts() ) : $st_query->the_post(); ?> <div class="kanre_post_block"> <div class="kanre_post"> <a href="<?php the_permalink() ?>"> <div class="clearfix_kanren_img"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb_kanren' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <?php if( trim($GLOBALS['stdata97']) !== '' ){ ?> <img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="250" height="141" /> <?php }else{ ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="250" height="141" /> <?php } ?> <?php endif; ?> </div> </a> <div class="date_time_kanren"> <i class="fa fa-clock-o"></i> <?php the_time( 'Y/m/d' ); ?> </div> <div class="category_kanren"> <?php get_template_part( 'st-single-category' ); //カテゴリー ?> <br/> </div> <h5 class="kanren-title"><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h5> <div class="excerpt_kanren"> <?php the_excerpt(); //抜粋文 ?> </div> </div> </div> <?php endwhile; ?> <?php else: ?> <p>関連記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> |
サムネイルも大きくして、日付とアイコンも取得しました。
「kanren.php」ではモバイルとでテンプレートを分け、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) { }else{ ?> <?php if ( trim( $GLOBALS["stdata63"] ) !== '' ) { $kanrenname = esc_html( $GLOBALS["stdata63"] ); } else { $kanrenname = '関連記事'; } ?> <h4 class="point"><span class="point-in"><?php echo "$kanrenname"; ?></span></h4> <?php if(st_is_mobile()) { ?> <?php get_template_part( 'kanren-mobile-original' ); ?> <?php } else { ?> <?php get_template_part( 'kanren-original' ); ?> <?php } ?> <?php } ?> |
としています。
モバイルでは
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>"> <?php if ( trim( $GLOBALS["stdata56"] ) !== '' ) { $kanrenpost_no = $GLOBALS["stdata56"]; } else { $kanrenpost_no = 5; } $tags = wp_get_post_tags( $post->ID ); $tag_ID = array(); foreach ( $tags as $tags ): array_push( $tag_ID, $tags -> term_id ); endforeach; $args = array( 'post__not_in' => array( $post -> ID ), 'posts_per_page' => $kanrenpost_no, 'tag__in' => $tag_ID, 'orderby' => 'rand', ); $st_query = new WP_Query( $args ); ?> <?php if ( $st_query->have_posts() && !empty($tag_ID) ): ?> <?php while ( $st_query->have_posts() ) : $st_query->the_post(); ?> <div class="top-page-second-mobile-block"> <div class="clearfix-mobile-second"> <a href="<?php the_permalink(); ?>"> <div class="clearfix-mobile-second-img"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb_mobiles' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <?php if(trim($GLOBALS['stdata97']) !== ''){ ?> <img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="125" height="106" /> <?php }else{ ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="125" height="106" /> <?php } ?> <?php endif; ?> </div> </a> <div class="date-time-mobile-second"> <i class="fa fa-clock-o"></i> <?php the_time( 'Y/m/d' ); ?> </div> <div class="category-mobile-second"> <?php the_category( ', ' ) ?> </div> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h3> </div> </div> <?php endwhile; ?> <?php else: ?> <p>関連記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> |
となり、カテゴリ取得用のテンプレートを省略したり、抜粋を除いたり、CSSを分けたりしています。
CSSはこれ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
/*-------------------------------- 関連記事デザイン ---------------------------------*/ aside .kanren { padding-top: 0px; margin-top: 0px; } .kanre_post_block { height: 151px; padding-top: 17px; margin-top: -30px; margin-bottom: 5px; padding-bottom: 13px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #ccc; } .kanre_post { transition: 1.0s; height: 141px; } .date_time_kanren { font-size: 14px; color: #6F6F6F; float: left; margin-right: 7px; } .clearfix_kanren_img { width: 250px; height: 141px; float: left; margin: 0 10px 0 5px; transition: 0.5s; } .clearfix_kanren_img img { margin-top: 7px; margin-bottom: 7px; } .kanren h5 a { color: #334a77; position: relative; top: 2px; transition: 0.4s; text-decoration: none; } .kanren h5 a:hover { color: #0099ff; position: relative; top: -4px; } .excerpt_kanren p { font-size: 12px; } p.st-catgroup.itiran-category { float: left; } .category_kanren { margin-top: 11px; } h5.kanren-title { padding-bottom: 0px; margin-bottom: 0px; } /*media Queries タブレットサイズ(1279px以下) ----------------------------------------------------*/ @media only screen and (max-width: 1279px) { /*-------------------------------- 関連記事 ---------------------------------*/ ul.wpp-list { padding: 0; } .wpp-img2 { position:relative; display:block; width:300px; height:188px; margin:5px; padding:0; background-color:#2e609d; } } |

関連記事はカテゴリで取得する方が多いと思いますけどね…。
