ツイート

2013年2月5日
ホームページビルダー17の記事が長くなった時、 その長文記事を複数ページに分けて表示することができましたので、その方法を紹介します。 shimotsukare-girl.com

H250201-H250205

１．最初のトライ－WordPressプラグイン「Number My Post Pages」を 利用してみました。

採用した結果、表示は現れましたが、若い方のページ（数字）のリンク（URL）に誤りがありました。

プラグインの解説サイトを見て回った結果、URLの書式に制約がありそうだったので、
採用を断念しました。

２．次のトライ－WordPressに標準で付属するページ分割機能にチャレンジしました。

文章の分割点にテキストモードで


<?php wp_link_pages( ); ?>
<!–nextpage–>

を並べて置いたところ、下の表示のようになりました。

ページ: 1 2 3 4 5

リンクに誤りはありませんが、少し貧相です。

３．採用したプラン－<?php wp_link_pages( ); ?>と<!–nextpage–>によりページ分割を行い、 css　を利用

Page 1 Page 2 Page 3 Page 4 Page 5

D-31Nデザインスタジオさんの「ページ（記事）を分割表示させる方法 [wordpress]」 を参考にして作成しました。

＞ソースの　<?php wp_link_pages( ); ?>　部分と入れ替えた記述 ・ ・ ・ 最初のページに表示する記事 <?php wp_link_pages(‘before= <div id="nextpage">&after=</div> &next_or_number=number&pagelink=<span>Page %</span>’); ?> <!–nextpage–> 次のページ以下に表示する記事 ・ ・ ・ ＞付け加えたcss /* nextpage wp_link_pages　で記事を分割表示する*/ div#nextpage { font-size: 100%; clear:both; } div#nextpage span { background-color:#e9e8e8; padding: 0.5em 1em; margin: 0.25em; line-height:5em; 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: #000000; } #nextpage a:visited span { border: 1px solid #8f9da6; color: #000000; } #nextpage a:hover span { background-color:#45bcd2; text-decoration: none; border: 1px solid #0198ca; color: #ffffff; }