最近の投稿画像ウィジェット

WordPressで最近の投稿画像をサイドバーに表示するシンプルなウィジェットとかプラグインはないかなあと調べてたのですが、あったけど動かなかったり、意外に無い?ので作ってみました。
このブログのサイドバーの下のほうに設置しています。

設置方法
1. 下記のコードをfunction.phpの末尾に追加
2. 「最近の投稿画像」というウィジェットが追加されるのでサイドバーに設置
3. 設定の「タイトル」と「表示する画像数」を入力して保存

これで、最近の投稿で使用した画像がサイドバーにタイル状に表示されます。

画像をクリックした時に、lightboxで表示できるように、画像のaタグにはrel=”lightbox[wg]“としています。
CSSをTwentyTwelve用にベタ書きしているので、適宜変更してください。

/**
 * 最近の投稿画像ウィジェット
 */
class MyWidgetItem extends WP_Widget {
	function MyWidgetItem() {
    	parent::WP_Widget(false, $name = '最近の投稿画像');
    }
    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters( 'widget_title', $instance['title'] );
        $row_count = apply_filters( 'widget_amount', $instance['row_count'] );

	global $wpdb; // globalキーワードを使うことで$wpdbクラスを利用できる
	global $wp_query;


	// 画像を読み込む
	$sql = <<< HERE
	SELECT a.* FROM $wpdb->posts a, $wpdb->posts p
	WHERE a.post_parent = p.ID
	AND a.post_mime_type LIKE 'image/%'
	AND a.post_type = 'attachment'
	AND p.post_status = 'publish'
	ORDER BY a.post_date DESC
	LIMIT $row_count
HERE;
	$attachments = $wpdb->get_results($sql);
?>

	<style type='text/css'>
		#gallery-widget {
			margin: auto;
		}
		#gallery-widget .gallery-item {
			float: left;
			margin-top: 10px;
			text-align: center;
			width: 33%;
		}
		#gallery-widget img {
			border: 2px solid #cfcfcf;
		}
		#gallery-widget .gallery-caption {
			margin-left: 0;
		}
	</style>

	<!-- see gallery_shortcode() in wp-includes/media.php -->
	<aside id="mywidgetitem" class="widget widget_mywidgetitem"><h3 class="widget-title"><?php if ( $title ) {echo $before_title . $title . $after_title;} ?></h3>
		<div id='gallery-widget' class='gallery gallery-columns-3 gallery-size-thumbnail'>

			<?php
			$ctr = 0;
			// 画像を順に出力する
			foreach ($attachments as $attachment) :
				// 画像の貼り付け先投稿のタイトルとアドレスを得る
				$post = get_post($attachment->post_parent);
				setup_postdata($post);
				$attached_title = get_the_title($post->ID);
				$attached_url = get_permalink($post->ID);

				// 画像のアドレス/概要/タイトルを得る
				$post = $attachment;
				setup_postdata($post);
			        
				$url = wp_get_attachment_url($post->ID);
				$image = wp_get_attachment_image($post->ID);

				$alt = $post->post_content;
				$title = $post->post_excerpt;

				$ctr++;

			?>


			<dl class='gallery-item'><dt class='gallery-icon'>
				<a href='<?php echo $url; ?>' title='<?php echo $title ?>' rel="lightbox[wg]"><?php echo $image; ?></a>
			</dt></dl>

			<?php if (($ctr%3)==0): ?>
				<br style='clear: both;' />
			<?php endif; ?>

			<?php endforeach; ?>

			<br style='clear: both;' />
		</div>
	</aside>

	<?php
    }
    function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['row_count'] = strip_tags($new_instance['row_count']);
        return $instance;
    }
    function form($instance) {
        $title = esc_attr($instance['title']);
        $row_count = esc_attr($instance['row_count']);
        ?>
        <p>
          <label for="<?php echo $this->get_field_id('title'); ?>">
          <?php _e('タイトル:'); ?>
          </label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
           <label for="<?php echo $this->get_field_id('row_count'); ?>">
           <?php _e('表示する画像数:'); ?>
           </label>
           <input size="3" id="<?php echo $this->get_field_id('row_count'); ?>" name="<?php echo $this->get_field_name('row_count'); ?>" type="text" value="<?php echo $row_count; ?>" />
        </p>
        <?php
    }
}
add_action('widgets_init', create_function('', 'return register_widget("MyWidgetItem");'));

Tagged on:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>