【WordPress】meta sliderの管理画面を利用して、独自で画面に写真ギャラリーを配置する

hoge

前にも記事を書いたなあ。
今回は写真ギャラリーとして使用。
例によって、管理画面だけはmeta-sliderを利用。
HTMLでのjqueryのライブラリの読み込みなんかも自分で記述しちゃえば尚グッド。

ショートコード化してあるので、固定ページとかからはこんな感じで呼び出せます。

◆固定ページ

[gallery_img metaslider_id="117"] // meta-sliderのIDを指定

◆functions.php

// 【写真ギャラリーページ】meta-sliderの設定画像一覧を取得する
function slider_img($atts) {

	extract(shortcode_atts(array(
		'metaslider_id' => '',
	), $atts));

	$metaslider_id = $metaslider_id;

	$str_html = "";
	$term_id = "";
	$taxonomy_id = "";

	global $wpdb;
	// SQL
	$sql = $wpdb->prepare("SELECT wp_term_taxonomy.term_id FROM wp_term_taxonomy INNER JOIN wp_terms USING (term_id) WHERE taxonomy = 'ml-slider' AND wp_terms.slug IN ('".$metaslider_id."')");
	$rows = $wpdb->get_results($sql);
	foreach ($rows as $row) {
		$term_id = $row->term_id;
	}

	$sql = $wpdb->prepare("SELECT term_taxonomy_id FROM wp_term_taxonomy WHERE taxonomy = 'ml-slider' AND term_id IN (".$term_id.")");
	$rows = $wpdb->get_results($sql);
	foreach ($rows as $row) {
		$taxonomy_id = $row->term_taxonomy_id;
	}

	$sql = $wpdb->prepare("SELECT wp_posts.id, wp_posts.guid FROM wp_posts INNER JOIN wp_term_relationships ON (wp_posts.ID = wp_term_relationships.object_id) LEFT JOIN wp_posts AS p2 ON (wp_posts.post_parent = p2.ID) WHERE 1=1 AND ( wp_term_relationships.term_taxonomy_id IN (".$taxonomy_id.") ) AND wp_posts.post_type = 'attachment' AND (((wp_posts.post_status = 'inherit') OR (wp_posts.post_status = 'inherit' AND (p2.post_status = 'inherit')))) GROUP BY wp_posts.ID ORDER BY wp_posts.menu_order ASC");
	$rows = $wpdb->get_results($sql);
	foreach ($rows as $row) {

		// 表示画像をフルサイズに設定
		$full_image = wp_get_attachment_image_src( $row->id, 'full'  );
		$full_img = $full_image[0];

		$str_html .= "<a rel='lightbox' href='".$full_img."' class='gallery-elem' title='画像タイトル' ><figure style='background-image:url(".$full_img.");'></figure><figcaption><p>画像タイトル</p></figcaption></a>";
	}

	echo ($str_html);
	return $str_html;
}
add_shortcode('gallery_img', 'slider_img'); // 使用例：[gallery_img metaslider_id="117"]

◆lazy loadを一緒に使うのなら、$str_htmlの部分をこんな風にすると便利。

		// lazy load用に、classにlazyの指定と、data-original属性を追加している。
		$str_html .= "<a data-lightbox='roadtrip' href='".$full_img."' class='gallery-elem' data-title='".$description."' ><figure class='lazy' data-original='".$full_img."' style='background-image:url(".get_template_directory_uri()."/img/page/grey.png);'></figure>".$figcaption."</a>";

	<!-- // lazy load -->
	<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ) {
			$("#a.gallery-elem figure.lazy").lazyload({
				effect : "fadeIn"
			});
		});
	</script>