wp_link_pages でかっこよく！？記事を分割する方法
WordPressで長い記事を分割するのに nextpage と wp_link_pages を使えば可能ですが、デザインがイマイチです。
サイトを調べてもなかなかよいサンプルが見つからなかったので、自分で設定みました。
こんな感じになります。
設定は以下です。
まずcssに以下のスタイルを定義します。
CSS:
-
.pagesprit {
-
color: #000000;
-
background:white;
-
margin: 1em auto;
-
line-height:2em;
-
text-align:center;
-
}
-
-
.page-numbers a {
-
display:inline;
-
color: #00019b;
-
border:solid 1px #ccc;
-
text-decoration:none;
-
}
-
-
.page-numbers a:hover {
-
color:white;
-
background: #328ab2;
-
}
-
-
.numbers {
-
margin: 0 10px;
-
}
次に、single.phpのページ番号リンクを表示したい個所に以下のコードを記述します。
PHP:
-
<div class="pagesprit">
-
<?php wp_link_pages('before=<div class="page-numbers">&after=</div>&next_or_number=number&pagelink=<span class="numbers">%</span>'); ?>
-
</div>
あとは記事の中の分割したい個所に
PHP:
-
＜!－nextpage－＞
を挿入するだけです。
自分ではsingleページの先頭と末尾に挿入しました。 実際の例
CSSの色や不要な設定はご自身で調整してください。
参考にさせていただいたサイト
WP-PageNavi を使わずにナビゲーション表示
WordPressで記事分割のカスタマイズ
関連記事
トラックバックURL
http://blog.cnet-media.co.jp/wrodpress/wp-link-page/trackback
コメントはまだありません 
コメントはまだありません »
コメントはまだありません。
コメントする