Wordpressで自前で関連記事表示を実装する
jetpackのを使ってもいいのだが、カスタマイズに限界があるので、自分でWordPressのテーマをいじってみる。 code:related.php
<div class="related" style="display: block;">
<h3 class="related-title">関連記事</h3>
<?php
$categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得
if ($categories) {
$args = array(
'category__in' => array($categories0), // カテゴリーのIDで記事を取得 'post__not_in' => array($post->ID), // 表示している記事を除く
'showposts'=>6, // 取得記事数
'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
'orderby'=> 'rand' // 記事をランダムで取得
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { ?>
<div class="related-big-box">
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="related-box">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( '', array( 'scale' => '0' ) ); ?></a>
<h4 class="related-post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
<p class="related-post-date"><?php the_date(); ?></p>
<p class="related-post-category"><?php $cat = get_the_category(); ?><?php $cat = $cat0; ?><?php echo get_cat_name($cat->term_id); ?></p> </div>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
<p class="no-related">関連する記事は見当たりません…</p>
<?php } } ?>
</div>
</div>
<div style="clear:both;"></div>
code:style.css
.related{
content: '';
padding-top: 1em;
margin:1em 0;
position: relative;
clear: both;
}
.related::after {
content: '';
display: table;
clear: both;
}
h3.related-title {
font-size: 9px;
margin:0 0 1em 0;
display: inline-block;
float: left;
font-size: 9pt;
font-weight: 700;
}
.related-big-box{
clear: left;
margin-right: -20px;
}
.related-box{
padding-right: 20px;
opacity: .8;
float: left;
width: 33%;
margin:0 0 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
h4.related-post-title {
text-transform: none;
margin: 0;
font-family: inherit;
display: block;
max-width: 100%;
font-size: 14px !important;
line-height: 20px;
clear: both;
}
h4.related-post-title a:hover {
text-decoration: underline;
}
p.related-post-date{
display: block;
opacity: .6;
margin: 0;
font-size: 14px;
line-height: 20px;
}
p.related-post-category{
display: block;
opacity: .6;
margin: 0;
font-size: 14px;
line-height: 20px;
}
.related img {
max-width: 100%;
display: block;
overflow: hidden;
text-overflow: ellipsis;
margin:0;
}
@media screen and (max-width: 599px) {
.related li {width:100px;}
}
p.no-related {
padding-left: 15px;
margin-bottom: 15px;
}
上がjetpackのやつ、下が実装したやつ。
https://gyazo.com/d650439478a2a069941bffd9a88a21ae
サムネイルがないときに、代わりの画像を表示させたい。
code:hoge.php
if(has_post_thumbnail()){
/*サムネイルの表示*/
the_post_thumbnail();
}else{
/*代替え画像の表示*/
echo '<img src="代替え画像のURL" />';
}
https://gyazo.com/ff280851b2d550e62d625532e203d88e
レスポンシブ対応
code:style.css
.related-box{
padding-right: 20px;
opacity: .8;
float: left;
width: 33%;
margin:0 0 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
.related-box{
width: 33%;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
.related-box{
width: 50%;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
.related-box{
width: 100%;
}
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
.related-box{
width: 100%;
}
}
高さが異なると、レイアウトが崩れる場合がある（2019/6/24了）
https://gyazo.com/6b5090cf93a0f07f8788e789f60b0eb7
二つめの記事のタイトル行が長く、一行だけ他の記事よりも高さがある。
回り込みが失敗してズレている。
高さを固定する？
なかなか難しい
floatではなくinline-blockにする？
widthを画面サイズで変えればOK？
inline-blockにする
code:style.css
.related-box{
padding-right: 20px;
opacity: .8;
display: inline-block; /* インラインブロック化 */
vertical-align: top;
width: 32%;
margin:0 0 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ついでに、boxのwidthを33%→32%に変更