Simplicityの改ページを改善する

投稿タイトルあたりも変更
1. タイトルにページ表示する
2. タイトル下に簡単なナビゲーションを表示する
ページ分割はスタイル

投稿タイトルあたりも変更

ページ分割している記事でも、記事の下にあるナビゲーション表示が見えないと、何もわからないから

タイトルにページ表示する

タイトル表示に必要な情報はグローバル変数にあって

$multipage：ページ分割されているか
$page：現在のページ
$numpages：総ページ数

これがわかればタイトル表示は簡単

タイトル表示はentry-body.phpにある

    <?php if ( !is_single() ) echo '<a href="'.get_permalink().'">'; //投稿ページ以外ではタイトルにリンクを貼る?>
    <?php the_title(); //投稿のタイトル?>
    <?php if ( !is_single() ) echo '</a>'; //投稿ページ以外ではタイトルにリンクを貼る?>

Global変数を使うから関数を作り

function is_page_number( $title ){
  global $multipage, $page, $numpages;
  if( $multipage ){
    /* ページ分割のタイトル表示 */
    echo sprintf( '%s<span id="numpage-title">（%s/%s）</span>', $title, $page, $numpages );
  }
  else{
    /*  ページ分割がなければ普通のタイトル表示  */
    echo $title;
  }
}

タイトル表示のところで関数を呼び出せば

  <h1 class="entry-title">
    <?php is_page_number( the_title() );?>
  </h1>

タイトル下に簡単なナビゲーションを表示する

前後のページの有無とそのURLの所得などと、以外と簡単ではないからwp_link_pagesで得たコードを使えば簡単

前出の関数に追加

function is_page_number( $title ){
  global $multipage, $page, $numpages;
  if( $multipage ){
    /* ページ分割のタイトル表示 */
    echo sprintf( '%s<span id="numpage-title">（%s/%s）</span>', $title, $page, $numpages );
    /* タイトル下にシンプルなナビゲーションを表示する */
    $args = array(
      'before' => '',
      'after' => '',
      'next_or_number' => 'next',
      'previouspagelink' => '<i class="fa fa-hand-o-left"></i>',
      'nextpagelink' => '<i class="fa fa-hand-o-right"></i>',
      'echo' => 0
      );
    if( preg_match( '#(<a.*><i class="fa fa-hand-o-left"></i></a>)?\s*(<a.*><i class="fa fa-hand-o-right"></i></a>)?$#', wp_link_pages( $args ), $match ) ){
      echo '<div id="title-page-number"><span id="title-page-pre">' . $match[1] . '</span><span id="title-page-next">' . $match[2] . '</span></div>';
    }
  }
  else{
    /*  ページ分割がなければ普通のタイトル表示  */
    echo $title;
  }
}

記事を最初から読む時には必要ないのナビゲーションだろうから、控えめに

style.cssに追加

/*******************************
  分割ページのタイトル表示
*/
.article #title-page-number{
  font-size: 18px;
  line-height: 80%;
  padding: 8px 8px 0 0;
}

.article #title-page-number i.fa{
  height: 1.2em;
  width: 1.2em;
}

.article #title-page-number #title-page-pre{
  float: left;
}

.article #title-page-number #title-page-next{
  float: right;
}

.article #numpage-title{
  font-size: 90%;
}