シュウ

今回はWP-PageNavi アンカーリンクの設定について
の解説になります！

こんな方に読んでほしい

• WordPressを学び始めた方へ
• WordPressのページナビゲーションについて解説していきます。
• 今回はWordPressの「WP-PageNavi アンカーリンクの設定」について解説しております。

WP-PageNaviとは

「WP-PageNavi」　は、WordPressのプラグインになります。
WP-PageNaviとは、1ページ、2ページ目とナビゲーションの役割をしてくれます。
例として、記事の件数が合計10件あり、1ページ目に5件表示し、残り5件は2ページ目に表示させるため、
ナビゲーションを表示してくれます。

このプラグインを紹介する理由は3つあります。

以上の理由が上げられます、CSSで自由にデザインの変更ができるので、オススメします。
公式サイトは以下になります。

• 公式サイト
• プラグイン導入方法

こちらの方で「WP-PageNavi」の詳しい設定については解説しております。

WP-PageNaviの設定について解説

【WordPress】WP-PageNaviの設定について解説

1ページ、2ページ目とナビゲーションの役割をしてくれます。

アンカーリンクの設定 JS編

最初に、アンカーリンクの設定が必要な理由があります。
1ページ目から2ページ目に遷移した際には問題ありませんが、2ページ目から1ページ目に遷移した際にはページの最上部の状態で遷移してしまいます。

上記のような問題が起きた場合はJSで解決します。
コードは以下のようになります。

<ul id="xxxx">
	<?php
		$args = array(
		'post_type' => 'post',
		'paged' => $paged, // 表示するページ数
		'posts_per_page' => 5,
	); ?>
	<?php $wp_query = new WP_Query( $args ); ?>
	<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
	<li>
		<?php the_category(); ?>
		<h2>タイトルが入ります</h2>
		<p>本文が入ります。</p>
		<!--以下省略-->
	</li>
	<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>
	<?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?>
</ul>

<script type="text/javascript">
$(document).ready(function() {
    $('.wp-pagenavi a').each(function(i,a){$(a).attr('href',$(a).attr('href')+'#xxxx')});
});
</script>

phpファイルでは、ul id="xxxx"を指定し、JSでは、attr('href')+'#xxxx'の指定をしてください。

アンカーリンクの設定 ファイル編

次にファイルを直接変更することで、アンカーリンクの設定が可能になります。
階層は「/wp-content/plugins/wp-pagenavi/core.php」になります。

272行目
変更前
$attr['href'] = $this->get_url( $page );

変更後
$attr['href'] = $this->get_url( $page ) . '#xxxx';

注意！
プラグインを更新した際にデータが上書きされる恐れがありますので注意が必要です。

基本は、JSで指定するのがおすすめです。

まとめ

今回はこれで以上です。

最新記事

• 

  【jQuery】セレクトボックスにアンカーを設定する方法

  2025.01.18

• 

  【WordPress】投稿画面のタグをチェックボックスにする方法を解説

  2025.01.13

• 

  【CSS】文字の縁取りについて解説！

  2025.01.11

• 

  【WordPress】MW WP Form エラーメッセージのカスタマイズについて

  2025.01.11

関連記事

< 前の記事

【WordPress】Table of Contents Plusのスクロールについてを解説

次の記事 >

【WordPress】MW WP Form エラーメッセージのカスタマイズについて