TOP >> ;wp_link_pages でかっこよく!?記事を分割する方法

wp_link_pages でかっこよく!?記事を分割する方法

WordPressで長い記事を分割するのに nextpage と wp_link_pages を使えば可能ですが、デザインがイマイチです。
サイトを調べてもなかなかよいサンプルが見つからなかったので、自分で設定みました。

こんな感じになります。

01

設定は以下です。

まずcssに以下のスタイルを定義します。

CSS:
  1. .pagesprit {
  2.     color: #000000;
  3.     background:white;
  4.     margin: 1em auto;
  5.     line-height:2em;
  6.     text-align:center;
  7. }
  8.  
  9. .page-numbers a {
  10.     display:inline;
  11.     color: #00019b;
  12.     border:solid 1px #ccc;
  13.     text-decoration:none;
  14. }
  15.  
  16. .page-numbers a:hover {
  17.     color:white;
  18.     background: #328ab2;
  19. }
  20.  
  21. .numbers {
  22.     margin: 0 10px;
  23. }

次に、single.phpのページ番号リンクを表示したい個所に以下のコードを記述します。

PHP:
  1. <div class="pagesprit">
  2. <?php wp_link_pages('before=<div class="page-numbers">&after=</div>&next_or_number=number&pagelink=<span class="numbers">%</span>'); ?>
  3. </div>

あとは記事の中の分割したい個所に

PHP:
  1. <!-nextpage->

を挿入するだけです。

自分ではsingleページの先頭と末尾に挿入しました。 実際の例

CSSの色や不要な設定はご自身で調整してください。

参考にさせていただいたサイト
WP-PageNavi を使わずにナビゲーション表示
WordPressで記事分割のカスタマイズ

関連記事

トラックバックURL

http://blog.cnet-media.co.jp/wrodpress/wp-link-page/trackback
コメントはまだありません

コメントはまだありません »

コメントはまだありません。

コメントする

カテゴリー

過去ログ

サイト内検索


RSS FEED

正当なCSSです! 正当なCSSです!

« 7月 2019 8月 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