フォルダ
[WordPress]最近の投稿ウィジェットで出力されるHTMLタグをカスタマイズ
- 公開日：2015/4/1
この記事は最終更新日から9年以上が経過しています。
「最近の投稿」ウィジェットが出力するHTMLタグはこんな感じです。
<ul>
<li><a href="(記事3のURL)" title="記事3のタイトル">記事3のタイトル</a></li>
<li><a href="(記事2のURL)" title="記事2のタイトル">記事2のタイトル</a></li>
<li><a href="(記事1のURL)" title="記事1のタイトル">記事1のタイトル</a></li>
</ul>
実にシンプルです。
ウィジェットの出力でHTMLを自由に設定できるのでデザインのカスタマイズには困りませんが、例えば、Twitter Bootstraps 3 を適用したいとなったらどうでしょうか？
そんな場合は、以下のように、ulタグにclassを追加したいので、出力されるHTMLタグをカスタマイズしたいと思います。
<ul class="nav nav-pills nav-stacked">
<li><a href="(記事3のURL)" title="記事3のタイトル">記事3のタイトル</a></li>
<li><a href="(記事2のURL)" title="記事2のタイトル">記事2のタイトル</a></li>
<li><a href="(記事1のURL)" title="記事1のタイトル">記事1のタイトル</a></li>
</ul>
最近の投稿ウィジェット出力するHTMLタグをカスタマイズ
では、さっそくカスタマイズしていきましょう。
手順です。
- STEP1: デフォルトのテンプレートの記述をfunctions.phpにコピー
- STEP2: ウィジェットの出力部分をカスタマイズ
- STEP3: functions.php内でウィジェットを呼び出す
デフォルトのテンプレートの記述をfunctions.phpにコピー
デフォルトのテンプレートは wp-include/default-widgets.php です。
「WP_Widget_Recent_Posts」クラスを functions.php に、とりあえずそのままごっそりコピーします。
/**
* Recent_Posts widget class
*
* @since 2.8.0
*/
class WP_Widget_Recent_Posts extends WP_Widget {
public function __construct() {
$widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "Your site’s most recent Posts.") );
parent::__construct('recent-posts', __('Recent Posts'), $widget_ops);
/* 〜〜〜〜〜〜〜〜〜(省略)〜〜〜〜〜〜〜〜〜 */
<p><input class="checkbox" type="checkbox" <?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
<?php
}
}
結構、長いです。130行くらいありました。
簡単に、構造を見てみると・・・
class WP_Widget_Recent_Posts extends WP_Widget {
public function __construct() {
}
public function widget($args, $instance) {
}
public function update( $new_instance, $old_instance ) {
}
public function flush_widget_cache() {
}
public function form( $instance ) {
}
}
今回カスタマイズしたいHTMLタグの出力は、
public function widget($args, $instance) {
/* 〜〜〜(省略)〜〜〜 */
}
に記述があるので、それ以外は削除します。
ウィジェットの出力部分をカスタマイズ
出力部分を自由にカスタマイズしましょう。
今回は、Twitter Bootstraps 3 を使うためにulタグにclassを追加します。
/**
* Recent_Posts widget class
*
* @since 2.8.0
*/
class WP_Widget_Recent_Posts extends WP_Widget {
public function widget($args, $instance) {
$cache = array();
if ( ! $this->is_preview() ) {
$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();
$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
/** This filter is documented in wp-includes/default-widgets.php */
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
if ( ! $number )
$number = 5;
$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
/**
* Filter the arguments for the Recent Posts widget.
*
* @since 3.4.0
*
* @see WP_Query::get_posts()
*
* @param array $args An array of arguments used to retrieve the recent posts.
*/
$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 $args['before_widget']; ?>
<?php if ( $title ) {
echo $args['before_title'] . $title . $args['after_title'];
} ?>
<ul class="nav nav-pills nav-stacked">
<?php while ( $r->have_posts() ) : $r->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
<?php if ( $show_date ) : ?>
<span class="post-date"><?php echo get_the_date(); ?></span>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php echo $args['after_widget']; ?>
<?php
// Reset the global $the_post as this query will have stomped on it
wp_reset_postdata();
endif;
if ( ! $this->is_preview() ) {
$cache[ $args['widget_id'] ] = ob_get_flush();
wp_cache_set( 'widget_recent_posts', $cache, 'widget' );
} else {
ob_end_flush();
}
}
}
functions.php内でウィジェットを呼び出す
このままだとエラーになってしまうので、クラス名をオリジナルに変え、継承元クラスを以下のように変更します。
class My_WP_Widget_Recent_Posts extends WP_Widget_Recent_Posts {
/* 〜〜〜(省略)〜〜〜 */
}
仕上げにfunctions.php内で呼び出すように以下を追記します。
function wp_my_widget_register() {
register_widget('My_WP_Widget_Recent_Posts');
}
add_action('widgets_init', 'wp_my_widget_register');
これで、出力HTMLタグを変更できました。