アフィリエイト広告を利用しています

ブログカード【Snow Monkey】”あわせて読みたい”をそっと表示する2023年のカスタマイズ

下の表示に、Snow Monkeyのブログカードをカスタマイズするコードを作った。

(これは、画像で埋め込んでいるので、タップしてもリンクが開かないのでご注意)

functions.php もしくは my-snowmonkey.phpに追加するコード

// ブログカードカスタマイズ
add_filter(
	'wp_oembed_blog_card_blog_card_template',
	function( $html, $cache ) {
		$url = '';
		preg_match( '/<a href=\"(.*?)\".*?>/mis', $html, $matches );
		if ( is_array( $matches ) && 1 <= count( $matches ) ) {
			$url = $matches[1];
		}
		if ( 0 === strpos( $url, home_url() ) ) {
			$target = '_self';
		} else {
			$target = '_blank';
		}
		$cached_time = isset( $cache['cached_time'] ) ? date_i18n( 'd/m/y H:i:s', $cache['cached_time'] ) : null;
		ob_start();
?>
<div class="wp-oembed-blog-card" data-cached-time="<?php echo esc_attr( $cached_time ); ?>">
		<div class="wp-oembed-blog-card-label">
			<span style="" class="wp-oembed-blog-card-label-text"> ✓ あわせて読みたい</span>
		</div>
		<a href="<?php echo esc_url( $url ); ?>" target="<?php echo esc_attr( $target ); ?>">
			<div class="wp-oembed-blog-card__body">
				<?php if ( $cache['thumbnail'] ) : ?>
					<div class="wp-oembed-blog-card__figure">
						<img src="<?php echo esc_url( $cache['thumbnail'] ); ?>" alt="">
					</div>
					<div class="wp-oembed-blog-card__title with_img">
				<?php else: ?>
					<div class="wp-oembed-blog-card__title">
				<?php endif; ?>
					<?php 
					// タイトルから "ものくろぼっくす" を削除
					$article_title = str_replace("- ものくろぼっくす", "", $cache['title']);
					echo esc_html( $article_title );
					?>
				</div>
			</div>
		</a>
	</div>

<?php
		return ob_get_clean();
	},
	100,
	2
);

なお、34行目の文字列を変更すると、記事タイトルの後ろに表示される自分のブログタイトルを削除した形で表示できる。このコードでは”- ものくろぼっくす”を削除している例になる。

CSSのコード


/* ブログカード 2023-09-17 */

.wp-oembed-blog-card {
    border: 1px solid #aaa !important;
}

.wp-oembed-blog-card a{
    padding:0 !important;
}

.wp-block-embed__wrapper,
.wp-oembed-blog-card {
    box-shadow: none !important;
	    border-color: #999 !important;
    overflow: visible !important;
}
.wp-oembed-blog-card__title {
    font-size: 15px;
    line-height: 1.6em;
    /* font-weight: 400 !important; */
}

span.wp-oembed-blog-card-label-text {
    font-size: 13px;
    background-color: #fff;
    position: absolute;
    top: -13px;
    left: 13px;
}
span.wp-oembed-blog-card-label-text {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

span.wp-oembed-blog-card-label-text.withimg {
    border-radius: 4px !important;
    border: 1px #aaa solid !important;
}

.wp-oembed-blog-card__body {
    align-items: center;
}
:not(.wp-block-embed__wrapper)>.wp-oembed-blog-card__figure img {
    width: 90px;
	margin-left:auto;
	margin-right:auto;
}
:not(.wp-block-embed__wrapper)>.wp-oembed-blog-card__body {
	    padding: 24px;
    flex-direction: unset;
}
.wp-oembed-blog-card__figure {
    max-width: 90px;
}
.wp-oembed-blog-card__body {
    gap: 24px;
}
@media screen and (max-width: 480px) {
.wp-oembed-blog-card__body {
    gap: 16px;
}
	.wp-oembed-blog-card__figure {
    width: 90px !important;
}
	.wp-oembed-blog-card__title.with_img {
    flex-basis: 66% !important;
}
	:not(.wp-block-embed__wrapper)>.wp-oembed-blog-card__figure img {
    object-fit: contain;
	}
}

過去にちょっと違う雰囲気のカスタマイズをしたコードはこちら

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告