👻

WordPress標準の記事分割のページネーションのボタンを変える方法

2023/09/18に公開

CSS

今、WordPressのカスタマイズを行う仕事をしていますが、自分の備忘録の意味も込めて、WordPressの標準の記事分割機能をオリジナルのボタンで実装する方法を書きます。

WordPressには、長い記事を分割して表示でいる機能が、標準で搭載されています。

<!--nextpage-->

このコードを予めWordの改ページの記号を挿入する感覚で、記事にHTMLを編集する画面で挿入します。
ビジュアルのモードで挿入すると、コードが変わってしまいます。

このコードを使う解説の記事を見つけました。

今回は、こちらの記事にあるコードで実装した場合に、ナビゲーションのボタンをカスタマイズして、「前」、「次」のようなボタンで操作するためのコードをご紹介します。

投稿記事を表示するsingle.phpなどに挿入するコードです。

    <!--   本文分割表示      -->

<?php the_content(); ?>


</div>

           <!-- ナビゲーションボタン  -->          
<?php
global $page, $numpages, $multipage;

// 現在のURLを取得
$current_url = get_permalink();

if (strpos($current_url, '?') !== false) {
    // 基本的なパーマリンク設定の場合
    $base_url = rtrim($current_url, '/');
    $prev = ($page > 1) ? $base_url . '&page=' . ($page - 1) : null;
    $next = ($page < $numpages) ? $base_url . '&page=' . ($page + 1) : null;
} else {
    // カスタムパーマリンク設定の場合
    $base_url = rtrim($current_url, '/') . '/';
    $prev = ($page > 1) ? $base_url . ($page - 1) . '/' : null;
    $next = ($page < $numpages) ? $base_url . ($page + 1) . '/' : null;
}
?>

<?php if ($multipage): ?>
	<div class="split-nav">
		<div>
			<?php if ($prev): ?>
				<a href="<?php echo $prev; ?>">前</a>
			<?php else: ?>
				<div class="disabled">前</div>
			<?php endif; ?>
		</div>

		<div>
			<?php if ($next): ?>
				<a href="<?php echo $next; ?>">次</a>
			<?php else: ?>
				<div class="disabled">次</div>
			<?php endif; ?>
		</div>
	</div>
<?php endif; ?>

子テーマのfunctions.phpに掲載するコード

function no_pageing_hook( $post ) {
    global $pages, $multipage, $numpages;

    // モバイルデバイスでない場合のみページ分割を無効化
    if ( ! wp_is_mobile() ) {
        $multipage = 0;
        
        // <!--nextpage--> タグの前後の改行を削除
        $content = str_replace(array("\n<!--nextpage-->\n", "\n<!--nextpage-->", "<!--nextpage-->\n"), '<!--nextpage-->', $post->post_content);
        
        // <!--nextpage--> タグを全て削除
        $pages = array( str_replace('<!--nextpage-->', '', $content) );
        $numpages = 1;
    }
}
add_action( 'the_post', 'no_pageing_hook' );

CSSのコード

子テーマのsyle.cssなどに書いて下さい。

/* 指定のコードでスマホのみ分割　*/
.split-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-nav div,
.split-nav a {
  	display: block;
  	width: 50%; 
	font-size: 16px; 
	text-align: center;
	margin-left:auto;
	margin-right:auto;
}

.split-nav div {
  	height: 60px;
  	margin: 0;
  	padding: 0;
  	line-height: 60px; 
  	font-weight: bold;
 	 color: #FFFFFF;
 	 background: #e9e9e9;

}

.split-nav a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: blue;
  background: #e9e9e9;
  transition: 0.4s;
}

.split-nav a:hover {
  color: #FFFFFF;
}

/* 非アクティブなボタンのスタイル */
.split-nav .disabled {
	width:100%;	
  	pointer-events: none; /* クリック不可能にする */
  	background: #b0b0b0;
  	color: #000000; /* リンクがないときの文字色を黒に */
}

今回特に要素が無く非アクティブなボタンのCSSを勉強しましたので、私自身忘れないように書きました。
このcssの書き方は、応用が利くと思います。
wordPressは、必要ないボタンは、表示されません。
でも一般的なボタンのように常に表示したいニーズも、あると思います。
そうしたときに、このcssの書き方は、役立つと思います。

子テーマのfunctions.phpに掲載するコード

CSSのコード

Discussion