ワードプレスの記事内に関連記事をショートコードで簡単に表示する方法

関連記事の挿入は記事タイトルだけなら簡単ですが、
アイキャッチ画像や本文抜粋を入れるとなると、手動ではやってられません。

ということで、ショートコードで自動化しよう。
こんなのを作ります。

ワードプレスの正しいスタイルシートの指定方法（キャッシュ対策）標準的なテンプレのCSS指定では、実は最悪の事態を招きます。今は何でもキャッシュ時代なので、昔のやり方は通用しない。ということで、今すぐにこの指定方法に切り替

※ど素人ソース注意

設定方法

次の内容を「functions.php」に記載します。

<?php
function kanren($attr) {

$shutokuid = array(); //配列の宣言
$matome = array(); //配列の宣言
$shutokusu = count($attr); //関連記事数を取得
$ii = 3; //最後の記事のCSSを変更する用

//関連記事の枠部分
$waku1 = <<<EOT
<div class="kanrenshoto $attr[1]">
<div class="kanrenshotorogo">$attr[0]</div>
EOT;

$waku2 = <<<EOT
</div>
EOT;

//クエリー用に関連記事のIDを取得
for ($i = 2; $i < $shutokusu; $i++){
$shutokuid[] = $attr[$i];
}

$args = array(
'post__in' => $shutokuid,
'orderby' => 'post__in',
);

$the_query = new WP_Query($args);

if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();

$postid = get_the_ID(); 
$taitoruda = get_the_title($postid);
$pamarinda = get_permalink($postid);
$honbun = mb_strimwidth(strip_tags(get_the_content($postid)),0,160);
$samune = wp_get_attachment_image_src(get_post_thumbnail_id($postid), 'thumbnail');

//最後の記事のCSSのclassを変更する用
if($shutokusu == $ii){
$saigo = "kanrenlast";
}else{
$saigo = "";
}

$matome[] = <<<EOT
<div class="kanrenkijiwaku $saigo">
<span class="imgbu"><img src="$samune[0]" alt="" /></span>
<span class="textbu">
<span class="taitoru"><a href="$pamarinda">$taitoruda</a></span>
<span class="honbun">$honbun</span>
</span>
</div>
EOT;

$ii++;
endwhile;
endif;
wp_reset_postdata();

//配列を文字列に
$tenkai = implode("", $matome);

return $waku1.$tenkai.$waku2;

}
//ショートコードとして登録
add_shortcode('kk1', 'kanren');
?>

これにてショートコードの設定は完了です。
ショートコードの引数を使って、クエリーを発行しているだけ。

次にCSS。



.kanrenkijiwaku{
width:auto;
height:auto;
padding-top : 0px;
padding-bottom : 10px;
padding-left : 10px;
padding-right : 10px;
margin-bottom : 10px;
overflow:hidden;
border-bottom: 1px dotted #cccccc;
display: -webkit-flex;
display: flex;
}

.kanrenlast{
border-bottom: none;
}

.kanrenkijiwaku a,.kanrenkijiwaku2 a{
color:#333333;
text-decoration:none;
}

.kanrenkijiwaku:hover a,.kanrenkijiwaku2:hover a{
color:#006699;
}

.imgbu{
display:block;
width:100px;
min-width:100px;
height:auto;
}

.imgbu img{
width:100px;
height:auto;
}

.textbu{
display:block;
width:auto;
padding-left : 20px;
}

.taitoru{
display:block;
font-weight:bold;
}

.honbun{
display:block;
padding-top:5px;
font-size:0.8em;
color:#666666;
}

.kanrenshoto{
position: relative;
margin-top: 30px;
margin-bottom : 30px;
padding-top:20px;
padding-left:0px;
padding-right:0px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.kanrenshotorogo{
padding-left:15px;
padding-right:15px;
position: absolute;
top: 0px;
left: 10px;
margin-top: -13px;
font-weight:normal;
text-align:center;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

/*関連記事のショートコード共通end*/

/* 関連記事のショートコードブルー*/

.blue{
background-color:#F3F9FC;
border: 2px solid #228df0;
}

.blue .kanrenshotorogo{
background-color:#228df0;
color:#ffffff;
}

/* 関連記事のショートコードグレー*/

.gray{
background-color:#f9f9f9;
border: 2px solid #cccccc;
}

.gray .kanrenshotorogo{
background-color:#cccccc;
color:#333333;
}

/* 関連記事のショートコードピンク*/

.pink{
background-color:#FDEFF2;
border: 2px solid #EE827C;
}

.pink .kanrenshotorogo{
background-color:#EE827C;
color:#ffffff;
}

.pink .kanrenshotorogo a{
color:#333333;
}

@media screen and (max-width: 640px) {

.imgbu{
display:block;
width:65px;
min-width:65px;
height:auto;
}

.imgbu img{
width:65px;
height:auto;
}

}

※ごめんなさい。かなり適当です。