parudou
parudou
parudou
更新日:2018/10/11

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

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

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

※ど素人ソース注意

設定方法

次の内容を「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="kanrenshoto">
<div class="kanrenshotorogo">$attr[0]</div>
EOT;

$waku2 = <<<EOT
</div>
</div>
<div class="end"></div>
EOT;

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

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

$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){
$bangou = 2;
}else{
$bangou = "";
}

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

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

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

return $waku1.$tenkai.$waku2;

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

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

次にCSS。

.kanrenkijiwaku{
width:auto;
height:80px;
padding-top : 0px;
padding-bottom : 10px;
padding-left : 10px;
padding-right : 10px;
margin-bottom : 10px;
clear:both;
border-bottom: 1px dotted #cccccc;
}

.kanrenkijiwaku2{
width:auto;
height:80px;
padding-top : 0px;
padding-bottom : 10px;
padding-left : 10px;
padding-right : 10px;
margin-bottom : 10px;
clear:both;
}

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

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

.imgbu{
display:block;
width:100px;
height:80px;
float:left
}

.imgbu img{
width:100px;
height:80px;
object-fit: cover;
}

.imgbu:hover img{
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
}

.textbu{
display:block;
width:80%;
height:80px;
float:left;
overflow:hidden;
padding-left : 20px;
}

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

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

.kanrenshoto{
position: relative;
margin-top: 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*/

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

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

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

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

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

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

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

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

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

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

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

.kanrenshoto{
padding-top:20px;
}

.kanrenkijiwaku,.kanrenkijiwaku2 {
display:table;
width:auto;
height:auto;
padding-right : 0px;
}

.imgbu{
display:table-cell;
width:20%;
height:65px;
}

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

.textbu{
display:table-cell;
width:71%;
height:auto;
padding-left : 10px;
padding-right : 10px;
}

.taitoru{
font-size:1em;
}

.honbun{
height:60px;
overflow:hidden;
}

}

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

ショートコードの入れ方

記事作成画面のテキストモードにて、
次のショートコードを入れます。
※右の数字は表示したい記事のIDです。

<1つの場合>

[kk1 関連記事 blue 56]

<3つの場合>

[kk1 関連記事 blue 56 49 5]

それぞれ説明。

「kk1」はショートコード名。
これは固定。

「関連記事」は見出し名。
次のようにして変更が可能です。

[kk1 注目記事 blue 56]

「blue」はデザインの指定。「pink」と「glay」を作った。

[kk1 関連記事 pink 56]

「メモ」とか「コラム」でよく使われるデザイン。

[kk1 関連記事 gray 56]

グレーは万能ですね。

右の数字は記事IDです。
いくらでも追加できます。

--

これにより面倒な関連記事の挿入も楽々。
ソースを変更すれば、あらゆるスタイルにできます。
是非ご活用ください。

是非ご感想・ご指摘等をください。

プロフィール

管理人:parudou
単なるWEBサイト作成マニアです。
底辺法人アフィリエイター。
Twitterはこちら

日記はパルどうSEOブログ

Copyright (c) parudou All Rights Reserved.