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



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

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

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

以下、解説です。



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

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

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

やっぱり

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

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

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

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

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

でも、

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

そのため、

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



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

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

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

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


「function.php」の編集

//以下、ブログカードを挿入するためのショートコードの記述です。
function get_the_custom_excerpt($content, $length) {
	$length = ($length ? $length : 70);//デフォルトの長さを指定する
	$content =  strip_shortcodes($content);//ショートコード削除
	$content =  strip_tags($content);//タグの除去
	$content =  str_replace(" ","",$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%;
}
/* 以上、ショートコードによるブログカードのデザインでした。 */



まとめ

上記のようなコードを入力し保存。

そして記事を書く際に本文中に

[nlink url=ブログカードにしたいURL]

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



その他の記事

インターネットで正しい情報を得るテクニック 情報化社会と言われ、いろいろな情報が大量に流れています。 いろいろなことを知...
WordPressでメディアをカテゴリー分けしたい WordPress(ワードプレス)を使っていると、画像を使うことがあるわけ...
WordPressでウェブサイトを運営したりブログを書いたりしていると、アクセス解析としてGoogle Analyticsを導入することは多...
WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。 STINGER8は記事のページに投稿日と更...
WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。 ※ちなみにこのサイトのテーマは現在STINGE...
ワードプレスで目次を自動作成する方法 ワードプレスで記事内に目次を作りたい。と思ったとき、 個人的には 「functi...
目次のリンクがうまく動作しないとき 上記の記事で以前書きましたが、 ワードプレスにおいてテーマに目次の機能が...
カエレバの商品リンクを短くする方法 ブログでアフィリエイトをする際に使っている人が多いと思われるカエレバ。 ただ、普通に...



参考資料

『関連記事(内部リンク)のブログカードをプラグイン無しで実装する方法[コピペ]』(こまろくNOTE)2019年3月3日検索

『URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法』(寝ログ)2019年3月3日検索

テキストのコピーはできません。