WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」

Posted on Update by admin

main_oembed
WordPress4.4 からは、他のブログ (oEmbed対応) の記事を埋め込み表示できるようになりました。もちろん WordPress4.4どうしでしたら 記事のURLを貼るだけで簡単に引用表示できます。
という事で WordPress4.4のoEmbed機能を調べてみました。

Embed

Embedを使うのは簡単です。投稿欄にURLを入れるだけで 相手側が対応していれば 表示されます。WordPress4.4では 対応の対象は投稿ページか固定ページになります。
embed_03

アイキャッチ画像

アイキャッチ画像は画像の縦横比をチェックして表示する場所を変えています。
横サイズ/縦サイズ が 1.75以上の場合(横長)は上部に、それ未満の場合は内部に表示されます。
　

タイトル

the_title() を使って表示しています。
　

抜粋

the_excerpt_embed()を使って表示しています。内部を見ると get_the_excerpt() を使ってます。
　

サイトタイトル・サイトロゴ

サイトタイトルは 設定->一般で設定した「サイトのタイトル」を表示します。
サイトロゴは テーマカスタマイザー(外観->カスタマイズ)のサイト基本情報・サイトアイコンで設定したロゴが表示されます。
未設定の場合はWordPressロゴが表示されます。
　

コメント

コメントされた数が表示されます。
　

共有ダイアログ

埋め込み用のコードが生成されます。oEmbed未対応のサイトへ張り付ける場合でも「HTMLで埋め込む」のコードを使えば同じように表示させる事ができます。

　
　

デザインやレイアウトを変更したい場合

embed_04
WordPressのEmbedは、実にいい場所にアクションフィルターを設置しています。これを利用する事でオリジナルなEmbed表示をさせる事も出来ます。
　

CSSをオリジナルなものに変更したい

CSSの元ファイルは wp-includes/css/wp-oembed-embed.css にあります。
例えば wp-oembed-embed.css を my-plugin フォルダへコピーして これを変更する事でオリジナルなデザインを作る事ができます。

そして コピーしたCSSを読み込むように切り替える為に、以下のコードを my-plugin.php に張り付けてください。

/**
 * embed用のCSSを my-plugin に設置したCSSの方を読込むように変更する
 *
 * @since WordPress 4.4.0
 * License: GPLv2 or later
 */
function nendebcom_embed_styles(){
	// Add wp-embed-template used in the original stylesheet.
	wp_enqueue_style( 'wp-embed-template-org', plugin_dir_url( __FILE__ ) . 'wp-oembed-embed.css' );
}
add_filter( 'embed_head', 'nendebcom_embed_styles' );
// Remove wp-embed-template used in the main stylesheet.
remove_action( 'embed_head', 'print_embed_styles' );

※公式な情報ではありません。
※デフォルトのCSSはそのまま使用して、CSSの追記分だけ使用する場合は remove_action( ‘embed_head’, ‘print_embed_styles’ ); を消してください。

　

テンプレートをオリジナルなものに変更したい

embed表示用のテンプレートは wp-includes/embed-template.php にあります。
例えば embed-template.php を my-pluginフォルダへコピーして これを変更する事でオリジナルなテンプレートを作る事ができます。
カスタムポストやカスタムフィールドを使ってる場合はこちらを使った方が早いかもしれません。

テンプレートの読み込みを切り替えるには 以下のコードを my-plugin.php に張り付けてください。

/**
 * embed用のテンプレートをmy-pluginに設置したテンプレートの方を読込むように変更する
 *
 * @since WordPress 4.4.0
 *
 * @param string $template Path to the template file.
 * License: GPLv2 or later
 */
function nendebcom_embed_template( $template ){

	$template = plugin_dir_path( __FILE__ ) . 'embed-template.php';
	return $template;
}
add_filter( 'embed_template', 'nendebcom_embed_template' );

※公式な情報ではありません。

　

抜粋の部分だけ変更する

抜粋の部分だけ変更したい場合は以下のサンプルコードを元に作ってみてください。
$output の中には get_the_excerpt() で取得したデータが入っています。
また ここは Loop内に入ってますので、いろいろできそうです。

/**
 * 抜粋の内容を変更する
 *
 * Intended to be used in 'The Loop'.
 *
 * @since WordPress 4.4.0
 * License: GPLv2 or later
 */
function nendebcom_excerpt_embed( $output ){

	/* ここで内容を変更する。
	$output = '';
	*/
	return $output;
}
add_filter( 'the_excerpt_embed', 'nendebcom_excerpt_embed' );

※公式な情報ではありません。
　
　

Embedは不要

「Embedは不要なので動かなくしたい」という場合は以下のプラグインをインストールしてみてください。

Disable Embeds
https://wordpress.org/plugins/disable-embeds/

　

スポンサードリンク



　

おまけ

Embed表示を単独で確認

WordPress4.4のEmbed表示は、記事のURLに embed を追加するだけで単独で表示確認する事ができます。
例
　http://ドメイン/?p=XX&embed=true　　(パーマリンク:デフォルト)
　http://ドメイン/archives/XX/embed　　　(パーマリンク:数字ベース/投稿名)

　

アイキャッチ画像サイズ

アイキャッチ画像が上側に表示されている時、たまたま縦横比によっては表示される画像が 「 medium(WIDE:300px) 」とかになってしまって 上部表示画像がぼやけた画像になってしまう事があります。
そんな場合は強制的に画像サイズを設定するアクションフィルターがあります。

以下のコードを my-plugin.php に張り付けてください。

/**
 * 使用するアイキャッチ画像を設定
 *
 * @since 4.4.0
 *
 * @param string $image_size Thumbnail image size.
 * License: GPLv2 or later
 */
add_filter( 'embed_thumbnail_image_size', function(){ return 'medium_large'; } );

※thumbnail、medium、medium_large 、large、full のどれかを入れてください。
※公式な情報ではありません。

　

アイキャッチ画像表示位置

embed_01
アイキャッチ画像の縦横比によって表示場所が 上部 または内部に表示されますが 強制的に場所を固定したい場合は 以下のコードを my-plugin.php に張り付けてください。

/**
 * アイキャッチ画像表示場所を固定
 *
 * Rectangular images are shown above the title
 * while square images are shown next to the content.
 *
 * @since 4.4.0
 *
 * @param string $shape Thumbnail image shape. Either 'rectangular' or 'square'.
 * License: GPLv2 or later
 */
add_filter( 'embed_thumbnail_image_shape', function(){ return 'square'; } );

※rectangular が上部で squareが内部です。
※公式な情報ではありません。

　

Google Analytics

せっかくなので Google Analyticsのトラッキングコードを埋め込みたい場合は 以下のコードを my-plugin.php に張り付けてください。

function nendebcom_embed_analytics (){
?>
<script>
	//Google Analyticsのトラッキングコード
</script>
<?php
}
add_action( 'embed_head', 'nendebcom_embed_analytics' );

※wp_head ではありませんので注意してください。
※公式な情報ではありません。

　
　

参考

Make WordPress Core　New Embeds Feature in WordPress 4.4
https://make.wordpress.org/core/2015/10/28/new-embeds-feature-in-wordpress-4-4/

oEmbed
http://oembed.com/

WordPress Codex 日本語版　oEmbed
https://wpdocs.osdn.jp/oEmbed




スポンサードリンク