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

2017/03/14

2018/06/24

WRITER

かきてぃー

この記事を書いている人 - WRITER -

かきてぃー

21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。

詳しいプロフィールはこちら

本日の記事は、AFFINGER既存の関連記事をタグから検索し表示するカスタマイズです。

既存のAFFINGER関連記事はカテゴリから判断され取得されています。それをタグから判断し取得するようカスタマイズしていきます。

カスタマイズ方法はカテゴリを条件にしている箇所をタグに変更するだけなので、難易度はそんなに高くないです。

それでは開始しましょう！

1 関連記事を取得しているテンプレートはこれだ！
2 管理人の完成版
- 2.1 CSSはこれ

関連記事を取得しているテンプレートはこれだ！

カスタマイズの基本は、カスタマイズするファイルを正確に見つけることにあります。

今回の目的は、関連記事の取得条件を変更することになるので、関連記事を取得しているテンプレートを見つけましょう。

まずは、記事一覧を取得している個別記事のテンプレート「single.php」を確認します。

if ((trim($GLOBALS['stdata74']) !== '') && ( in_category($GLOBALS['stdata74']) )) {

1	if ((trim($GLOBALS['stdata74']) !== '') && ( in_category($GLOBALS['stdata74']) )) {

AFFINGER管理画面の設定によって使用しているテンプレートが異なります。

一般的に多いのは「single-type1.php」のようですね。

「single-type1.php」の138行目に発見しました。

<!--関連記事-->
<?php get_template_part( 'kanren' ); ?>

1 2	<!--関連記事--> <?php get_template_part( 'kanren' ); ?>

これが関連記事のテンプレートですね。

では、「kanren.php」を覗いています。

<?php 
if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) {
}else{
?>

	<?php
		if ( trim( $GLOBALS["stdata63"] ) !== '' ) {
			$kanrenname = esc_html( $GLOBALS["stdata63"] );

<?php

if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) {

}else{

<?php

if ( trim( $GLOBALS["stdata63"] ) !== '' ) {

$kanrenname = esc_html( $GLOBALS["stdata63"] );

かきてぃー

また条件分岐かいっ！！

1つ目の

if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) {

1	if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) {

はAFFINGER管理画面の「関連記事を非表示にする」が有効か無効かを見てますね。

7行目の

if ( trim( $GLOBALS["stdata63"] ) !== '' ) {

1	if ( trim( $GLOBALS["stdata63"] ) !== '' ) {

は見出しの設定。

見出しが設定されていれば、その文字列を表示し、未設定ならば「関連記事」が自動的に設定されるようになっています。

肝心なのは15行目。

if ( isset($GLOBALS['stdata5']) && $GLOBALS['stdata5'] === 'yes' ) {

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行目！

ここをカテゴリ→タグに変更していきます。

	$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',
	);

$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に突っ込んでいますね。

ここを…

	$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',
	);

$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',

);

黄色でマーカーしてある箇所がタグの情報に書き換えたところです。

かきてぃー

これで、変数$argsに入れた情報がカテゴリからタグに切り替わりました！

タグが設定されていない場合の条件を追加しよう

21行目に「関連記事が存在したら～」の条件分岐があります。

if ( $st_query->have_posts() ): ?>

1	if ( $st_query->have_posts() ): ?>

ですね。

ここに「タグが設定されていたら～」の条件を追加する必要があります。

if ( $st_query->have_posts() && !empty($tag_ID) ): ?>

1	if ( $st_query->have_posts() && !empty($tag_ID) ): ?>

!empty($tag_ID)

がタグの有無を現す条件分岐ですね。

これを設定しておかないと、タグが設定されていない場合も関連記事を作成してしまいます。

忘れずに設定しておきましょう。

完成系

<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>

<?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(); ?>

<?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' ); //カテゴリー ?>

<?php the_title(); ?>

</a></h5>

<?php the_excerpt(); //抜粋文 ?>

</div>

</dd>

</dl>

<?php endwhile; ?>

<?php else: ?>

<p>関連記事はありませんでした</p>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

</div>

管理人の完成版

私の場合はやっぱり<dd>とか<dl>タグが嫌いなので以下のような設定になります。

<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' ); ?>
						&nbsp;
					</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>

<?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(); ?>

<?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>

<?php the_time( 'Y/m/d' ); ?>

</div>

<?php get_template_part( 'st-single-category' ); //カテゴリー ?>

<br/>

</div>

<?php the_title(); ?>

</a>

</h5>

<?php the_excerpt(); //抜粋文 ?>

</div>

<?php endwhile; ?>

<?php else: ?>

<p>関連記事はありませんでした</p>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

</div>

サムネイルも大きくして、日付とアイコンも取得しました。

「kanren.php」ではモバイルとでテンプレートを分け、

<?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 } ?>

<?php

if ( isset($GLOBALS['stdata36']) && $GLOBALS['stdata36'] === 'yes' ) {

}else{

<?php

if ( trim( $GLOBALS["stdata63"] ) !== '' ) {

$kanrenname = esc_html( $GLOBALS["stdata63"] );

} else {

$kanrenname = '関連記事';

}

<?php if(st_is_mobile()) { ?>

<?php get_template_part( 'kanren-mobile-original' ); ?>

<?php } else { ?>

<?php get_template_part( 'kanren-original' ); ?>

<?php } ?>

としています。

モバイルでは

<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' ); ?>
						&nbsp;
					</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>

<?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(); ?>

<?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>

<?php the_time( 'Y/m/d' ); ?>

</div>

<?php the_category( ', ' ) ?>

</div>

<?php the_title(); ?>

</a>

</h3>

</div>

<?php endwhile; ?>

<?php else: ?>

<p>関連記事はありませんでした</p>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

</div>

となり、カテゴリ取得用のテンプレートを省略したり、抜粋を除いたり、CSSを分けたりしています。

CSSはこれ

/*--------------------------------
関連記事デザイン
---------------------------------*/
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;
	}
}