ワードプレス Embed(埋め込み)機能の表示方法をカスタマイズ【ブログカード】

Categories | ホームページ ブログ(WordPress)

ワードプレス Embed(埋め込み)機能の表示方法をカスタマイズ

前回はEmbed(埋め込み)機能の表示不具合を検証してみました。

ですが不具合の対処方法をどうするか? 半日ほど悩み結論が出ませんでした。

そもそも当ブログ(テーマ)は自作したもであり、

そこそこphp・css等をいじるスキルはあるんです。

不具合があれば始めからシステムをサクッといじれば良かった事。

と言うことで、「Embed機能」の表示方法を自力でカスタマイズします。

あくまでも私的なカスタマイズですから参考まで。

※現時点のワードプレスはバージョン5.8.1です。

 

前回の「Embed機能」検証で、2種類のブログカードが用意されている事が分かり、

アイキャッチ画像のサイズ(アスペクト比)違いで、標準タイプスクエアタイプの2種類です。

スクエアタイプはサムネイル画像が大きいです。「Embed機能」検証記事は下のブログカード。

ワードプレス Embed(埋め込み)機能の不具合を検証【ブログカード】

 

0908 02 369x400 ワードプレス Embed(埋め込み)機能の表示方法をカスタマイズ【ブログカード】

上の画像はアイキャッチ画像が横長だったので、スクエアタイプのブログカードです。

当ブログでは、標準タイプだと何ら問題なく表示されるのですが、

このスクエアタイプがうまく表示されないので、

サムネイル画像のサイズを標準タイプと同じにしました。

手を加えるファイルとコードです。↓ ダウンロードして修正。

 

【public_html/wp-includes/theme-compat/embed-content.php

Before

<div class="wp-embed-featured-image rectangular">

After

<div class="wp-embed-featured-image square">

 

0908 02 369x400 ワードプレス Embed(埋め込み)機能の表示方法をカスタマイズ【ブログカード】

Before

↓ ↓

After

 

0911 400x235 ワードプレス Embed(埋め込み)機能の表示方法をカスタマイズ【ブログカード】

「rectangular」を「square」に書き換えるだけでサムネイルが小さくなる。

次にスタイルシートでマージンやフォントサイズを若干変更。

Embedのcss(スタイルシート)をダウンロードして修正。

 

格納場所: 【/wp-includes/css/wp-embed-template.min.css】

 

カスタマイズ後の表示はこうなました。

実際のブログカードです。

TOSHIBA dynabook T451/46DRK 壊れたノートパソコンの修理

 

最後に、変更したファイル

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');

 

以上です。

Comment(0) | Trackback(0)

TAGS: / / | 2021年9月12日 |

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です