モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

WordPress 4.4 の埋め込み(embed)機能の表示をカスタマイズする

WordPress 4.4 から、簡単に WordPress の記事を本文中に埋め込めるようになりました。
こんなかんじ。

WordPress 4.4 “Clifford”

上記公式サイトによりますと

他の WordPress サイトに投稿を埋め込めるようになりました。エディターに投稿の URL を入れるだけで、設定したタイトル、抜粋、アイキャッチ画像を備えた埋め込みプレビューがすぐに表示されます。

とのこと。実際、URLを入れるだけなので簡単です。

で、この埋め込み表示のカスタマイズ方法を、ちょっとまとめます。

テンプレートをカスタマイズする

デフォルトで使用されるテンプレートは /wp-includes/embed-template.php に配置されています。
これを自分のテンプレートフォルダにコピーして、自由に編集すればOKです。
たとえば初期状態だと日付の表示はありませんが、適当にテンプレート内に <?php the_date() ?> などと記述すれば、日付が表示されるようになります。

で、カスタマイズしたテンプレートファイルを使用するために、functions.php にこんな感じの記述をしてください。

// embed: テンプレートファイルの切り替え
function my_embed_template()
{
    // 使用するテンプレートファイルを返す
    return plugin_dir_path(__FILE__) . 'embed-template.php';
}
add_filter('embed_template', 'my_embed_template');

CSS をカスタマイズする

新しくCSSファイルを読み込ませたい場合は、フィルターフックの embed_head を使います。

// embed: CSSファイルを追加
function my_embed_head()
{
    wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . 'new_css_file.css');
}
add_filter('embed_head', 'my_embed_head');

また、もしデフォルトのCSSファイルを読み込ませたくない場合は、以下の1行を追加します。

// embed: デフォルトCSSを読み込まない
remove_action('embed_head', 'print_embed_styles');

iframe出力をカスタマイズする

embed機能は iframe を出力するのですが、そこにもフィルタが用意されています。

// embed: iframe出力をカスタマイズ
function my_embed_oembed_html($content)
{
    // ここで $content をゴニョゴニョして return すればOK
    return $content;
}
add_filter('embed_oembed_html', 'my_embed_oembed_html');

ブラウザから表示を確認する

URLの末尾に /embed と付加、もしくはGET で embed というパラメタを渡せば、embed表示をブラウザ上で確認できます。
こんなかんじです。

https://ja.wordpress.org/2015/12/10/clifford/embed

http://www.shakaika.jp/?p=12008&embed

embed 機能を無効にする

埋め込み機能を無効にしたい場合は、以下のコードで可能でした。

// embed: 埋め込み機能を無効にする
function my_disable_wp_oembed()
{
    remove_action( 'wp_head', 'wp_oembed_add_host_js' );
}
add_action('init', 'my_disable_wp_oembed', 9999);

また、"disable-embeds" というプラグインもあるとのこと。

wordpress.org


結果、こんな風にカスタマイズできました。

日本の産業や学問を支えてきた地下施設、スーパーカミオカンデに潜入!ジオ・スペース・アドベンチャー後編

はい。 以上、こんなかんじ。

(内容は WordPress 4.4 / 2016.01.03 時点のものです)