WordPressでは１つの記事を複数のページに分割することができます。
WordPressでは１つの記事を複数のページに分割することができます。
記事を分割することにより表示が軽くなりますし、スクロールする量も減るので読み手のストレスが減ります。
❶ 分割する方法
WordPressの投稿画面のHTMLモードにして、記事を分割したいところで
<!--nextpage-->と入力します。
|
1 |
<!--nextpage--> |
入力しやすいように、単語登録しておくと便利です。
私が使用している「テーマ」は、記事の分割に対応したテーマを使用している場合、以上で分割ができます。
やってみて2ページ目、3ページ目への遷移ができなければ、テーマが分割に対応していないので、以下の方法でテーマファイルを変更する必要があります。
❷ 分割した各ページへのリンクの出力
分割に対応していないテーマを使用している場合、テーマファイルを少し弄る必要があります。
記事を表示するテンプレートファイル（通常はsingle.php）の「<?php the_content(); ?>」の下のあたりに
<?php wp_link_pages(); ?>を記入します。
|
1 |
<?php wp_link_pages(); ?> |
❸ CSSでスタイルをかっこよくする
CSSでHTMLが装飾しやすいように、テンプレートタグをカスタマイズするのとCSS記述をする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?php $args = array( 'before' => '<p class="page-page">', 'after' => '</p> <style> .page-page { width: 100%; text-align: center; margin: 80px 0 10px; } .page-page span { padding: 7px 10px; font-size: 15px; background: #fff; position: relative; box-shadow: 0 0 1px 2px #76abff inset; } .page-page span:before { content:"NOW"; position: absolute; top: -120%; left: 0; /*追加しました*/ width: 100%; display: block; text-align: center; background: #76abff; padding: 5px 0; border-radius: 7px; color: #fff; font-size: 12px; font-weight: bold; } .page-page span:after { content:""; top: -50%; border: 8px solid transparent; border-top-color: #76abff; position: absolute; left: 50%; margin-left: -8px; border: ; } .page-page a { text-decoration: none; } .page-page a span { background: #76abff; color: #000; padding: 7px 10px; color: #fff; box-shadow: none; font-weight: bold; } .page-page a span:before { content:""; padding: 0; } .page-page a span:after { border: none; } /* 追加しました */ .page-page span { opacity : 0.8; } </style>', 'link_before' => '<span>', 'link_after' => '</span>', 'pagelink' => 'PAGE %', ); wp_link_pages( $args ); ?> |
このようにちょっとかっこよくなります。
PAGE 1 PAGE 2