WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。

2019/3/28 Wordpress

シェアする

WordPressの機能の中で１つ便利なのがEmbed、埋め込み機能です。記事から自分のサイトへの参照リンクを入れる時に便利なのですが、見栄えが今ひとつ・・・。ということで、これをはてなブログ風にカスタマイズする方法を調べました。

WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。

URLを貼るだけで見栄えを整えてくれる機能をEmbedと言います。Youtubeの動画やGoogle Mapの地図埋め込みなんかは一般的ですね。
Wordpressにもその機能があります。「ブログカード」という呼び方もあるようです。
またはてなブログも同じように実装していますが、大分見栄えが違います。

WordPressのバージョン4.4をカスタマイズする方法を取り上げているはてなブログとWordpressサイトの記事を貼ってみます。
http://nelog.jp/wordpress-blog-card

上ははてなブログ、下はWordpressですが、大分見栄えが違いますよね。個人的な所感で言えばWordpressはすごく大味な感じ。
どちらもレスポンシブ対応していますが、はてなはコンパクトなのでスマホで見た時にブログカードが画面の殆どを占める、という事がありません。
ということで、WordpressのEmbedをはてなブログに近い感じにするようカスタマイズしてみます。

バージョンアップの度に変わるカスタマイズ方法

ネットで調べるとWordpressのEmbedのカスタマイズ方法が記載されたページはそこそこあるのですが、殆どがver.4.4です。このバージョンから埋め込み機能が実装されたんですね。
ところがver.4.5台になってファイル構成が変わったようで、あまりうまく動かない事が多いです。
ですので色々調べながらWordpress ver.4.5のカスタマイズをやってみました。

また、はてなブログフォーマットに近づけるに当たって自分で決めた決めごととして、

  1. WordPressのEmbedにあるサムネイルが大きい場合のRectangularモード（上の例のようにサムネイルがデカイ）をなくして右側100px四方のサムネイルのみとする。
  2. はてなブログのブログカードのようにfavicon.icoにも対応させる。
  3. EmbedのCSSカスタマイズも方法が変わったようだし、Embedで2つファイルをリクエストさせるくらいならHTMLの中にCSSを入れて1ファイルで管理できるようにする。

を前提にカスタマイズしました。

WordPress ver.4.5.3で埋め込み(Embed)をカスタマイズする方法

ファイル構成はややこしいのですが、方法はいたってシンプルです。

  1. WordPressのトップディレクトリから/wp-include/theme-compat/embed-content.phpをテーマディレクトリにコピー。
  2. このファイルをカスタマイズする。

要はこれだけ。

embed-content.phpをstylesheet_directoryにコピー

WordPressのテーマは、システムで使っているファイルと同名のファイルがカスタマイズするテーマのディレクトリに存在するとそちらを読むようになっています。
これを利用してembed-content.phpをテーマディレクトリにコピー。カスタマイズするのはこのファイルだけです。

Rectanularモードをなくす

上の決め事１のRectangularモードをなくします。

embed-content.phpの67行目から始まるこのブロックを削除。

if ( '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; ?>

サイズが大きい画像はRectangular、小さいものはsquareとして扱っているようです。

その前くらいまでのところで、サムネイルサイズを取得＞大きければRectangularモード、でなければsquareモード＞表示で再度モード確認して表示、という処理をしているので、その辺関連は全部削除でいいと思いますが、作業が煩雑化するのでやめました。

パーツの位置を変更

WordPressとはてなブログのEmbed、ブログカードでは、レイアウトで下記の点に違いがあります。これを場所を変えてきます。

場所/プラットフォーム WordPress はてなブログ
サイト名とHOMEへのリンクの場所 左下 左上
プラットフォームのロゴ なし（サイト名のアイコンが兼ねている） 右上
共有ボタン 右下 なし
はてなスター・ブックマーク数 なし 左下
サムネイル表示 左中段 (squareモード） 右中段

こうやって見てみると、Wordpressの左下のサイト名をカスタマイズして右上に、はてなロゴ（プラットフォーム）の所に共有ボタン、はてなスター、ブックマーク数は追加、サムネイルは右へ移動する、というのが改変場所になります。

<?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
 */
?>
<style>
.wp-embed {
    padding: 12px;
    font-family: 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif;
}
.wp-embed-site-title {
    float: left ;
}
.wp-embed-meta {
    float: right ;
}
.wp-embed-header {
}
.wp-embed-body {
    clear: both ;
    line-height: 2em;
}
.wp-embed-body a {
    font-size: 17px ;
    font-weight: bold ;
    color: #333 ;
}
.wp-embed-excerpt {
    color: #333 ;
}
.wp-embed-featured-image.square {
    max-height: 100px;
    max-width: 100px ;
    margin: 0 0 0 20px ;
    overflow: hidden;
    float: right ;
}
</style>
    <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();
        }

        $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;
                }
            }
        }

        /**
         * Filter 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';

        /**
         * Filter 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 );
?>


        <div class="wp-embed-heading">
         <?php $url_host = parse_url(get_the_permalink(), PHP_URL_HOST) ; ?>
            <a href="<?php echo get_bloginfo('home'); ?>" target="_blank"><img src="http://www.google.com/s2/favicons?domain=<?php echo $url_host; ?>" alt="<?= $url_host ?>" title="<?= $url_host ?>" class="favicon"/> <?php echo $url_host; ?></a>
            <?php //the_embed_site_title() ?>
            <div class="wp-embed-meta">
                <?php do_action( 'embed_content_meta'); ?>
            </div>
        </div>

        <div class="wp-embed-body">
        <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>

 
            <a href="<?php the_permalink(); ?>" target="_top">
                <?php the_title(); ?>
            </a>
        </div>

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

        <?php
        /**
         * Print additional content after the embed excerpt.
         *
         * @since 4.4.0
         */
        do_action( 'embed_content' );
        ?>

        <div class="wp-embed-footer">
            <a href="<?php the_permalink(); ?>" target="_blank"><small><?php the_date(); ?></small></a>
            <img src="http://s.st-hatena.com/entry.count.image?uri=<?php echo urlencode(get_the_permalink()); ?>" alt="" class="star-count" />
            <a href="http://b.hatena.ne.jp/entry/<?php echo urlencode(get_the_permalink()); ?>" target="_blank"><img src="http://b.st-hatena.com/entry/image/<?php echo urlencode(get_the_permalink()); ?>" class="bookmark-count"/></a>

            <?php //the_embed_site_title() ?>

            <div class="wp-embed-meta">
                <?php
                /**
                 * Print additional meta content in the embed template.
                 *
                 * @since 4.4.0
                 */
                //do_action( 'embed_content_meta');
                ?>
            </div>
        </div>
    </div>
<?php

完成

一応完成のものを貼っておきます。
https://freesim.tokyo/wordpress/wpembed-like-hatena/

この記事が気に入ったら
いいね！お願いします

シェアする
ツイートする
Twitter で

コメント

  1. ハロー効果で読者に信頼の2文字を！初心者ブロガーでもすぐに使える３つのレシピ！ より:
    2017-04-23 14:11

    […] WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。 […]

    返信
  2. WordPressの使い方からインストールまで始めたらとりあえずやっておくべきことをまとめてみた。 | うさちゃんねるフロンティア より:
    2017-05-03 21:55

    […] WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。 […]

    返信