【wordpress】カード型記事埋め込み(oEmbed)の見た目を変えたい

カード型のwordpress記事埋め込み機能をoEmbedというらしい。

こういうやつ↓↓

【wordpress】非公開でも一覧に記事名だけは出したい

このテンプレートを変更したいが、/wp-includes内にあり触るわけにもいかない……というかwordpress更新するたびに変わってしまう。

と思ったら、テーマ内にembed.phpを置くだけでさくっとhtml構造変更可能でした!!
とりあえず、基本のembed.phpはコチラ※ちょっと古いwordpress(4.9.2くらい)ベースですが……。

embed.php

<?php
if (!headers_sent()) {
    header('X-WP-embed: true');
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
    <head>
        <title><?php echo wp_get_document_title(); ?></title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <?php
        do_action('embed_head');
        ?>
    </head>
    <body <?php body_class(); ?>>
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
                <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;
                                }
                            }
                        }

                        $image_size = apply_filters('embed_thumbnail_image_size', $image_size, $thumbnail_id);

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

                        $shape = apply_filters('embed_thumbnail_image_shape', $shape, $thumbnail_id);
                    }

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

                    <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
                    do_action('embed_content');
                    ?>

                    <div class="wp-embed-footer">
                        <?php the_embed_site_title() ?>

                        <div class="wp-embed-meta">
                            <?php do_action( 'embed_content_meta');
                            ?>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
        <?php else : ?>
            <div class="wp-embed">
                <p class="wp-embed-heading"><?php _e('Oops! That embed can&#8217;t be found.'); ?></p>

                <div class="wp-embed-excerpt">
                    <p>
                        <?php
                        printf(
                                /* translators: %s: a link to the embedded site */
                                __('It looks like nothing was found at this location. Maybe try visiting %s directly?'), '<strong><a href="' . esc_url(home_url()) . '">' . esc_html(get_bloginfo('name')) . '</a></strong>'
                        );
                        ?>
                    </p>
                </div>

                <?php
                /** This filter is documented in wp-includes/theme-compat/embed-content.php */
                do_action('embed_content');
                ?>

                <div class="wp-embed-footer">
                    <?php the_embed_site_title() ?>
                </div>
            </div>

        <?php endif; ?>

        <?php
        do_action('embed_footer');
        ?>
    </body>
</html>

 

cssは…?と思うかもしれないですが、こちらはfunctions.phpに記述でOK

function.php

function my_embed_styles() {
  wp_enqueue_style( 'wp-oembed-embed', get_template_directory_uri() . '/css/oembed.css' );
}
add_action( 'embed_head', 'my_embed_styles' );