ワードプレス記事の途中で関連記事表示 | 福岡のホームページ制作はマリオ君にお任せ

//ブログカード用コード
// 記事IDを指定してdescriptionを取得
function ltl_get_the_excerpt($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post_id);
//AllinOneSEOを使っている場合：そのままでOK
//$output = get_post_custom()['_aioseo_description'][0];//AllinOneSEOの場合
//YoastSEOを使っている場合：上記のコードを以下のコードに変更する
//$output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true);//YoastSEOの場合
//どっちも使っていない場合：上記のコードを以下のコードに変更する
$output = get_the_excerpt();
$post = $post_bu;
return $output;
}

//ショートコード
function nlink_scode($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));

$id = url_to_postid($url);//URLから記事IDを取得

$no_image = '';//アイキャッチ画像がない記事に使う画像URL

//記事タイトルを取得
if(empty($title)){
$title = esc_html(get_the_title($id));
}
//descriptionを取得
if(empty($excerpt)){
$excerpt = esc_html(ltl_get_the_excerpt($id));
}

//アイキャッチ画像を取得
if(has_post_thumbnail($id)) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'medium');
$img_tag = "<img src='" . $img[0] . "' alt='{$title}'/>";
}else{
$img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
}

$nlink .=' <div>
<a class="card-link longcard-link" href="'. $url .'" title="'.$title.'" target="_blank" rel="noopener">
<span class="longcard-img">'. $img_tag .'</span>
<span class="blogcard-content blogcard-text">
<span class="blogcard-title">'. $title .' </span>
<span class="blog-card-excerpt-long">'. $excerpt .'</span>
</span></a></div>';

return $nlink;
}

add_shortcode("nlink", "nlink_scode");

//下記がリンクを出力
'. $url .'
//下記がアイキャッチを出力
'. $img_tag .'
//下記がタイトルを表示
'. $title .'
//下記が抜粋を表示
'. $excerpt .'

$nlink .=' <div>
<a class="card-link longcard-link" href="'. $url .'" target="_blank" rel="noopener">
<div class="longcard-img">'. $img_tag .'</div>
<div class="card_r">
<div class="kanren">関連こっちもみてね</div>
<h6 class="blogcard-title">'. $title .' </h6>
</div>
</a>
</div>';

//ブログカード用CSS

.card-link{
	
	display: flex;
	align-items: center;
	padding: 20px;
	border:3px solid #EEE;
   @media screen and (max-width: 767px) {

        padding: 15px;
    }
	.longcard-img{
		width:20%;
		min-width: 100px;
		margin: 0 30px 0 0;
        @media screen and (max-width: 767px)  {

            width:45%;
			margin: 0 20px 0 0;
        }
		img{
			width: 100%;
		}
	}
	.card_r{
		
		flex: 1;
	}
	.kanren{
		background: $b01;
		display: inline-block;
		border-radius: 5px;
		padding: 5px 10px;
		margin: 0 0 5px;
		font-size: 1.3rem;
		color: #FFF;
		position: relative;
        @media screen and (max-width: 767px) {

            font-size: 1.0rem;
			padding: 3px 8px;
        }
		&::before {
		  content: "";
		  position: absolute;
		  top: 100%;
		  left: calc(50% - 10px/2);
		  border: 5px solid transparent;
		  border-top: 5px solid $b01;
		}		
	}
	
	h6{
		
		font-size: 1.7rem;
        @media screen and (max-width: 767px)  {

            font-size: 1.4rem;
        }
	}
}