埋め込みリンクの表示スタイルを若干変更してみました

前回の投稿で、ワードプレス4.4から、下のような埋め込みリンクが、簡単に設置可能になったとの記事を記載しました。

New Embeds Feature in WordPress 4.4

この埋め込みリンクの表示をアレンジしてみたくなったので、少し解析して、そして、変更してみました。

この埋め込みリンクを表示する為に使用しているテンプレートは、wp-includes フォルダ内の

embed-template.php

また、そのテンプレートのスタイルシートは、wp-includes / css フォルダ内の

wp-embed-template

です。

テンプレート内のフィルターもしくはアクションへフックした関数を、子テーマ内のfunctions.php に記載、もしくは plugin を作成
変更したいスタイルシートタグを子テーマ内に記載する

の方法で良いのではないでしょうか。

但し、一つだけ、注意しておきたいことは、ここでの修正は、あくまでも、当サイトが、他サイトでどのように表示されるかを変更するものであって、自サイトで表示されている他サイトのリンクの表示を変更するものではない、ということです。

まず、どんなフックがあるか？を調べてみました。

ちなみに、この埋め込みリンクは iFrame 内での表示となります。

アクションフック
- embed_head（<head>部分に新たな構文を挿入）
- embed_content（抜粋されている文章の次に挿入）
- embed_content_meta（メタタグなどを挿入）
- embed_footer（<body>部分の最後に新たな構文を挿入。外枠の下への表示）
フィルターフック
- embed_thumbnail_image_size（イメージサイズを変更。詳細は下記）
- embed_thumbnail_image_shape（イメージの形変更用。詳細は下記）
- embed_site_title_html（左下のサイトタイトル部分の修正に使用（投稿タイトルではない））
今回は、イメージサイズとその形を変更して、アイキャッチの表示を変更。
そして、メタタグ部分に、投稿日を記載することにしました。

できあがりは次のとおりです。

修正前の表示イメージは、次のとおりです。

アイキャッチ画像の表示方法の変更

オリジナルでは、横の長さが、縦の長さの1.75倍以上の時、アイキャッチ画像を投稿タイトル上に表示、1.75未満の時には、抜粋文の横に表示するように設定されています。

今回、画像を full サイズから Thumbnail に変更し、画像の形状を設定する変数の値を、square に固定することにより、どんなアイキャッチ画像でも、抜粋文横に表示するように変更しました。

投稿日をメタタグに記載

もうひとつの変更は、投稿日を追加表記する為、アクションフック関数を追加しました。

今回の修正では、スタイルシートは触っていません。
下記フックの関数を functions.php に記載、もしくはプラグインを作成・追記します。
```
add_filter ('embed_thumbnail_image_size','mta_embed_thumbnail_image_size');
function mta_embed_thumbnail_image_size(){
	return 'thumbnail';
}
add_filter ('embed_thumbnail_image_shape','mta_embed_thumbnail_image_shape');
function mta_embed_thumbnail_image_shape(){
	return 'square';
}
add_action ('embed_content_meta','mta_embed_content_meta');
function mta_embed_content_meta(){
		the_date();
}
```