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

// ブログカードカスタマイズ
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
);

/* ブログカード 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;
	}
}