記事

「最近の投稿」ウィジェットをカスタマイズ #WordPress

  • このエントリーをはてなブックマークに追加

久しぶりの更新。今回はWordPressのデフォルトウィジェット「最近の投稿」のカスタマイズ方法について。

デフォルトだと最近の投稿ウィジェットは以下のように出力されます。

<ul>
	<li><a href="#" title="Post 2">Post 2</a></li>
	<li><a href="#" title="Post 1">Post 1</a></li>
</ul>

Twitter Bootstrapなんかを使いたい場合、以下のように出力してもらいたいところ。

<ul class="nav nav-list">
	<li><a href="#" title="Post 2">Post 2</a></li>
	<li><a href="#" title="Post 1">Post 1</a></li>
</ul>

で、このulタグにclassを追加できないかと調べたところ、以下の記事を発見。

なるほど。デフォルトのテンプレートは/wp-include/default-widgets.phpに書かれているらしい。
ひとつめの記事「ウィジェット(widget)内のソースコードをカスタマイズする方法」では、コアファイルそのものをいじってしまうカスタマイズ。でもこれだとWordPressがバージョンアップした時に上書きされてしまう可能性もあるし、できればコアファイルは触りたくないなー。ってことで、参考にさせていただいたのが3つ目の「WordPress デフォルトウィジェットを改造」という記事。こちらはWP_Nav_Menu_Widgetをカスタマイズしていますが、今回は「最近の投稿」をカスタマイズしたいので、WP_Widget_Recent_Postsをカスタマイズ。

とりあえずfunctions.phpwp-include/default-widgets.phpの532行目から614行目のソースをごっそりコピペ。

class WP_Widget_Recent_Posts extends WP_Widget {

	function __construct() {
		$widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "The most recent posts on your site") );
		parent::__construct('recent-posts', __('Recent Posts'), $widget_ops);
		$this->alt_option_name = 'widget_recent_entries';

		add_action( 'save_post', array(&$this, 'flush_widget_cache') );
		add_action( 'deleted_post', array(&$this, 'flush_widget_cache') );
		add_action( 'switch_theme', array(&$this, 'flush_widget_cache') );
	}

	function widget($args, $instance) {
		$cache = wp_cache_get('widget_recent_posts', 'widget');

		if ( !is_array($cache) )
			$cache = array();

		if ( ! isset( $args['widget_id'] ) )
			$args['widget_id'] = $this->id;

		if ( isset( $cache[ $args['widget_id'] ] ) ) {
			echo $cache[ $args['widget_id'] ];
			return;
		}

		ob_start();
		extract($args);

		$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);
		if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
 			$number = 10;

		$r = new WP_Query( apply_filters( 'widget_posts_args', array( 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true ) ) );
		if ($r->have_posts()) :
?>
		<?php echo $before_widget; ?>
		<?php if ( $title ) echo $before_title . $title . $after_title; ?>
		<ul>
		<?php  while ($r->have_posts()) : $r->the_post(); ?>
		<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
		<?php endwhile; ?>
		</ul>
		<?php echo $after_widget; ?>
<?php
		// Reset the global $the_post as this query will have stomped on it
		wp_reset_postdata();

		endif;

		$cache[$args['widget_id']] = ob_get_flush();
		wp_cache_set('widget_recent_posts', $cache, 'widget');
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['number'] = (int) $new_instance['number'];
		$this->flush_widget_cache();

		$alloptions = wp_cache_get( 'alloptions', 'options' );
		if ( isset($alloptions['widget_recent_entries']) )
			delete_option('widget_recent_entries');

		return $instance;
	}

	function flush_widget_cache() {
		wp_cache_delete('widget_recent_posts', 'widget');
	}

	function form( $instance ) {
		$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
		$number = isset($instance['number']) ? absint($instance['number']) : 5;
?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></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('number'); ?>"><?php _e('Number of posts to show:'); ?></label>
		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<?php
	}
}

そして、今回はウィジェットの出力部分だけをカスタマイズしたいので、

function widget() {
}

以外の部分は削除。


class WP_Widget_Recent_Posts extends WP_Widget {

	function widget($args, $instance) {
		$cache = wp_cache_get('widget_recent_posts', 'widget');

		if ( !is_array($cache) )
			$cache = array();

		if ( ! isset( $args['widget_id'] ) )
			$args['widget_id'] = $this->id;

		if ( isset( $cache[ $args['widget_id'] ] ) ) {
			echo $cache[ $args['widget_id'] ];
			return;
		}

		ob_start();
		extract($args);

		$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);
		if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
 			$number = 10;

		$r = new WP_Query( apply_filters( 'widget_posts_args', array( 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true ) ) );
		if ($r->have_posts()) :
?>
		<?php echo $before_widget; ?>
		<?php if ( $title ) echo $before_title . $title . $after_title; ?>
		<ul>
		<?php  while ($r->have_posts()) : $r->the_post(); ?>
		<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
		<?php endwhile; ?>
		</ul>
		<?php echo $after_widget; ?>
<?php
		// Reset the global $the_post as this query will have stomped on it
		wp_reset_postdata();

		endif;

		$cache[$args['widget_id']] = ob_get_flush();
		wp_cache_set('widget_recent_posts', $cache, 'widget');
	}
}

このままだと「Fatal error: Cannot redeclare class WP_Widget_Recent_Posts in /path/to/template/functions.php on line xxx」というエラーが出てしまいますので、

class WP_Widget_Recent_Posts extends WP_Widget

class My_WP_Widget_Recent_Posts extends WP_Widget_Recent_Posts

に書き換えます。

そして肝心のウィジェットの出力部分。

		<?php echo $before_widget; ?>
		<?php if ( $title ) echo $before_title . $title . $after_title; ?>
		<ul>
		<?php  while ($r->have_posts()) : $r->the_post(); ?>
		<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
		<?php endwhile; ?>
		</ul>
		<?php echo $after_widget; ?>

		<?php echo $before_widget; ?>
		<?php if ( $title ) echo $before_title . $title . $after_title; ?>
		<ul class="nav nav-list">
		<?php  while ($r->have_posts()) : $r->the_post(); ?>
		<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
		<?php endwhile; ?>
		</ul>
		<?php echo $after_widget; ?>

に書き換えます。

そしてfunctions.php内でウィジェットを呼び出します。

function wp_my_widget_register() {
	register_widget('My_WP_Widget_Recent_Posts');
}
add_action('widgets_init', 'wp_my_widget_register');

以上で完了です。

なお、管理画面で「最近の投稿」という文言を変更しようとして、

function __construct() {
		$widget_ops = array('classname' => 'widget_recent_entries', 'description' => 'オリジナルの「最近の投稿」です。' );
		parent::__construct('recent-posts', __('My Recent Posts'), $widget_ops);
}

みたいな感じで値を与えても反映されません。
これはclass WP_Widget_Recent_Postsの__construct()が引数を取らないためです。
ご注意を。

  • このエントリーをはてなブックマークに追加
2012年10月
« 7月   12月 »
1234567
891011121314
15161718192021
22232425262728
293031  

フォトライブラリー

コメントを残す

%d人のブロガーが「いいね」をつけました。