STINGER7 を見やすいページ送りにカイゼン

先日、Web メルカトルの真相について書き始めたら長文になってしまったのでページ送りを使いました。Wordpress のページ送りは記事本文に

<!-- nextpage -- >

と書き、single.php テンプレート内に

<?php wp_link_pages(); ?>

と書かれていれば自動的にページ送りが表示されます。STINGER7 にもページ送り自体は実装されていますが、デフォルト コードのままなのでこのような出力となります。

デフォルトのページ送り

かなり味気ないです。

しかし、ブログのトップ（home.php）では、分かりやすいページ送りの CSS が実装されています。

投稿一覧のページ送り

そこで、投稿本文のページ送りの見栄えを良くするべく改修しました。ページ送りは、wp_link_pages() 関数で実行しますが、引数にオブジェクトをセットすることで、デフォルトの <p> タグから変更できます。

<div class="st-pagelink">
<?php
  $defaults = array(
	'before'           => '<p>' . __( 'Pages:' ),
	'after'            => '</p>',
	'link_before'      => '',
	'link_after'       => '',
	'next_or_number'   => 'number',
	'separator'        => ' ',
	'nextpagelink'     => __( 'Next page' ),
	'previouspagelink' => __( 'Previous page' ),
	'pagelink'         => '%',
	'echo'             => 1
  );
  wp_link_pages( $defaults );
?>
</div>

しかし、この関数は、next_or_number で number（1、2、3、... というページ番号を表示する）か、next（[前のページ] [続きを読む] ）とページ送りのリンクのみを表示するか、いずれかしか選択できません。2 つ並べると

ページ送り改善1

と表示されます。これで我慢できなくもないですが、他のサイトを見ていると一列に並べたいです。

ページ送り改善2

<div class="st-pagelink"></div> を 1 つで囲めばたしかに一列に並びましたが、これは残念な状態です。

そこで、スタイルシートの力を借ります。[続きを読む] のボックスだけ一番右端に寄せたいので、"float:right;" を指定します。st-pagelink は幅 100% なので、これを "float:left;" で指定して左寄せにします。ここでは、css ファイルを変更せずに示すため、style 属性に値を入れました。

<div class="st-pagelink" style="float:left">
    <?php
        $args1 = array(
            'before'           => '',
            'after'            => '',
            'next_or_number'   => 'next',
            'separator'        => ' ',
            'nextpagelink'     => '<span class="page-numbers" style="float:right;margin:-3px 0 0 8px;">続きを読む raquo;</span>',
            'previouspagelink' => '<span class="page-numbers">laquo; 前のページ</span>',
            'echo'             => 1
        );
        wp_link_pages( $args1 );
        
        $args2 = array(
            'before'           => '',
            'after'            => '',
            'link_before'      => '<span class="page-numbers">',
            'link_after'       => '</span>',
            'next_or_number'   => 'number',
            'separator'        => ' ',
            'pagelink'         => '%',
            'echo'             => 1
        );
        wp_link_pages( $args2 );
    ?>
</div>
<div class="clear"></div>

これで表示すると

理想的なページ送り

きれいなページ送りができました。なぜか [続きを読む] を右寄せにすると下にずれたので、margin で若干レイアウトを修正しています。

そういえば、もうひとつ STINGER7ver20160209β  の /js/base.js にエラーがありました。Firebug で見ると $ が定義されていないというエラーを出力しています。Wordpress は $ → jQuery と置換が必要です。ただし、全部の文字を一括置換してはいけません。JavaScript beautififier で整形して 290 行目以降を変換してください。これを処理すると、フッターに STINGER7 のリンクが表示されることになりますので気になる方は気をつけましょう。