投稿記事のページ分割
- - - TwntyTwelveテンプレートで投稿記事を2ページに分割
- フィルタフックでwp_link_pages()のカスタマイズ
  - - TwentyTwelveテンプレートカスタマイズ後のNextPage

投稿記事のページ分割

WordPressの投稿に<!–nextpage–> と入れるとページが分割できるのはご存知でしょうか。

一般的なブログの場合そこまで長いコンテンツを書くことはまずそう使うことはないと思う。
私自身使うことはないだろうと考えていた。

<!–more–>と入れるのさえ面倒なので自動的に抜粋する処理を加えたほどだ。

ところが前記事で9月限定のサービスを紹介するにあたり、紹介の投稿記事とサービス内容を書いた固定ページとに分けたのだが、公開後に少し気に入らない事が浮上してきた。

それは何かというと、ソーシャルメディアにシェアした時に気付いた。

固定のページをシェアしようとしてもOGPの設定でサイトTOPページの情報を引っ張ってしまう、なぜなら私自身がそう指示して書いてあるから・・・だ。

Facebokのいいね！他のソーシャルボタンは固定ページには付けないようにしている。

というのも、固定ページをソーシャルシェアされた場合に、望ましい場合とそうでもない場合がある。

一般的にOGPを<head>内に書いてある人はそうしてるのではないだろうか？

Facebook公式のWordpressプラグインのLikeボタンでは配置する場所としてPost Page と選ぶことが出来て両方に付けられたと記憶している。

今回のように商品サービスは出来る限りシェアして欲しいが、Profileのようなページをシェアされても、それはなんだか少し困る。

そこで、紹介記事と固定ページの内容をつなげて、ページを分割しようとテスト的にやってみたところ、デフォルトだとこれがなんとも言えずシンプル。

TwntyTwelveテンプレートで投稿記事を2ページに分割

あまりにもシンプルで全体的に少し落ち着かない。

この際なので少しカスタマイズをしてみた。

フィルタフックで`wp_link_pages()`のカスタマイズ

WordPressCodex日本語版ページのテンプレートタグ/wp link pages

ここにあるようにwp_link_pages()はwp-includes/post-template.phpにある

中身をみるとwp_link_pages_argsにフックすれば良い感じ。

functions.phpに追加


function custom_wp_link_pages() {

$defaults = array(
 'before' => '<div class="pagesprit"><div class="page-numbers">',
 'after' => '</div>',
 'link_before' => '',
 'link_after' => '',
 'next_or_number' => 'number',
 'separator' => ' ',
 'nextpagelink' => __( 'Next page' ),
 'previouspagelink' => __( 'Previous page' ),
 'pagelink' => '<span class="numbers">%</span>',
 'echo' => 1
 );
 return $defaults;
}
add_filter( 'wp_link_pages_args', 'custom_wp_link_pages');

style.phpでCSS調整


.pagesprit {
   clear: both;
   color: #27364f;
   line-height:1.714285714;

}
.page-numbers a {
    display:inline-block;
    border:solid 1px #ccc;
    border:solid 0.0714285714285714rem #ccc;
    text-decoration:none;
}
.page-numbers a:hover {
    color:white;
    background: #27364f;
}
.numbers {
    margin: 0 8px;
    margin: 0 0.5714285714285714rem;
}

急ぎやっつけ作業で微調整は出来ていないのだが以下のように変更した。

TwentyTwelveテンプレートカスタマイズ後のNextPage

TOPページのページネーションのように>>となるほど記事ページを分割する必要もないと思うのでしばらくはこれで良いと思っている。

＜**追記** ＞

CSSの調整をして現在は以下のように変更済みです。

記事の分割<!–nextpage–> での表示をカスタマイズ