解説

指定されたYoutubeURLをサイト内インライン・フレームでポップアップ表示させる。
更新日:2017年2月9日

使用方法

「Post Snippets」に登録しておくことで、投稿画面から簡単に呼び出すことができるようになる。

[ins_popup_youtube_link yotube_url="{yotube_url}" image_url="{image_url}" title="{title}" class_name="{class_name}"]

パラメタ

yotube_url
Youtube URL
image_url
Image URL
class_name
適用されるクラス名称。
title
タイトル

コード(PHP)


下記コードを「function.php」に記載することで利用可能となる。


function popup_youtube_link_shortcode( $atts )
{
    $param =	shortcode_atts
		(
			array
			(
				'yotube_url' => '',
				'image_url' => '',
				'class_name' => '',
				'title' => ''
			),
			$atts
		);
	if( !wp_is_mobile() )
	{
		$result  = sprintf( '<a class="fancybox-iframe %s" href="%s" alt="%s">', $param['class_name'], $param['yotube_url'], $param['title'] );
		$result .= sprintf( '<img src="%s" alt="%s" />', $param['image_url'], $param['title'] );
	} else {
		$result  = sprintf( '<a class="%s" href="%s" alt="%s" target="_blank">', $param['class_name'], $param['yotube_url'], $param['title'] );
		$result .= sprintf( '<img src="%s" alt="%s" />', $param['image_url'], $param['title'] );
	}

	$result .= sprintf( '</a>' );

	return do_shortcode( $result );
}
add_shortcode( 'ins_popup_youtube_link', 'popup_youtube_link_shortcode' );

サンプル

上記画像をクリックすると、Youtube再生画面がポップアップ表示されます。
上記サンプル・コード

[ins_popup_youtube_link yotube_url="//www.youtube.com/embed/MRQwjAkyXsk" image_url="/wp-content/uploads/2017/02/no_image.jpg" title="TEST" class_name="sample_youtube_image"]
.sample_youtube_image

width: 50%;
display: block;

注意事項

重要 なし。

更新履歴

2016/11/12 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.