★GABAMAN★ブログ

技術的なメモ

【Wordpress】<!--nextpage-->記法の次のページへボタンをカスタム

で記事中ページ分割ができます。

【WordPress】投稿記事を複数ページに分割する「<!--nextpage-->記法」の使い方 - ONZE

まずデフォルトが番号になっていたので「次のページへ」「前のページへ」というボタンに変えたかった

f:id:nyanchu-01:20180119004722p:plain
この辺の記事が参考になった
記事の分割<!–nextpage–> での表示をカスタマイズ | Yoshihara.LaB

ただ、共通のfunctions.cssを書き換えたくはなかったので別の方法を探したところ直接コンテンツページに書けることがわかった。

sudo vim wp-content/themes/自分のテーマ/content.php

article-bodyの要素の一番下にこれを記述すると次へボタンが現れた。

<section class="article-body">

  <?php wp_link_pages( array(
                        'next_or_number' => 'next',
                        'before'         => '<div class="ex-next-page">',
                        'after'          => '</div>',
                        ) );
  ?>
</section>

f:id:nyanchu-01:20180119004747p:plain
あとでcssで調整するために ex-next-page というclasswをつけておく

「 次のページへ」というボタンは欲しいけど「前のページへ」というボタンが消したかった

wp-includes/post-template.php
これのprevをoutputしてるとこを消すのが一番簡単そう

                        $output .= $r['before'];
                        $prev = $page - 1;
                        if ( $prev > 0 ) {
                                $link = _wp_link_page( $prev ) . $r['link_before'] . $r['previouspagelink'] . $r['link_after'] . '</a>';

                                /** This filter is documented in wp-includes/post-template.php */
                        // 「前のページへ」を消したいのでコメントアウト
ココ!             //      $output .= apply_filters( 'wp_link_pages_link', $link, $prev );
                        }
                        $next = $page + 1;
                        if ( $next <= $numpages ) {
                                if ( $prev ) {
                                        $output .= $r['separator'];
                                }
                                $link = _wp_link_page( $next ) . $r['link_before'] . $r['nextpagelink'] . $r['link_after'] . '</a>';

                                /** This filter is documented in wp-includes/post-template.php */
                                $output .= apply_filters( 'wp_link_pages_link', $link, $next );
                        }
                        $output .= $r['after'];

f:id:nyanchu-01:20180119004838p:plain

あとはstyle.cssをいじってボタンにすれば完了