埋め込みコンテンツのデザインを変更する方法

WordPressの埋め込みコンテンツのデザインを変更する方法です。
これは自分のサイトがリンクされて他サイトに埋め込まれる場合の話ですね。

◆ 安全にfunctions.phpをカスタマイズする方法
functions.phpの修正に不安がある人は以下を参考にしてください。

埋め込みコンテンツについて

そもそも埋め込みコンテンツ is 何？って人は、自分のサイトの記事ページの末尾に/embed/を付けてアクセスしましょう。
その時に表示されるのが埋め込みコンテンツと呼ばれるページです。そのままEmbedと呼ぶこともあります(たぶん)。

これはYouTube等でも使われる手法で、自分のページをリンクして貰う場合に自サイト側のデザインを強制できます。
それがembedを付けてアクセスしたデザインです。そして、このデザインは任意に改造できます。
ちなみにWordPressには標準的なデザインが内蔵されていて、カードコンテンツみたいな見た目ですね。

注意点として、リンク先にはiframe的な機能でデザインが共有される都合、共有先でデザインの調整ができません。
つまり、あまりに個性的なデザインを採用すると、デザインの不釣り合いから埋め込みコンテンツが使われません。

コードを追加する

functions.phpとかに以下のコードを追加します。単にデザインを上書きするだけです。

add_action('embed_head', function () {
  wp_enqueue_style('styles.embed', get_template_directory_uri() . '/styles/embed.css', array());
});

このサイトのCSSのサンプルです。ただ、SCSSになってるので変換してください。
基本的に独自デザインを目指すならソース覗いてタグ調べるのがスタートライン。

@charset "utf-8";
@use './variables' as variables;

.wp-embed {
  padding: 30px;
  font-size: 14px;
  color: variables.$tkmPrimaryTextColor;
  border: 1px solid variables.$tkmPrimaryBorderColor;
  background: variables.$tkmSecondaryBackgroundColor;

  .wp-embed-heading {
    a {
      font-size: 20px;
      color: variables.$tkmPrimaryLikeColor;

      &:hover {
        opacity: 0.6;
      }
    }
  }

  .wp-embed-excerpt {
    font-size: 14px;
    color: variables.$tkmPrimaryTextColor;

    .wp-embed-more {
      font-size: 14px;
      color: variables.$tkmPrimaryGrayTextColor;

      a {
        &:hover {
          opacity: 0.6;
        }
      }
    }
  }

  .wp-embed-site-title {
    a {
      font-size: 14px;
      color: var(--tkm-primary-accent-color);

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

仕組み

embed_headでCSSを読み込ませると、元々の標準的なCSSに加えて独自のCSSを指定できます。
もし既存のCSSを全捨てしたい場合は、既存CSSの登録名を探して解除します。これは本家のソースを見れば分かります。

簡易カスタマイズ

CSSを差し替えなくても多少のカスタマイズが可能です。ただ、デザインよりも機能制限って感じですね。
実際にはCSSを差し替えてデザインを調整、さらに簡易カスタマイズも使って機能制限するのがベストかも。

コメントボタンの削除

邪魔なコメントボタンが消せます。

remove_action('embed_content_meta', 'print_embed_comments_button');

共有ボタンの削除

邪魔な共有ボタンが消せます。同時にダイアログ機能も消しましょう。

remove_action('embed_content_meta', 'print_embed_sharing_button');
remove_action('embed_footer',       'print_embed_sharing_dialog');

埋め込み画像の解像度を変更

何故か小さい画像が優先指定されてるので画像が荒いです。
昨今の通信料節約を無視してフルサイズを指定します。

add_filter('embed_thumbnail_image_size', function () {
  return 'full';
});

リンクを別タブで開く

埋め込みコンテンツのリンクは同じウィンドウで開くようになってます。
これを別ウィンドウ、つまりは別タブで開くようにするにはJSを改造する必要があります。

その方法が次のサイトに書いてあります。結構めんどいのですが、ある程度の知識があれば可能です。
と言うか、同じウィンドウで開くせいで埋め込みコンテンツが使われないのでは？

参考サイトhttp://webdesign.practice.jp/wordpress_embed_js

あとがき