WordPressで内部リンク用のブログカードをプラグインを使わずに利用する

最終更新日

WordPressで某ブログカードプラグインを利用していましたが、プラグインのバージョンアップにより設定項目が変化してレイアウトが壊れてしまいました。

再設定しようにも設定が難解すぎるので他のプラグインを探したけど良いプラグインが見つからない…。

という事で、プラグインを使わずにブログカードを簡単に利用する方法を調べたのでシェアします。


functions.phpにコードを追記します

//---------------------------------------------
//   + ブログカード
//---------------------------------------------

function blogcard_scode($atts) {

	//---サムネイル画像の大きさ(px)
	$img_size = 120;

	extract(shortcode_atts(array(
		'url' => "",
		'title' => "",
		'excerpt' => ""
	) , $atts));

	//---URLから投稿IDを取得
	$id = url_to_postid($url);

	//---タイトルを取得
	if(empty($title)){

		$title = esc_html(get_the_title($id));
	}

	//---抜粋文を取得
	if(empty($excerpt)){

		$excerpt = esc_html(get_the_excerpt($id));
	}

	//---サイトアイコンを取得
	$siteicon = get_site_icon_url(32 , '');
	$siteicon_html = ($siteicon) ? "<img src='{$siteicon}' width='16' height='16' alt='' /> " : "";

	//---アイキャッチ画像を取得
	if(has_post_thumbnail($id)){

		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id) , array($img_size , $img_size));
		$img_html = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}' alt='{$title}' />";

	} else{

		$img_html = "";
	}

	//---URL
	$url_html = $siteicon_html . str_replace('https://' , '' , $url);

	//---HTML出力
	$html ="
<div class='blog-card'>
<a href='{$url}'>
<div class='blog-card-thumbnail'>{$img_html}</div>
<div class='blog-card-content'>
<div class='blog-card-title'>{$title}</div>
<div class='blog-card-excerpt'>{$excerpt}</div>
<div class='blog-card-url'>{$url_html}</div>
</div>
</a>
</div>";


	return $html;
}

add_shortcode("nlink", "blogcard_scode");

style.cssにCSSを追記します

/** ブログカードCSS **/

.blog-card {
	width: 100%;
	background: #f5f5f5;
	border: 1px solid #dddddd;
	word-wrap: break-word;
	margin: 1.5em 0 0;
	padding: 0;
}

.blog-card:hover {
	background: #dbe9f4;
}

.blog-card a {
	display: flex;
	justify-content: space-between;
}

.blog-card-thumbnail {
	width: 20%;
	padding: 10px;
}

.blog-card-thumbnail img {
	width: 100%;
	border: none;
	display: block;
	padding: 0;
}

.blog-card-content {
	width: 78%;
	line-height: 1.5;
}

.blog-card-title {
	font-weight: bold;
	font-size: 15px;
	color: #000000;
	padding: 10px 10px 10px 0;
}

.blog-card-url {
	font-size: 15px;
	padding: 10px 10px 10px 0;
}

.blog-card-excerpt {
	color: #333333;
	font-size: 13px;
	padding: 0 10px 10px 0;
}

/** ブログカード(スマホ用調整) **/

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

	.blog-card-url {
		display: none !important;
	}

	.blog-card-excerpt {
		display: none !important;
	}
}

以上で設定は完了です。

ショートコードで
nlink url="https://xxxxxxxx"
のようにURLを指定するとブログカードが表示されます。


↓通常の表示例です


ショートコードで引数を指定する事もできます(使う事はなさそう)
 nlink title="タイトル" excerpt="抜粋" url="https://xxxxxxxx"
↓引数を指定した表示例


注意点としては、内部リンクにしか対応しておらず、外部サイトには利用できません。

またブログカードのデザインはお使いのテンプレートにも依存するので調整が必要です。

スポンサーリンク

シェアする