【WordPress】カレンダーウィジェットの使い方とカスタマイズ方法【コードあり】

WordPressでは、月別カレンダーを簡単に表示できるカレンダーウィジェットを使うことができます。

本記事では、カレンダーウィジェットの使い方とカスタマイズ方法について解説していきます。

【WordPress】カレンダーウィジェットの使い方

1.WordPressの管理画面にログインして、「外観 → ウィジェット」に移動

2.「カレンダー」を選択して、設置したいウィジェットエリアを選択

これで完了です。 pic.twitter.com/CrtiNYpbcQ

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) December 28, 2022

サイトにカレンダーを設置したいけど、やり方がわからない・・・

カレンダーウィジェットをカスタマイズしたいけど、やり方がわからない

という方は、本記事が参考になるはずです。

【WordPress】カレンダーウィジェットの使い方とカスタマイズ方法【コードあり】

カレンダーウィジェットの使い方

まずは、カレンダーウィジェットの使い方です。

具体的な手順は、以下の通り。

1. ウィジェットを設置する
2. ウィジェットにタイトルをつける

順番に解説していきます。

ウィジェットを設置する

まずは、WordPressの管理画面にログインして、「外観 → ウィジェット」に移動します。

カレンダーウィジェットを選択して、表示したいウィジェットエリアに設置します。

ウィジェットにタイトルをつける

ウィジェットにタイトルをつけられます。以下の例では、「CALENDAR」というタイトルをつけています。

カレンダーウィジェットをカスタマイズする

カレンダーウィジェットのソースコードは、下記のディレクトリに入っています。

ドメイン/wp-includes/widgets/class-wp-widget-calendar.php

この「class-wp-widget-calendar.php」を編集することで、カレンダーウィジェットをカスタマイズすることができます。

class-wp-widget-calendar.phpの全コードは、下記のとおり。

<?php
/**
 * Widget API: WP_Widget_Calendar class
 *
 * @package WordPress
 * @subpackage Widgets
 * @since 4.4.0
 */

/**
 * Core class used to implement the Calendar widget.
 *
 * @since 2.8.0
 *
 * @see WP_Widget
 */
class WP_Widget_Calendar extends WP_Widget {
	/**
	 * Ensure that the ID attribute only appears in the markup once
	 *
	 * @since 4.4.0
	 * @var int
	 */
	private static $instance = 0;

	/**
	 * Sets up a new Calendar widget instance.
	 *
	 * @since 2.8.0
	 */
	public function __construct() {
		$widget_ops = array(
			'classname'                   => 'widget_calendar',
			'description'                 => __( 'A calendar of your site’s posts.' ),
			'customize_selective_refresh' => true,
			'show_instance_in_rest'       => true,
		);
		parent::__construct( 'calendar', __( 'Calendar' ), $widget_ops );
	}

	/**
	 * Outputs the content for the current Calendar widget instance.
	 *
	 * @since 2.8.0
	 *
	 * @param array $args     Display arguments including 'before_title', 'after_title',
	 *                        'before_widget', and 'after_widget'.
	 * @param array $instance The settings for the particular instance of the widget.
	 */
	public function widget( $args, $instance ) {
		$title = ! empty( $instance['title'] ) ? $instance['title'] : '';

		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

		echo $args['before_widget'];
		if ( $title ) {
			echo $args['before_title'] . $title . $args['after_title'];
		}
		if ( 0 === self::$instance ) {
			echo '<div id="calendar_wrap" class="calendar_wrap">';
		} else {
			echo '<div class="calendar_wrap">';
		}
		get_calendar();
		echo '</div>';
		echo $args['after_widget'];

		self::$instance++;
	}

	/**
	 * Handles updating settings for the current Calendar widget instance.
	 *
	 * @since 2.8.0
	 *
	 * @param array $new_instance New settings for this instance as input by the user via
	 *                            WP_Widget::form().
	 * @param array $old_instance Old settings for this instance.
	 * @return array Updated settings to save.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance          = $old_instance;
		$instance['title'] = sanitize_text_field( $new_instance['title'] );

		return $instance;
	}

	/**
	 * Outputs the settings form for the Calendar widget.
	 *
	 * @since 2.8.0
	 *
	 * @param array $instance Current settings.
	 */
	public function form( $instance ) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
		?>
		<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 esc_attr( $instance['title'] ); ?>" />
		</p>
		<?php
	}
}

ウィジェットの設定項目に入力ボックスを追加してみる

今回は、カレンダーウィジェットの設定項目に、新しい入力ボックスを追加してみようと思います。

デフォルトでは、カレンダーウィジェットの設定項目は「タイトル」のみになっています。

class-wp-widget-calendar.phpに、下記のようにコードを追加します。

<?php
~
//省略
~

public function form( $instance ) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
		?>
		<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 esc_attr( $instance['title'] ); ?>" />

			//コード追加ここから

			<label for="aaa">新しい入力ボックス</label>
			<input class="widefat" id="aaa" name="aaa" type="text" value="" />

			//コード追加ここまで

		</p>
		<?php
	}
}

新しい入力ボックスが追加されているのがわかると思います。

以上になります。本記事を参考にして、カレンダーウィジェットを活用してみてください。