WordPress4.4以降でサイト内の記事URLを貼り付けた際にカード形式で表示されるembed機能（埋め込み機能）が追加されました。
今回は、プラグインを使わずにカスタマイズする方法をまとめました。

構成

最初に見てもらったほうがいいかと思うので、実際に表示しました。

↓ブログカードってこんなやつです！

【jQuery不要】Javascriptのみで動くdatetimepickerまとめ

以下の手順どおりにやれば簡単に実装できます。

手順はembed-content.phpをコピーして編集するだけ

上記ファイルをコピーして適用中テーマのディレクトリにいれましょう。

さきほどコピーしたテーマ内にあるファイルが優先されて表示されるようになります。

あとは好きなようにいじれば終わりです。

ちなみに、embed-content.phpだけじゃなくて、/wp-includes/theme-compat/以下に入ってるものを、適用されてるテーマのディレクトリに設置することでテーマ内に置いたファイルが優先されて表示されます。

以下は、実際に表示させてるカードの内容です。PHPファイルはほぼいじってないです！

編集した内容

まずはCSSの内容。

<style>
.wp-embed {
  padding: 15px;
  background: #eee;
  max-width: 640px;
}
.wp-embed-featured-image img {
  object-fit: cover;
  width: 120px;
  height: 120px;
}
p.wp-embed-heading {
  font-size: 18px;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wp-embed-site-icon {
  width: 15px;
  height: 15px;
}
.wp-embed-site-title a {
  padding-left: 20px;
  font-size: 12px;
}
.wp-embed-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wp-embed-featured-image {
  margin-bottom: 10px;
}
.wp-embed-footer {
  margin-top: 10px;
}
@media screen and (max-width: 639px) {
  .wp-embed {
    padding: 10px;
  }
  .wp-embed-featured-image img {
    object-fit: cover;
    width: 80px;
    height: 80px;
  }
  p.wp-embed-heading {
    font-size: 14px;
  }
  .wp-embed-excerpt {
    font-size: 12px;
  }
  .wp-embed-site-icon {
    width: 12px;
    height: 12px;
  }
  .wp-embed-site-title a {
    padding-left: 15px;
    font-size: 10px;
  }
}
</style>

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

この記述は、こちらで解説してます↓

【複数行も対応可能】長過ぎるテキストを省略して末尾を三点リーダーにする方法

次に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() && 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   = 'medium'; // Fallback.

    $meta = wp_get_attachment_metadata($thumbnail_id);
    if (!empty($meta['sizes'])) {
      foreach ($meta['sizes'] as $size => $data) {
        if ($data['height'] > 0 && $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) :
  ?>

    <?php /*
      <div class="wp-embed-featured-image rectangular">
      */ ?>
    <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; ?>

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

  <?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-excerpt"><?php the_excerpt_embed(); ?></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>

</div>

サムネイルが必ず四角形に表示されるよう、「class=”wp-embed-featured-image rectangular”」を「class=”wp-embed-featured-image square”」に修正してます。

また、.wp-embed-meta部分はまるっと削除してます。

こんな感じで仕組みさえわかってしまえば特に難しいこともないので、色々いじってみましょう！