wordpressの記事埋め込みをはてなブログ風にカスタマイズする。

スポンサーリンク
Pocket
LINEで送る

はてなブログの記事埋め込みが見やすいのでwordpressの埋め込みもはてなブログ風にカスタマイズしたいと思います。

 

準備

wordpressの記事埋め込み機能embedを見やすくカスタマイズする方法

 

埋め込みのデザインが一定と思いきや、なぜか違うデザインになっていました。

デザイン1

fireshot-capture-034-%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3%e3%81%a0%e3%81%91%e3%81%a7%e5%87%ba%e6%9d%a5%e3%82%8b%e5%89%af%e6%a5%ad%ef%bc%81%e3%83%8d%e3%83%83%e3%83%88%e3%81%a7%e3%81%8a%e9%87%91

 

デザイン2

fireshot-capture-035-wordpress%e3%81%ae%e8%a8%98%e4%ba%8b%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%82%92%e3%81%af%e3%81%a6%e3%81%aa%e3%83%96%e3%83%ad%e3%82%b0%e9%a2%a8%e3%81%ab%e3%82%ab%e3%82%b9

 

embed-contentのソースコードを読んでみると、こういった記述がありました。

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

元の画像の縦横のサイズで埋め込みの画像が切り替わるみたいです。

 

このままだと長方形の画像になったり正方形に画像になったりして、はてなブログのようにはならないのでこれを一定のものに変更します。

 

69行目から75行目までにこんな記述があるので削除かコメントアウトしましょう。

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

スポンサーリンク

 

次に83行目から89行を変更します。

これを

<?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-featured-image square”>
<a href=”<?php the_permalink(); ?>” target=”_top”>
<?php the_post_thumbnail(); ?>
</a>
</div>

 

下部に表示されるサイトタイトルもいらないので101行目も削除します。

<?php the_embed_site_title() ?>

 

完成版

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' ); ?>
<div class="wp-embed-featured-image">
 <a href="<?php the_permalink(); ?>" target="_top">
  <?php the_post_thumbnail(); ?>
 </a>
</div>
<div class="wp-embed-content">
<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 do_action( 'embed_content' ); ?>
<div class="wp-embed-footer">
 <?php the_date() ?>
</div>
</div>

CSS

.wp-embed{
  padding: 15px;
  border-radius: 3px;
}

.wp-embed-content{
  margin-right: 135px;
}
.wp-embed-heading a{
  font-size: 20px;
}
.wp-embed-featured-image{
  width: 125px;
  margin: 0 !important;
  float: right;
}

これでなんとなくはてなブログ風になりました。

fireshot-capture-036-wordpress%e3%81%ae%e8%a8%98%e4%ba%8b%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%82%92%e3%81%af%e3%81%a6%e3%81%aa%e3%83%96%e3%83%ad%e3%82%b0%e9%a2%a8%e3%81%ab%e3%82%ab%e3%82%b9