機能
埋め込みカスタマイズブログカードembed

【簡単！】ブログカードを見やすくコンパクトにカスタマイズ【プラグイン不要】

2017.10.22

前回ご紹介したembed（埋め込み）機能

【Embed】ブログカードに対応させようと思っていたら、設定しなくても適用されていた件
前々からブログカードを導入しようと思っていましたが、面倒だなーと思って特に何もしていませんでした。そろそろブログカードを導入しようと思った時にちょっと調べたら、なんとWordPress4.4から標準の機能として存在していたではありませんか。...
plu-plu.net

これを使用すれば、設定不要で、ブログカードを使用することができるので、便利な機能ですが、デフォルトの状態ですと、大きすぎるような気がします。

あるとないとでは全然見栄えが違う、ブログカードの昨日ですが、どうせ使うなら、自分好みにカスタマイズしてみましょう。

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ！
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー！
  • 自動バックアップ機能に標準対応で安心運用可能！
気になるポイント！ キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

デフォルトの状態

デフォルトの状態はこのようになっています。

結構大きめに設定されているので、表示画面を多くの割合で占めています。

カスタマイズ後

当記事の通りにやると、このようになります。

大きさをコンパクトにすることで、他のコンテンツを見やすくします。

記事タイトルを画像横に移動等をすることで、縦の幅を小さくしました。

カスタマイズのやり方

カスタマイズ自体はコピペで可能です。

カスタマイズをする前に、いくつか準備をします。

ファイルをテーマファイルにコピーする

まずは、ブログカードに関するファイルをコピーします。
コピーするファイルは、「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】
上記の場所にあります。

この2つのファイルを使用しているテーマのフォルダーにコピーします。
stinger8の子テーマを使用している場合は、
【public_html/wp-content/themes/stinger8-child】にコピーします。

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');

これでカスタマイズが出来るようになりました。

なお追加したファイルは、WordPressの管理画面の【外見＞テーマの編集】から編集することが出来るようになっています。

embed-content.phpを編集する

まずはテーマファイルにコピーしたembed-content.phpのファイルを編集していきます。

タイトルの位置を調整

embed-content.phpのファイルを編集することで、ブログカードのタイトルを画像の横（抜粋文の上）に配置します。

まずはembed-contet.phpのファイル下部にある以下のコードを探します。 

<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で囲み、【wp-embed-rcontents】というclass名を追加します。

上記の工程が完了すると、以下のようになります。

<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>

画像が大きくなる条件分岐をなくす

デフォルトの状態で使用していると、アイキャッチ画像のサイズによって、以下のように画像がめちゃめちゃでかく表示されることがあります。

でかすぎますね(笑)
この条件分岐をしないようにします。

同じくembed-contet.phpのファイル下部にある、以下のコードを探します。

		if ( $thumbnail_id && '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”＞のclass名【rectangular】を【square】に書き換えます。

書き換え後はこのようになります。

		if ( $thumbnail_id && '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-contet.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() && wp_attachment_is_image() ) {
			$thumbnail_id = get_the_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['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 && '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 && '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を編集する

次は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;
}

これで完成です。

まとめ

上手くできたでしょうか？

そこまで難しくないと思いますので、皆様もお気軽にお試しあれ～

p.s.上記の内容ではレスポンシブ対応真で考えてなかったので、後日追記します。

カスタマイズについて

カスタマイズをするにあたっては、全て自己責任でお願いします。

カスタマイズをする場合に、当サイトの記事を参考にして頂けると、
大変うれしいのですが、ただコピペをするだけよりも、
本などで知識を蓄えてからカスタマイズするのでは、全然違います。
応用することもできますしね。

私が使用したおすすめの本はこちらです。

WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)

posted with ヨメレバ
エビスコム ソシム 2015-09-11
Amazon
Kindle
楽天ブックス
図書館

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with ヨメレバ
服部 雄樹 技術評論社 2017-07-21
Amazon
Kindle
楽天ブックス
楽天kobo

コメント

  1. WordPressではてなブログっぽい過去記事への参照を簡単に表示する方法 | ぐだおの隠遁生活研究室 より:
    2018年7月13日 4:13 PM

    […]  Plus Plus【簡単！】ブログカードを見やすくコンパクトにカスタマイズ【プラグイン不要】前回ご紹介したembed（埋め込み）機能これを使用すれば、設定不要で、ブログカードを使用 […]

    返信