ページ(記事)を分割表示させる方法 [wordpress]

cssで見栄えをよくする

これは大分迷いました。というのは2ページ目以降はリンクが貼られるので問題ないのですが
ランクを貼られていない当ページのソースをみるとただの”1”とでてるだけ・・


色々調べ 試して失敗して その結果下記の様なスタイルにたどり着きました。

<!--?php wp_link_pages('before=
<div id="nextpage">&after=</div>
&next_or_number=number&pagelink=<span>Page %</span>'); ?>

上のタグの説明をしますと 呼び出したページナビの前後に入れるソース(beforeとafter)を足してページナビに属性を付けます。
Page %は Pageが数字の前にくる文字。%が数字になります。変更する場合はPageの所(%はそのまま)を変更します。
そしてページナンバーの前後にspanを付けました。 <li>でも試してみましたがうまくいきませんでした・・

さて、spanで括られた数字ですが リンクの貼られた2ページ目以降は下記の様なソースになってしまいます。

<a href="https://www.d-31n.com/blog/wp-plugin/1976/2/"><span>Page 2</span></a>

リンクタグの間にspanが入ってしまいますので CSSで設定するときも span a などでなく a spanとなります。
下記はこのブログで設定しているCSSです。参考にしてみてください。

div#nextpage {
    font-size: 100%;
    clear:both;
}

div#nextpage span {
    background-color:#e9e8e8;
    padding: 0.5em 1em;
    margin: 0.25em;
    text-decoration: none;
    border: 1px solid #666666;
    color: #333;
}

#nextpage a span, #nextpage a:link span {
    padding: 0.5em 1em;
    margin: 0.25em;
    text-decoration: none;
    background-color:#bbe0e5;
    border: 1px solid #00b8fd;
    color: #999999;
}

#nextpage a:visited span {
    border: 1px solid #8f9da6;
    color: #999999;
}

#nextpage a:hover span {
   background-color:#45bcd2;
    text-decoration: underline;
    border: 1px solid #0198ca;
    color: #ffffff;
}

テーマのカスタマイズ等のご相談/お問い合わせはこちら
個人の方でもお気軽にご相談ください

 


ページ: 1 2