WordPressでプラグインなしでブログカードを作るショートコードの方法

【目次】 [close]

1 ワードプレスでブログカードをカスタマイズしたい
2 ブログカードをカスタマイズするときの考え方
3 ブログカードを挿入するショートコード
- 3.1 「function.php」の編集
- 3.2 「style.css」の編集
4 まとめ
5 その他の記事
6 参考資料

ワードプレスでブログカードをカスタマイズしたい

WordPress(ワードプレス)でブログカードをカスタマイズしたい場合、

テーマの「function.php」と「style.css」を編集して、ブログカードを挿入できるショートコードを作るという方法がベストかなと思います。

以下、解説です。

ブログカードをカスタマイズするときの考え方

ワードプレス標準のブログカードってサムネがでかいんですよね。

なので正直実用性に乏しいなと。

やっぱり

WordPressでプラグインなしで目次を自動生成する方法

ワードプレスで目次を自動作成する方法ワードプレスで記事内に目次を作りたい。と思ったとき、個人的には「functi...

likiroku.com

2019-03-01 05:00

こんな感じのコンパクトなはてなブログ風のブログカードが使いやすいなと。

で、こういうブログカードを作るプラグインはいっぱいあるのですが、

サイトが重くなったりセキュリティの観点からプラグインはできるだけ使いたくない。

なのでテーマを編集してブログカードをカスタムしたい。

でも、

ワードプレスの標準のブログカードのカスタマイズってけっこう難しいし、仮に上手くいってもその後のワードプレスやテーマのアップデートに対応できるかといった未知の不具合の可能性が高い。

そのため、

ワードプレスの標準のブログカード機能はそのままにしておいて、新たなブログカードを作れるショートコードを加えるという方法が一番プロセスと結果のバランスがいいという結論に至るわけです。

ブログカードを挿入するショートコード

記事の最後にある「参考資料」のサイトを参考に、少し自分に合わせてコードを調整しました。

基本は「function.php」と「style.css」にコピペでＯＫ。

ちなみにテーマを編集するときは子テーマでの編集をおすすめします。

「function.php」の編集

//以下、ブログカードを挿入するためのショートコードの記述です。
function get_the_custom_excerpt($content, $length) {
	$length = ($length ? $length : 70);//デフォルトの長さを指定する
	$content =  strip_shortcodes($content);//ショートコード削除
	$content =  strip_tags($content);//タグの除去
	$content =  str_replace("&nbsp;","",$content);//特殊文字の削除（今回はスペースのみ）
	return $content;
}
 
function nlink_scode($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
 
	$id = url_to_postid($url);//URLから投稿IDを取得
	$post = get_post($id);//IDから投稿情報の取得
 
	$img_width ="90";//画像サイズの幅指定
	$img_height = "90";//画像サイズの高さ指定
	$no_image = get_template_directory_uri().'/images/no-img.png';//アイキャッチ画像がない場合の画像を指定
 
	//タイトルを取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}
 
	//アイキャッチ画像を取得 
	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.'" />';
		   }
 
	$nlink .='
<div class="blog-card"><a href="'. $url .'">
	<div class="blog-card-thumbnail">'. $img_tag .'</div>
	<div class="blog-card-content">
		<div class="blog-card-title">'. $title .' </div>
	</div>
	<div class="clear"></div>
</a></div>';
 
	return $nlink;
}  
 
add_shortcode("nlink", "nlink_scode");

//以上、ブログカードを挿入するためのショートコードの記述でした。

「style.css」の編集

/* 以下、ショートコードによるブログカードのデザインです。 */
.blog-card{
	border:1px solid #ddd;
	word-wrap:break-word;
	max-width:100%;
	border-radius:5px;
	margin-bottom: 30px;
}
 
.blog-card a {
	color: #333;
	background: #ffffff;
	display: block;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
 
.blog-card a:hover{
	background: #f5f5f5;
}
 
.blog-card-thumbnail{
	float:left;
	padding:10px;
}
 
.blog-card-thumbnail img {
	display: block;
	padding: 0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
 
.blog-card-content{
	line-height:120%;
}
.blog-card-title{
	padding:10px 10px 10px 0;
	font-size:100%;
}
/* 以上、ショートコードによるブログカードのデザインでした。 */