ワードプレス Embed（埋め込み）機能の表示方法をカスタマイズ【ブログカード】
2021年9月12日
Categories | ホームページ ブログ（WordPress)
ワードプレス Embed（埋め込み）機能の表示方法をカスタマイズ
前回はEmbed（埋め込み）機能の表示不具合を検証してみました。
ですが不具合の対処方法をどうするか？ 半日ほど悩み結論が出ませんでした。
そもそも当ブログ（テーマ）は自作したもであり、
そこそこphp・css等をいじるスキルはあるんです。
不具合があれば始めからシステムをサクッといじれば良かった事。
と言うことで、「Embed機能」の表示方法を自力でカスタマイズします。
あくまでも私的なカスタマイズですから参考まで。
※現時点のワードプレスはバージョン5.8.1です。
前回の「Embed機能」検証で、２種類のブログカードが用意されている事が分かり、
アイキャッチ画像のサイズ（アスペクト比）違いで、標準タイプとスクエアタイプの２種類です。
スクエアタイプはサムネイル画像が大きいです。「Embed機能」検証記事は下のブログカード。
上の画像はアイキャッチ画像が横長だったので、スクエアタイプのブログカードです。
当ブログでは、標準タイプだと何ら問題なく表示されるのですが、
このスクエアタイプがうまく表示されないので、
サムネイル画像のサイズを標準タイプと同じにしました。
手を加えるファイルとコードです。↓ ダウンロードして修正。
【public_html/wp-includes/theme-compat/embed-content.php】
Ｂｅｆｏｒｅ
<div class="wp-embed-featured-image rectangular">
Ａｆｔｅｒ
<div class="wp-embed-featured-image square">
Ｂｅｆｏｒｅ
↓ ↓
Ａｆｔｅｒ
「rectangular」を「square」に書き換えるだけでサムネイルが小さくなる。
次にスタイルシートでマージンやフォントサイズを若干変更。
Embedのcss(スタイルシート)をダウンロードして修正。
格納場所： 【/wp-includes/css/wp-embed-template.min.css】
カスタマイズ後の表示はこうなました。
実際のブログカードです。
最後に、変更したファイル
「wp-embed-template.min.css」「embed-content.php」を
自作テーマに移して子テーマにする。
テーマ内の「functions.php」に子テーマにしたことのコードを記述。
//embedの子テーマ
function my_embed_style() {
wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/wp-embed-template.min.css');
}
add_filter('embed_head', 'my_embed_style');
以上です。
