【WordPress】プラグイン不要でブログカードを作る方法【デザイン込み】

WordPressサイト設計

WordPressでブログカードを作る方法です。

完成イメージ

[sc_blogcard url=”https://yuuuugablog.com/programming/wordpress/wordpress-youtube-speedup”]

上記のような感じになります。

内部リンクをこのようにすると、クリック率が上がりPVが増えるようになります。

また普通のリンクでうながすよりも、上記のようにカード型にすることで画像と記事内容もセットで付くので、見やすさが圧倒的に変わります。

また本記事ではコピペするだけなので、超簡単にブログカードを実装できます。

それでは早速いきましょう!

スポンサーリンク

functions.phpにコードを書く

まずは、下記のコードを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");

スポンサーリンク

CSSでデザインを整える

次にstyle.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;
}

スポンサーリンク

ショートコードにURLを貼り付ける

お疲れさまでした!これにて完了です。

それでは最後に実際にブログカードを実装していきます。

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

こちらのショートコードを投稿画面に貼りつけて、表示したいURLに変更すれば、ブログカードの完成です。

WordPress投稿画面

WordPress投稿画面

上記のようにすれば表示できます。

今回は以上です。

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