WordPress 4.4のテーマに引用貼付け(Embed)用のシェアボタンを設置

Posted on Update by admin

WordPress 4.4のテーマに引用貼付け(Embed)用のシェアボタンを設置
WorsPress4.4 より Embed という サイトの記事を、他のブログに 簡単に「引用貼付け」できる機能が追加されました。

「引用貼付け」をしたい場合、自分のサイトを WorsPress4.4 で作っている場合は、引用したい記事のURLを記事の投稿欄に張り付けるだけで 引用表示されるようになります。
自分のサイトが WorsPress4.4以外の場合は「HTMLでの埋め込み (引用貼付け用のタグ)」を記事の投稿欄に張り付けると表示されるようになります。

しかし「HTMLでの埋め込み (引用貼付け用のタグ)」は、引用貼り付けされた Embed内 には表示されますが、引用元の記事にはありません。

*引用貼付けされた例

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

ボタンをクリックしてみて↑ください。

そこで「引用貼付けのタグが取得できる機能」を テーマに組み込んで、引用元の記事からも 貼付け用のタグを取得できるようにする方法をご紹介します。

　
　

テーマファイルの変更

サンプルとして Twenty Sixteen で説明いたします。

テンプレートファイル変更

投稿記事本文の直下に設置したいので テーマのテンプレート content-single.php と content-page.php の「the_content()」の下に
ボタン表示関数「print_embed_sharing_button();」と
シェア用のダイヤログ表示関数「print_embed_sharing_dialog();」を設置します。

例　content-single.php

<?php
/**
 * The template part for displaying single posts
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->

	<?php twentysixteen_excerpt(); ?>

	<?php twentysixteen_post_thumbnail(); ?>

	<div class="entry-content">
		<?php
			the_content();

			/**
			 * Prints the necessary markup for the embed sharing button.
			 *
			 * From embed.php
			 * @since 4.4.0
			 */
			if ( function_exists( 'print_embed_sharing_button' ) ) {
				print_embed_sharing_button();
			}

			/**
			 * Prints the necessary markup for the embed sharing dialog.
			 *
			 * From embed.php
			 * @since 4.4.0
			 */
			if ( function_exists( 'print_embed_sharing_dialog' ) ) {
				print_embed_sharing_dialog();
			}


			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
			
		//	--- 以下省略 ---

※print_embed_sharing_dialog()は Loop内に設置してくださいね。

　

functions.php 変更

次にボタン表示やダイヤログのデザイン用のCSSとボタンクリックした時のイベント用の Scriptを読み込むように functions.php に書き込みます、

/**
 * Embedのシェアボタン用のCSSとScriptを追加する。
 *
 * @since WordPress 4.4.0
 * License: GPLv2 or later
 */
function nendebcom_twentysixteen_embed_scripts() {

	if( is_singular( array( 'post', 'page' ) ) ){
		//embed share botton and dialog
		wp_enqueue_style( 'wp-embed-template-ie' );
		wp_enqueue_style( 'nendebcom_wp_embed_template', includes_url( 'css/wp-embed-template.min.css' ) );

		//embed share dialog
		wp_enqueue_script( 'nendebcom_wp_embed_template', includes_url( 'js/wp-embed-template.min.js' ), array(), '', true );
	}
}
add_action( 'wp_enqueue_scripts', 'nendebcom_twentysixteen_embed_scripts' );

これで、とりあえず表示して動作すると思います。

embedボタン
※ボタンが表示されました。

embedダイヤログ
※ボタンをクリックするとダイヤログが表示されます。

embedダイヤログ
※「WordPressへの埋め込み」「HTMLでの埋め込み」の２種類あります。

　

スポンサードリンク


　

デザイン・レイアウト(CSS)の変更

とりあえず表示して動作するようになりましたがボタンの位置とかダイヤログの場所とか色とか変更したくなってきますよね。
もしかしたらテーマによっては botton部分のCSSが被ってしまって、へんてこなシェアアイコンになっているかもしれません。

今回使ったCSSは WordPressのコアに入っている Embed用の「wp-includes/css/wp-embed-template.css」です。

内容を変更したい場合は以下の方法があると思いますが、いろいろやってみてください
① テーマの style.css に補正する CSSコードを追記する。
② wp-embed-template.css の内容をそのまま丸ごと テーマの style.css に追記(コピペ)してから その内容を変更する。

※②wp-embed-template.css の内容をそのまま丸ごと style.css に追記(コピペ)する場合は、上記コードの

wp_enqueue_style( 'nendebcom_wp_embed_template', includes_url( 'css/wp-embed-template.min.css' ) );

はコメントアウトしてください。

　
　

おまけ

この機能はテーマにつけたらいいのか、プラグインの方がいいのか悩むところですがテーマだと好きな位置につけれるからいいかもしれません。
また今後この機能がついたプラグインもでてくるかもしれません。→さっそくつけてみました。

　
　

参考

WordPress 4.4 をチェックしています － Term Metadataに気をつけて・・
http://nendeb.com/303

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

WordPress4.4 新テーマ Twenty Sixteen をチェックしています
http://nendeb.com/286

WordPress Codex日本語版　関数リファレンス/is singular
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_singular

WordPress Code Reference print_embed_sharing_button
https://developer.wordpress.org/reference/functions/print_embed_sharing_button/

WordPress Code Reference print_embed_sharing_dialog
https://developer.wordpress.org/reference/functions/print_embed_sharing_dialog/

WordPress Codex　Plugin API/Action Reference/wp enqueue scripts
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

WordPress日本語Codex 関数リファレンス/wp enqueue script
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

WordPress日本語Codex 関数リファレンス/wp enqueue style
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style




スポンサードリンク