㋑ブログは、ワードプレスが快適に使えるレンタルサーバーについての感想やレビューのブログ

コピペしてSANGOの独自ショートコードでブログカードを表示する

SANGOで独自のショートコードでブログカードを表示する

コピペするだけで、

[sc_blogcard url="リンク先URL"]

でブログカードを表示することができます。

 

参考記事:コピペで簡単設置!内部リンクのブログカードを作成する方法【PV・回遊率アップに貢献】

 

SANGOのブログカードのショートコード

SANGOなら、下記のショートコードでブログカードが表示できます。

[kanren id="投稿ID"] [card id="投稿ID"] [card2 id="投稿ID"]

URLでなく投稿IDなのでURLを変更してもブログカードが表示されます。

が、個人的には投稿IDを確認するのが面倒なので、

[sc_blogcard url="リンク先URL"]でブログカードにしました。

 

「外観」「テーマエディター」で子テーマの「functions.php」にコピペ

//内部リンクをブログカードにするショートコード
function show_blogcard($atts) {
extract(shortcode_atts(array(
‘url’=>””,
‘title’=>””,
‘excerpt’=>””
),$atts));

//URLから投稿IDを取得
$id = url_to_postid($url);
//画像サイズの横幅を指定
$img_width =”90″;
//画像サイズの高さを指定
$img_height = “90”;
//アイキャッチ画像がない場合の画像を指定
$no_image = ‘/wp-content/uploads/xxxx/xx/xxx.png’;

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

//本文を取得
if(has_excerpt($id)){
//抜粋文字列がある場合
$excerpt = wp_trim_words(get_the_excerpt($id), 72, ‘…’ );
} else {
//抜粋文字列がない場合本文から切り出し
$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, ‘…’ );
}

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

//ブログカード部分のHTML
$sc_blogcard .=’
<div class=”blogcard”>
<a href=”‘. $url .'”>
<div class=”blogcard_thumbnail”>’. $img_tag .'</div>
<div class=”blogcard_content”>
<div class=”blogcard_title”>’. $title .'</div>
<div class=”blogcard_excerpt”>’. $excerpt .'</div>
</div>
<div class=”clear”></div>
</a>
</div>’;
return $sc_blogcard;
}
//ショートコードに追加
add_shortcode(“sc_blogcard”, “show_blogcard”);

SANGOの場合は、上記を「外観」「テーマエディター」で子テーマの「functions.php」にコピペします。

 

「外観」「カスタマイズ」「追加 CSS」にコピペ

.blogcard {
line-height: 1;
background-color: #ffffff;
border: 1px solid #eeeeee;
word-wrap: break-word;
margin: 40px;
box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
}
.blogcard a {
text-decoration: none;
opacity: 1;
transition: all 0.2s ease;
}
.blogcard a:hover {
opacity: 0.6;
}
.blogcard_thumbnail {
float: left;
padding: 20px;
}
.blogcard_title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
padding: 17px 20px 10px;
}
.blogcard_excerpt {
font-size: 0.85em;
line-height: 1.6;
padding: 0 17px 15px 20px;
}

SANGOの場合、上記を「外観」「カスタマイズ」「追加 CSS」にコピペします。