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



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

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

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

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

以下、解説です。



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

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

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

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

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

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

WordPressでプラグインなしで目次を自動生成する方法
ワードプレスで目次を自動作成する方法 ワードプレスで記事内に目次を作りたい。と思ったとき、 個人的には 「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」の編集

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



まとめ

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

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

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

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

カエレバのリンクが長いのでショートコードで短く記述(プラグインなし)
カエレバの商品リンクを短くする方法 ブログでアフィリエイトをする際に使っている人が多いと思われるカエレバ。 ただ、普通に...

の方法を応用して、紹介したい内部リンクの定型句などを作ることもできますね。



その他の記事

インターネットで正しい情報を得るテクニック
【目次】 ・インターネットで正しい情報を得るテクニック ・「自分で調べる力」と「調べた情報を見極める力」 ・まとめ ・その他...
WordPressでメディアをカテゴリー分けしたい~Enhanced Media Library~
WordPressでメディアをカテゴリー分けしたい WordPress(ワードプレス)を使っていると、画像を使うことがあるわけ...
Google Analyticsで自分のスマホのアクセスを除外する
WordPressでウェブサイトを運営したりブログを書いたりしていると、アクセス解析としてGoogle Analyticsを導入することは多...
STINGER8 更新日を非表示にする
WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。 STINGER8は記事のページに投稿日と更...
STINGER8 フォントサイズを変更する
WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。 ※ちなみにこのサイトのテーマは現在STINGE...
WordPressでプラグインなしで目次を自動生成する方法
ワードプレスで目次を自動作成する方法 ワードプレスで記事内に目次を作りたい。と思ったとき、 個人的には 「functi...
カエレバのリンクが長いのでショートコードで短く記述(プラグインなし)
カエレバの商品リンクを短くする方法 ブログでアフィリエイトをする際に使っている人が多いと思われるカエレバ。 ただ、普通に...



参考資料

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

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