STINGER8 ブログカードをカスタマイズ(プラグインなし)する方法

【目次】 [close]

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

「STINGER8」でブログカードをカスタマイズする方法

WordPress(ワードプレス)テーマ、「STINGER8」のブログカードをカスタマイズします。
※この記事のテーマは「STINGER8」ではないのであしからず。

ワードプレスにおいてブログカードのカスタム方法はいろいろありますが、

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

以下、解説です。

「STINGER8」のブログカードについて

ワードプレスは記事のURLを直接本文に書くと、サムネとタイトルがカード化されたいわゆるブログカードにして表示してくれます。

ただ、
ワードプレス標準のブログカードってサムネイルが大きすぎるんですよね。

で、ブログカードのデザインがワードプレス標準のままのものか、独自にカスタマイズしてあるかはテーマによるのですが、

シンプルさが売りの「STINGER8」はご多分にもれずブログカードのデザインがワードプレス標準のサムネがでかいまま。

でもブログカードを使うならやっぱり

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」の編集

続いて「style.css」の編集です。

シンプルさが特徴の「STINGER8」にふさわしく、ブログカードのデザインもサムネとタイトルだけのシンプルなデザインにしてみました。

/* 以下、ショートコードによるブログカードのデザインです。 */
.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%;
}
/* 以上、ショートコードによるブログカードのデザインでした。 */