STINGER7の関連記事を2列に表示する

wordpress関連記事をサクッと2列に表示

STINGER以外でも出来るかも！？（試していないのではっきりした事は言えませんけどｗｗｗ）

ただstinger7以外で試して上手く出来たヴァージョンはstinger5、stinger6でも大丈夫でした。

やることをサクッと纏めてみるとこんな感じです

１、コンテンツ部分の幅を大きくする

２、kanren.phpを違う名前でもう一つ作る例として（kanren-main）を用意する

３、single.phpの編集

４、CSSを付け加える

以上です。

では簡単にいきますね。

１、本文部分のコンテンツ幅を728pxに広げます。変更するCSSはこの部分。

#wrapper {
	max-width: 980px;
}

を以下に変更

#wrapper {
	max-width: 1128px;
}

2、kanren.phpをダウンロードして以下に書き換える。ここではkanren-main.phpとして同じ場所にアップロードする。

<div id="kanren-main">
  <?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 class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?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 endif; ?>
      </a> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
        </a></h5>

    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>関連記事はありませんでした</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>

３、single.phpを以下に変更する。

<!--関連記事-->
<h4 class="point"><i class="fa fa-th-list"></i>&nbsp;  関連記事</h4>
<?php get_template_part('kanren');?>

を以下に変更する

<!--関連記事-->
<h4 class="point"><i class="fa fa-th-list"></i>&nbsp;  関連記事</h4>
<?php get_template_part('kanren-main');?>

４、最後にCSSに以下を追加して出来上がりです。
あくまでも子テーマでの事ですので親テーマを利用してる場合は以下に書き換えるようにしてください。

@media only screen and (min-width: 780px) {
#kanren-main {overflow: hidden;} 
#kanren-main dd h5 {
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
}
#kanren-main dt {
	float: left;
	width: 100px;
}
#kanren-main dt img {
	width: 100px;
        height: 100px;
}
#kanren-main dd {
	padding-left: 110px;
}
#kanren-main dl {
        width: 48%; /* ← pxでも%指定でもOK */
        height: 120px;
        float:left;
	margin: 5px;
	padding: 15px 0px 15px 0px;
	border-bottom: 1px solid #e5e5e5;
}
#kanren-main :hover { 
	background-color: #f7f7f7; 
}
#kanren-main dl:last-child {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e5e5e5; 
}
}

以下はタブレットやスマホなどでレスポンシブ表示させる為のものです。

ただし2列には表示されませんのでお間違えのないようにね

/*--------------------------------
関連記事表示部分（モバイル記事下）
---------------------------------*/
/* タイトル名 */
#kanren-main dd h5 {
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
}
#kanren-main dt {
	float: left;
	width: 100px;
}
#kanren-main dt img {
	width: 100px;
}
#kanren-main dd {
	padding-left: 110px;
}
#kanren-main dl {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ccc;
}
#kanren-main dl:last-child {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-style: none;
}