晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

WordPress)リンク埋め込みブログカード表示のカスタマイズ。ショートコード使用。

先日、自宅のWindowsPCローカルにWordPressを入れた。

リンク埋め込みブログカード表示のカスタマイズについての備忘録。

URLを挿入すると、自動的に表示されるブログカードのデザインは以下。

はてなブログからインポートした記事には、アイキャッチ画像は入らない。

下のブログ名やシェアマークが不要なので、消したい。

≪ステップ1≫

「wp-includes\theme-compa」の下にある「embed-content.php

\xampp\htdocs\wordpress\wp-includes\theme-compat\embed-content.php

から、以下の部分を削除。

<div class="wp-embed-footer">
	<?php the_embed_site_title() ?>
	<div class="wp-embed-meta">
		<?php
		/**
		 * Prints additional meta content in the embed template.
		 *
		 * @since 4.4.0
		 */
		do_action( 'embed_content_meta');
		?>
	</div>
</div>

下のようにブログ名やシェアマークが消える。しかし、下に余分な余白ができる。

≪ステップ2≫

どこかのCSSで高さや余白を定義しているのかもと思ったが、「wp-includes\js」の下にある「wp-embed.min.js」でstyleを上書きしている模様。(※ 違うかもしれない。

「wp-embed.min.js」を無効にするためには、 「wp-content\themes\テーマフォルダ 」の下にある「functions.php

\xampp\htdocs\wordpress\wp-content\themes\semplicemente\functions.php

に、以下のソースを挿入。

function register_javascript() {
	wp_deregister_script('wp-embed');
	wp_deregister_script('comment-reply');
}
add_action('wp_enqueue_scripts', 'register_javascript');

すると、以下のようなデザインになる。余白は消えたが、デザインが変わって、要約部分も消えた。(※ この設定は一旦元に戻す。

≪ステップ3≫

今度は、ブログカードをWordPress標準でないものを試してみる。

Nomu×2.Net」にある「ショートコード」を使わせてもらう。とりあえず、以下のサイトを参考に、スクリプトCSSをそのまま利用してみた。

(※ このショートコードによるブログカードはスマホでは表示されない模様。)

「wp-content\themes\テーマフォルダ 」の下にある「functions.php

\xampp\htdocs\wordpress\wp-content\themes\semplicemente\functions.php

に、以下のコードを追加。

//ブログカードのレイアウトを生成
function nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix) {
	return '<a href="'. $url .'" class="'. $prefix .'-card" target="_blank" rel="noopener noreferrer">' .
			   '<div class="'. $prefix .'-card-box">' .
				   '<div class="'. $prefix .'-card-thumbnail">' . 
					   '<img src="' . $image_url . '" alt="' . $title . '"/>' .
				   '</div>' .
				   '<div class="'. $prefix .'-card-content">' .
					   '<div class="'. $prefix .'-card-title">'. $title .' </div>' .
					   '<div class="'. $prefix .'-card-excerpt">'. $excerpt .'</div>' .
					   '<div class="'. $prefix .'-card-site">'. $site .'</div>' .
				   '</div>' .				  
			   '</div>' .			   
		   '</a>';
}
//記事の文章を抜粋して取得する
function nm_get_excerpt_post( $post_id, $length = 55 ) {
	//指定された投稿を取得
	$post = get_post( $post_id );
	//投稿からショートコードを削除
	$post_non_code_content = strip_shortcodes( $post->post_content );
	//指定した文字列文返却する
	return wp_trim_words($post_non_code_content, $length);
}
//ショートコード
function nm_create_blogcard($atts) {
	//imageがない場合の画像の設定
	$no_image = "";	
	//エラーになった時の文字を指定しておく
	$err_msg = "<p>ブログカード取得失敗</p>";
	//初期値を設定して連想配列($atts)を変数($url, $title, $excerpt)に変換
	extract(shortcode_atts(array('url'=>"", 'title'=>"", 'excerpt'=>"", 'length'=>55, 'image_url'=>"", 'site'=>"", 'prefix'=>"nm" ), $atts));
	//エラーチェック(urlが空の場合) エラー表示
	if (empty($url)) return $err_msg;
	//urlからpostIDを取得
	$post_id = url_to_postid($url);
	//タイトルの取得(title未設定の場合)
	if (empty($title)) $title = esc_html(get_the_title($post_id));
	//記事の抜粋
	if (empty($excerpt)) $excerpt = esc_html(nm_get_excerpt_post($post_id, $length));
	//指定イメージがない場合、アイキャッチ画像を取得する
	if (empty($image_url)) {
		//アイキャッチ存在チェック
		if (has_post_thumbnail($post_id)) {
			//アイキャッチ取得
			$image = wp_get_attachment_image_src(get_post_thumbnail_id($post_id),'medium');
			$image_url = $image[0];
		} else {
			$image_url = $no_image;
		}
	}
	if (empty($site)) $site = $url;
	//ブログカードのレイアウトを作成
	$blogcard = nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix);
	//ショートコードを呼び出したところに挿入する場合、returnで返す。
	return $blogcard;
}
add_shortcode("nmblogcard", "nm_create_blogcard");

外観テーマのカスタマイズで、「追加CSS」に、

以下のCSSを入れる。

a.nm-card {
	border: 1px solid #e1e1e1;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	display: block;
	padding: 20px;
	position: relative;
	-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;
	width: 100%;
	text-decoration: none;
}
a.nm-card:hover {
	box-shadow: none;
	opacity: .8;
}
.nm-card-box {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.nm-card-title {
	font-size: 18px;
	font-weight: 600;
	color: #428bca;
	padding-bottom: 5px;
}
.nm-card-thumbnail {
	flex: 1;
	margin-right: 15px;
	padding-top: 5px;
}
.nm-card-thumbnail img {
	width: 100%;
}
.nm-card-content {
	flex: 2.5;
}
.nm-card-excerpt {
	color: #808080;
	font-size: 13px;
	padding-bottom: 15px;
}
.nm-card-site {
	border-top: dashed 1px #a4a4a4;
	color: #b2b2b2;
	font-size: 11px;
	text-align:right;
	padding-left: 5px;
}
.nm-card-site img {
	margin-right: 5px;
	vertical-align: bottom;
	width: 20px;
}
@media (max-width: 980px) {
	.nm-card-excerpt {
		border: none;
	}
}
@media (max-width: 640px) {
	a.nm-card {
		padding: 10px 10px 20px 10px;
	}
	.nm-card-thumbnail {
		margin-right: 10px;
		padding-top: 10px;
	}
	.nm-card-title {
		font-size: 14px;
	}
	.nm-card-excerpt {
		display: none;
	}
}

ブログ記事に、次のようなショートコードを入れる。

[nmblogcard url="/wordpress/2022/07/26/2022-07-26-151742/"]

このショートコードには、以下のようなオプションも追加できるらしい。

[nmblogcard url="url" title="タイトル" excerpt="抜粋文" length=抜粋文字数 image_url="画像url" site="サイト" prefix="cssクラスprefix"]

ショートコードを入れると、以下のようなブログカードが表示される。リンク先の記事にアイキャッチ画像が設定されていないので、画像部分が表示されない。アイキャッチ画像は、後で設定する。

ブログ記事のショートコード部分には、以下のようなHTMLが挿入される。

アイキャッチ画像が設定されていないので、<img src="">が入っていない。

target="_blank"になっている点が評価できる。

(※ 以下の<pre></pre>内にhttp:を記入すると表示がおかしくなるので、わざと:を大文字にしている。)

<a href="/wordpress/2022/07/23/170/" class="nm-card" target="_blank" rel="noopener noreferrer">
	<div class="nm-card-box">
		<div class="nm-card-thumbnail">
			<img src="" alt="兵庫県)今津駅→今津灯台西宮神社西宮駅NEX-5R+七工匠 7Artisans 18mm F6.3。"/>
		</div>
		<div class="nm-card-content">
			<div class="nm-card-title">兵庫県)今津駅→今津灯台西宮神社西宮駅NEX-5R+七工匠 7Artisans 18mm F6.3。 </div>
			<div class="nm-card-excerpt">7月23日。阪神今津駅→今津灯台西宮神社西宮駅。5.6km、1時間30分。 カメラ「NEX-5R」+レンズ…</div>
			<div class="nm-card-site">/wordpress/2022/07/23/170/</div>
		</div>
	</div>
</a>

リンク先の記事にアイキャッチ画像を登録してみた。

上が先程作成したショートコード。下は標準のURL埋め込みリンク。

アイキャッチ画像が縦長だとブログカードの縦幅がかなり広がってしまう。

上が先程作成したショートコード。下は標準のURL埋め込みリンク。

ショートコード用の「追加CSS」の「.nm-card-thumbnail img」を書き換えてみた。

.nm-card-thumbnail img {
    width: 100%;
}

↓↓↓

.nm-card-thumbnail img {
	width:120px;
	height:120px;
	object-fit:cover;
}

これで画像が自動的に正方形で表示される。

次に、ショートコードのimage_urlの指定がない場合、ブログカードの画像ブロック自体を表示しないようにする。

[nmblogcard url="url" image_url="画像url"]
[nmblogcard url="url"]

wp-content\themes\semplicemente\functions.php」の 「nm_create_blogcard_layout()」を以下のようにカスタマイズする。

function nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix) {
	$blogcard = '<a href="'. $url .'" class="'. $prefix .'-card" target="_blank" rel="noopener noreferrer">' .
			'<div class="'. $prefix .'-card-box">';
	if ($image_url <> "") {
	$blogcard .= 		'<div class="'. $prefix .'-card-thumbnail">' .
					'<img src="' . $image_url . '" alt="' . $title . '"/>' .
				'</div>';
	}
	$blogcard .= 		'<div class="'. $prefix .'-card-content">' .
					'<div class="'. $prefix .'-card-title">'. $title .' </div>' .
					'<div class="'. $prefix .'-card-excerpt">'. $excerpt .'</div>' .
					'<div class="'. $prefix .'-card-site">'. $site .'</div>' .
				'</div>' .
			'</div>' .
		'</a>';
	return $blogcard;
}
[nmblogcard url="url" image_url="画像url"]

↓↓↓

[nmblogcard url="url"]