【WordPress】ページ送りで記事を分割する方法（スマホだけ分割）

分割するほど記事が長くなることは多分ないと思うんですけど、一応、分割できるようにしました。
PCでは記事が長くなっても別によいかなと思うんですが、沢山画像を使ってたりするので、スマホでは記事が長いとページが重くなっちゃいそうですし、スマホの時のみ分割できるようにしました。
今回はその方法をメモしていきます。

記事を分割する方法

single.php内で下記のコードを記述します。
「<?php the_content(); ?>」の下に設置しました。

<?php
$num = array(
    'before' => '<div class="split-nav">',
    'after' => '</div>',
    'link_before' => '<span>',
    'link_after' => '</span>',
    'next_or_number' => 'number',
    'separator' => '',
    'pagelink' => '%',
    'echo' => 1
);
wp_link_pages($num);
?>

全体を<div class=”split-nav”> 〜 </div>で囲って、「1、２、３…」のリンクを<span> 〜 </span>で囲うようにしてます。

「wp_link_pages」の使い方は下記のサイトで詳しく書かれています。

テンプレートタグ/wp link pages – WordPress Codex 日本語版

投稿の編集内のエディタで、分割したい位置で

<!--nextpage-->

と書くと、その位置で記事が分割されるようになります。
「AddQuickTag」プラグインで分割用のタグを登録しとくと良さそうです。

AddQuicktag — WordPress Plugins

「TinyMCE Advanced」プラグインを使っていたら、「改ページ挿入」ボタン（Split Page）が追加できるようです。

TinyMCE Advanced — WordPress Plugins

CSSでカスタマイズ

当ブログではCSSは下記のようにしました。

.split-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.split-nav span,
.split-nav a {
  display: block;
}

.split-nav span {
  height: 32px;
  margin: 0 4px;
  padding: 0 12px;
  line-height: 32px;
  font-weight: bold;
  color: #FFFFFF;
  background: #4A3C37;
}

.split-nav a {
  text-decoration: none;
}

.split-nav a span {
  font-weight: normal;
  color: #4A3C37;
  background: #f2f2f2;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.split-nav a:hover span {
  color: #FFFFFF;
  background: #4A3C37;
}

スマホのみ分割されるようにする

上記の方法までは、PCやスマホ全てで記事が分割されるので、それをスマホのみ有効にします。
下記のコードを「functions.php」内に書きます。

function no_pageing_hook( $post ) {
    global $pages, $multipage, $numpages;
    if ( ! wp_is_mobile() ) {
        $multipage = 0;
        $content = str_replace("\n<!--nextpage-->\n", '<!--nextpage-->', $post->post_content);
        $content = str_replace("\n<!--nextpage-->", '<!--nextpage-->', $content);
        $content = str_replace("<!--nextpage-->\n", '<!--nextpage-->', $content);
        $pages = array( str_replace('<!--nextpage-->', '', $content) );
        $numpages = 1;
    }
}
add_action( 'the_post', 'no_pageing_hook' );

試しにこの記事で無駄に分割してみます。
スマホで見るとここで分割されてます。

おわり

スマホだとここは2ページ目です。

このブログではこの機能を使うことはあまりなさそうですけど、分割したい時は「<!–nextpage–>」と書くだけですし、一応備えとけば良いかな、と。
では、以上です。