ブログの記事を見やすくする機能として「ブログカード」というものがあります。
これは「埋め込み」や「embed機能」などとも呼ばれています。
このブログカードの機能は高機能なwordpressのテーマにもブログカードの機能が組み込まれていることが多いですが、実はブログカードの機能は、WordPressのデフォルトの機能として搭載されている機能なのです。

ただしデフォルトの状態だと、表示されるサイズが大きかったり使いにくかったりするので、個人的には使い勝手が悪い気がします。

今回はデフォルトテーマであるTwenty Nineteenのブログカードの機能を見やすくコンパクトに カスタマイズしていきたいと思います。

スポンサーリンク

ブログカードってどんなもの？

WordPressのデフォルト状態でブログカードを使うとこのように表示されます。

記事上に入力したリンクがこんな感じで表示されます。
単純な文字列を設置するよりも、ブログカードの機能を使うことで、アイキャッチ画像やタイトル、抜粋文がまとめて表示されるので、その記事を見た人の興味を引きやすく、回遊率を上げる効果が期待できます。

ただ上画像のようにデフォルト状態だと、なかなか大きく表示れることもあるため、個人的には、もうちょっとコンパクトにまとめたいのが本音です。

当記事のカスタマイズを行うことで、このようにコンパクトになります。

これを当記事でカスタマイズしていきます。

もちろん子テーマを使用しましょう

毎度のことですが子テーマを使用してくださいね

TwentyNineteenの子テーマの作り方はこちら

子テーマがどのような機能かわからない場合はこちら

カスタマイズスタート

準備

カスタマイズをするにあたり、いくつか準備が必要になります。

ファイルを持ってくる

まずはブログカードに関するファイルを探し、子テーマにアップロードします。
コピーするのは、「wp-embed-template.min.css」と「embed-content.php」というふたつのファイルです。


「wp-embed-template.min.css」のファイルの場所は
【public_html/wp-includes/css/wp-embed-template.min.css】

「embed-content.php」のファイルは、
【public_html/wp-includes/theme-compat/embed-content.php】
上記の場所にあります。

このふたつのファイルをカスタマイズしようとしているTwenty Nineteenの子テーマにアップロードします。
一応ファイルの場所は、【public_html/wp-content/themes/twentynineteenの子テーマファイル】です。

functions.phpにコードを追加

アップロードができたら以下のコードをfunctions.phpに追加してください。

function my_embed_style() {
    wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/wp-embed-template.min.css');
}
add_filter('embed_head', 'my_embed_style');

これで準備が終わりました。
ここから本格的にカスタマイズしていきます。

各ファイルを編集する

準備が終わったら、上記の準備で追加したファイルを編集していきます。

embed-content.phpを編集する

まずはembed-content.phpのファイルを編集していきます。
このファイルを編集することで以下のような部分が変更されます。

  • タイトルをアイキャッチ画像の下から横に変更
  • 画像が大きくならないようにする

タイトル位置の調整

まずはタイトルの位置を変更する作業です。

embed-content.phpのファイル下部あたりにある、以下のコードを探してください。

<p class="wp-embed-heading">
	<a href="<?php the_permalink(); ?>" target="_top">
		<?php the_title(); ?>
	</a>
</p>

この5行のコードを少し下に移動させます。
上記のコードをちょっと下にある以下のコードの上に切り取り、ペーストしてください。

<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>

移動後、【 wp-embed-rcontents】 というクラス名の<div></div>で囲んでください。
囲んだ後の上記コードはこのようになっていますので、確認してください。

<div class="wp-embed-rcontents">
	<p class="wp-embed-heading">
		<a href="<?php the_permalink(); ?>" target="_top">
			<?php the_title(); ?>
		</a>
	</p>
	<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>
</div>


画像は大きくならないようにする

次は、同じく以下のコードを探してください。

		if ( $thumbnail_id &amp;&amp; 'rectangular' === $shape ) : ?>
			<div class="wp-embed-featured-image rectangular">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

上記コードにある<div class=”wp-embed-featured-image rectangular”>のクラス名の【rectangular】を【square】に書き換えてください。
書き換え後、完成したコードはこのようになります。

if ( $thumbnail_id &amp;&amp; 'rectangular' === $shape ) : ?>
			<div class="wp-embed-featured-image square">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

これで、 embed-content.php の編集は完了です。
念のため、完成後の embed-content.php の全体コードを以下に書いておきます

<?php
/**
 * Contains the post embed content template part
 *
 * When a post is embedded in an iframe, this file is used to create the content template part
 * output if the active theme does not include an embed-content.php template.
 *
 * @package WordPress
 * @subpackage Theme_Compat
 * @since 4.5.0
 */
?>
	<div <?php post_class( 'wp-embed' ); ?>>
		<?php
		$thumbnail_id = 0;

		if ( has_post_thumbnail() ) {
			$thumbnail_id = get_post_thumbnail_id();
		}

		if ( 'attachment' === get_post_type() &amp;&amp; wp_attachment_is_image() ) {
			$thumbnail_id = get_the_ID();
		}

		/**
		 * Filters the thumbnail image ID for use in the embed template.
		 *
		 * @since 4.9.0
		 *
		 * @param int $thumbnail_id Attachment ID.
		 */
		$thumbnail_id = apply_filters( 'embed_thumbnail_id', $thumbnail_id );

		if ( $thumbnail_id ) {
			$aspect_ratio = 1;
			$measurements = array( 1, 1 );
			$image_size   = 'full'; // Fallback.

			$meta = wp_get_attachment_metadata( $thumbnail_id );
			if ( ! empty( $meta['sizes'] ) ) {
				foreach ( $meta['sizes'] as $size => $data ) {
					if ( $data['height'] > 0 &amp;&amp; $data['width'] / $data['height'] > $aspect_ratio ) {
						$aspect_ratio = $data['width'] / $data['height'];
						$measurements = array( $data['width'], $data['height'] );
						$image_size   = $size;
					}
				}
			}

			/**
			 * Filters the thumbnail image size for use in the embed template.
			 *
			 * @since 4.4.0
			 * @since 4.5.0 Added `$thumbnail_id` parameter.
			 *
			 * @param string $image_size   Thumbnail image size.
			 * @param int    $thumbnail_id Attachment ID.
			 */
			$image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );

			$shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square';

			/**
			 * Filters the thumbnail shape for use in the embed template.
			 *
			 * Rectangular images are shown above the title while square images
			 * are shown next to the content.
			 *
			 * @since 4.4.0
			 * @since 4.5.0 Added `$thumbnail_id` parameter.
			 *
			 * @param string $shape        Thumbnail image shape. Either 'rectangular' or 'square'.
			 * @param int    $thumbnail_id Attachment ID.
			 */
			$shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );
		}

		if ( $thumbnail_id &amp;&amp; 'rectangular' === $shape ) : ?>
			<div class="wp-embed-featured-image square">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>

		<?php if ( $thumbnail_id &amp;&amp; 'square' === $shape ) : ?>
			<div class="wp-embed-featured-image square">
				<a href="<?php the_permalink(); ?>" target="_top">
					<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
				</a>
			</div>
		<?php endif; ?>
		<div class="wp-embed-rcontents">
			<p class="wp-embed-heading">
				<a href="<?php the_permalink(); ?>" target="_top">
				<?php the_title(); ?>
				</a>
			</p>
		<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>
		</div>
		<?php
		/**
		 * Prints additional content after the embed excerpt.
		 *
		 * @since 4.4.0
		 */
		do_action( 'embed_content' );
		?>

		<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>
	</div>
<?php

wp-embed-template.min.cssを編集する

続いてwp-embed-template.min.cssのファイルを編集します。
wp-embed-template.min.css のファイルを開くとつらつらとコードが書かれていますが、一度このコードを全て消してしまい白紙にします。

白紙にした後、以下のコードをコピペしてください。

.wp-embed{
	padding:10px;
	border:1px solid #eee;
}
.wp-embed-featured-image{
	margin-bottom:0px;
}
p.wp-embed-heading{
	font-size:16px;
	margin-bottom:5px;
}
.wp-embed-footer{
	margin-top:0px;
}
.wp-embed-site-icon{
	width:15px;
	height:15px;
}
.wp-embed-site-title{
	font-size:13px;
}
.wp-embed-site-title a{
	padding-left:20px;
}
@media screen and (max-width: 480px){
.wp-embed-featured-image.square{
	float:none;
	max-width:none;
	margin-right:0;
}
}


これでカスタマイズ終了です。
無事にできていれば、こんな感じで表示されるはずです。


まとめ

今回はブログカードをコンパクトにカスタマイズしました。
一応スマホでも対応できるようにレスポンシブ仕様にはなっていますが、徹底してはないので、気になるようであれば、各自さらにカスタマイズしてくださいね~


シェアお願いします～
Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Pin on Pinterest
Pinterest

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です