【WordPress】固定ページウィジェットの使い方とカスタマイズ方法【コード付き】

2021/03/04 2023/04/19

WordPressでは、公開済みの固定ページの一覧をリスト形式で表示できる固定ページウィジェットを使うことができます。

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

【WordPress】固定ページウィジェットの使い方

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

2.「固定ページ」を選択して、表示したいウィジェットエリアに設置する

3.保存をクリック

これで完了です👍 pic.twitter.com/v1rW595KFX

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) January 27, 2023

固定ページの一覧をサイトに表示したい

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

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

Contents

【WordPress】固定ページウィジェットの使い方とカスタマイズ方法【コード付き】
- 固定ページウィジェットの使い方
- 固定ページウィジェットのカスタマイズ方法

【WordPress】固定ページウィジェットの使い方とカスタマイズ方法【コード付き】

固定ページウィジェットの使い方

まずは、使い方です。

具体的な内容は、以下の通り。

ウィジェットを設置する
ウィジェットのタイトルを変更する
固定ページの表示順序を変更する
特定の固定ページを除外する

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

ウィジェットを設置する

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

固定ページウィジェットを選択して、表示したいウィジェットエリアに設置します。

ウィジェットのタイトルを変更する

デフォルトのタイトルは「固定ページ」ですが、好きな文字に変更できます。

固定ページの表示順序を変更する

表示されているリストの並び順を変更できます。

ページタイトル（デフォルト）
ページ順序
ページID

特定の固定ページを除外する

特定のページだけリストに表示しないように設定するには、まず表示したくない固定ページの投稿IDを調べる必要があります。

投稿IDを調べるには、ウィジェットに表示したくない固定ページの編集画面に移動し、そのページのURLを確認します。

上記の例では、URL内にpost=2と書かれているのがわかると思います。この2という数字が投稿IDになります。

投稿IDがわかったら、ウィジェットにIDを入力すればその固定ページはウィジェットに表示されなくなります。

固定ページウィジェットのカスタマイズ方法

固定ページウィジェットのソースコードは、下記のディレクトリに格納されています。

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

この「class-wp-widget-pages.php」を変更することで、ウィジェットをカスタマイズすることができます。

class-wp-widget-pages.phpの全コード

class-wp-widget-pages.phpの全コードは、下記の通り。

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

/**
 * Core class used to implement a Pages widget.
 *
 * @since 2.8.0
 *
 * @see WP_Widget
 */
class WP_Widget_Pages extends WP_Widget {

	/**
	 * Sets up a new Pages widget instance.
	 *
	 * @since 2.8.0
	 */
	public function __construct() {
		$widget_ops = array(
			'classname'                   => 'widget_pages',
			'description'                 => __( 'A list of your site&#8217;s Pages.' ),
			'customize_selective_refresh' => true,
			'show_instance_in_rest'       => true,
		);
		parent::__construct( 'pages', __( 'Pages' ), $widget_ops );
	}

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

		/**
		 * Filters the widget title.
		 *
		 * @since 2.6.0
		 *
		 * @param string $title    The widget title. Default 'Pages'.
		 * @param array  $instance Array of settings for the current widget.
		 * @param mixed  $id_base  The widget ID.
		 */
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

		$sortby  = empty( $instance['sortby'] ) ? 'menu_order' : $instance['sortby'];
		$exclude = empty( $instance['exclude'] ) ? '' : $instance['exclude'];

		if ( 'menu_order' === $sortby ) {
			$sortby = 'menu_order, post_title';
		}

		$output = wp_list_pages(
			/**
			 * Filters the arguments for the Pages widget.
			 *
			 * @since 2.8.0
			 * @since 4.9.0 Added the `$instance` parameter.
			 *
			 * @see wp_list_pages()
			 *
			 * @param array $args     An array of arguments to retrieve the pages list.
			 * @param array $instance Array of settings for the current widget.
			 */
			apply_filters(
				'widget_pages_args',
				array(
					'title_li'    => '',
					'echo'        => 0,
					'sort_column' => $sortby,
					'exclude'     => $exclude,
				),
				$instance
			)
		);

		if ( ! empty( $output ) ) {
			echo $args['before_widget'];
			if ( $title ) {
				echo $args['before_title'] . $title . $args['after_title'];
			}

			$format = current_theme_supports( 'html5', 'navigation-widgets' ) ? 'html5' : 'xhtml';

			/** This filter is documented in wp-includes/widgets/class-wp-nav-menu-widget.php */
			$format = apply_filters( 'navigation_widgets_format', $format );

			if ( 'html5' === $format ) {
				// The title may be filtered: Strip out HTML and make sure the aria-label is never empty.
				$title      = trim( strip_tags( $title ) );
				$aria_label = $title ? $title : $default_title;
				echo '<nav aria-label="' . esc_attr( $aria_label ) . '">';
			}
			?>

			<ul>
				<?php echo $output; ?>
			</ul>

			<?php
			if ( 'html5' === $format ) {
				echo '</nav>';
			}

			echo $args['after_widget'];
		}
	}

	/**
	 * Handles updating settings for the current Pages 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'] );
		if ( in_array( $new_instance['sortby'], array( 'post_title', 'menu_order', 'ID' ), true ) ) {
			$instance['sortby'] = $new_instance['sortby'];
		} else {
			$instance['sortby'] = 'menu_order';
		}

		$instance['exclude'] = sanitize_text_field( $new_instance['exclude'] );

		return $instance;
	}

	/**
	 * Outputs the settings form for the Pages widget.
	 *
	 * @since 2.8.0
	 *
	 * @param array $instance Current settings.
	 */
	public function form( $instance ) {
		// Defaults.
		$instance = wp_parse_args(
			(array) $instance,
			array(
				'sortby'  => 'post_title',
				'title'   => '',
				'exclude' => '',
			)
		);
		?>
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:' ); ?></label>
			<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" />
		</p>

		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'sortby' ) ); ?>"><?php _e( 'Sort by:' ); ?></label>
			<select name="<?php echo esc_attr( $this->get_field_name( 'sortby' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'sortby' ) ); ?>" class="widefat">
				<option value="post_title"<?php selected( $instance['sortby'], 'post_title' ); ?>><?php _e( 'Page title' ); ?></option>
				<option value="menu_order"<?php selected( $instance['sortby'], 'menu_order' ); ?>><?php _e( 'Page order' ); ?></option>
				<option value="ID"<?php selected( $instance['sortby'], 'ID' ); ?>><?php _e( 'Page ID' ); ?></option>
			</select>
		</p>

		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'exclude' ) ); ?>"><?php _e( 'Exclude:' ); ?></label>
			<input type="text" value="<?php echo esc_attr( $instance['exclude'] ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'exclude' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'exclude' ) ); ?>" class="widefat" />
			<br />
			<small><?php _e( 'Page IDs, separated by commas.' ); ?></small>
		</p>
		<?php
	}

}

カスタマイズ例：デフォルトの「タイトル」と「並び順」を変更してみる

今回は、カスタマイズの例として、デフォルトのタイトルと並び順を変更してみようと思います。

デフォルトでは、

タイトル：空欄
並び順：ページタイトル

となっています。

class-wp-widget-pages.phpのコードの一部を、下記のように変更します。

<?php

//省略

public function form( $instance ) {
	// Defaults.
	$instance = wp_parse_args(
		(array) $instance,
		array(

			//デフォルトの並び順を「menu_order」に変更
			'sortby'  => 'menu_order',
			//デフォルトのタイトルを変更
			'title'   => 'デフォルトのタイトル変更',

			'exclude' => '',
		)
	);
	
	//省略

	?>

WordPressの管理画面で、ページをリロード→ウィジェットを設置しなおすと、デフォルトのタイトルと並び順が変わっているはずです。