YouTube | Facebook | X(Twitter) | RSS

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

2016/2/19 (金)

先日、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

ページ送り改善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 のリンクが表示されることになりますので気になる方は気をつけましょう。

  • この記事を書いた人

羽田 康祐

伊達と酔狂のGISエンジニア。GIS上級技術者、Esri認定インストラクター、CompTIA CTT+ Classroom Trainer、潜水士、PADIダイブマスター、四アマ。WordPress は 2.1 からのユーザーで歴だけは長い。 代表著書『"地図リテラシー入門―地図の正しい読み方・描き方がわかる』 GIS を使った自己紹介はこちら。ESRIジャパン(株)所属、元青山学院大学非常勤講師を兼務。日本地図学会第31期常任委員。発言は個人の見解です。

-Web
-,