デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8ページナビ「PREV」「NEXT」をカスタマイズしてみた。 [WordPress]

投稿日:2018年8月22日 更新日:

関連記事直下にある「PREV」「NEXT」を削除や非表示してるところもあるけど、サイト内リンクを削除してしまうのはもったいない
せっかくなので、触ってもらえるようにカスタマイズしてみました。

今回手を加えたのは、style.cssとsingle.php
コピペで使えますが、子テーマ内のファイルでカスタマイズしましょう。

「PREV」「NEXT」をカスタマイズ

single.phpを編集

「p-navi」の部分が「PREV」「NEXT」の記述になるので、以下の記述を削除もしくはコメントアウトで非表示にします。

						<div class="p-navi clearfix">
							<dl>
								<?php
								$prev_post = get_previous_post();
								if ( !empty( $prev_post ) ): ?>
									<dt>PREV</dt>
									<dd>
										<a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"><?php echo $prev_post->post_title; ?></a>
									</dd>
								<?php endif; ?>
								<?php
								$next_post = get_next_post();
								if ( !empty( $next_post ) ): ?>
									<dt>NEXT</dt>
									<dd>
										<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"><?php echo $next_post->post_title; ?></a>
									</dd>
								<?php endif; ?>
							</dl>
						</div>

同じ場所に以下をコピペ。

												<div class="pagePager">
							<dl>
								<?php
								$prev_post = get_previous_post();
								if ( !empty( $prev_post ) ): ?>
									<div class="prev">
									<p>
										<a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"><?php echo $prev_post->post_title; ?></a>
									</p></div>
								<?php endif; ?>
								<?php
								$next_post = get_next_post();
								if ( !empty( $next_post ) ): ?>
									<div class="next">
									<p>
										<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"><?php echo $next_post->post_title; ?></a>
									</p></div>
								<?php endif; ?>
							</dl>
						</div>

style.cssを編集

  • 「PREV」「NEXT」の表示位置を上下から左右に変更
  • ボーダーの追加
  • アイコンの追加
  • hoverの追加
  • 文字調整
/*--------------------------------
ページナビ
---------------------------------*/

.pagePager {
    border-top: 1px solid #DDD;
    line-height: 1.4;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}

/*----------PREV----------*/

.pagePager .prev {
    width: 360px;
    border-right: 1px solid #DDD;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    padding: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.pagePager .prev p {
    margin-bottom: 0;
	font-size: 13px;
	font-weight: bold;
}

.pagePager .prev p a {
    display: block;
    padding: 50px 10px 25px 0px;
	text-decoration: none;
	color: #000000;
}
.pagePager .prev p a:hover {
    color: #b22222;
}

.pagePager .prev p::before {
    font-family: FontAwesome;
    content: "\f137";
    color: #b22222;
    position: absolute;
    top: 25px;
    left: 5px;
}

.pagePager .prev p::after {
    color: #b22222;
    position: absolute;
    top: 25px;
    left: 20px;
    content: "preview";
}
.pagePager .prev p:hover:before {
    left: 0px;
}

.pagePager .prev p:hover:after {
    left: 15px;
}

/*----------NEXT----------*/

.pagePager .next {
    width: 360px;
    text-align: left;
    vertical-align: top;
    display: table-cell;
    padding: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.pagePager .next p {
    margin-bottom: 0;
	font-size: 13px;
	text-align: right;
	font-weight: bold;
}

.pagePager .next p a {
    display: block;
    padding: 50px 0px 25px 10px;
	text-decoration: none;
	color: #000000;
}
.pagePager .next p a:hover {
    color: #b22222;
}

.pagePager .next p::before {
    font-family: FontAwesome;
    content: "\f138";
    color: #b22222;
    position: absolute;
    top: 25px;
    right: 5px;
}

.pagePager .next p::after {
    color: #b22222;
    position: absolute;
    top: 25px;
    right: 20px;
    content: "next";
}

.pagePager .next p:hover:before {
    right: 0px;
}

.pagePager .next p:hover:after {
    right: 15px;
}

スマートフォンも表示調整

PC版は「width: 360px;」で設定してるので、「width: 50%;」に変更

.pagePager .prev {
    width: 50%;
}

.pagePager .next {
    width: 50%;
}

トップページへ戻るボタンを追加

「Back to INDEX」を追加。

「PREV」(前の記事へ)「NEXT」(次の記事へ)があるのだから、「Back to INDEX」(一覧へ)があってもいいのではないかと思うわけです。

ここもstyle.cssとsingle.phpに手を加えます。

single.phpに追加

先ほど追加したページナビの直下に追記します。
【https://your-domain】は、適宜変更ください。

<div class="pageBackto">
<a href="【https://your-domain】"><span>Back to INDEX</span></a>
</div>

style.cssに追記

/*--------------------------------
Back to INDEX
---------------------------------*/
.pageBackto {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
	border-bottom: 1px solid #DDD;
}

.pageBackto a {
    width: 100%;
    display: block;
    text-decoration: none;
    color: #000;
    padding: 45px 0;
}

.pageBackto a span {
    background-size: 14px auto;
}

.pageBackto a:hover {
    color: #b22222;
}

.pageBackto a span::before {
    font-family: FontAwesome;
    content: "\f03a";
    color: #b22222;
	margin-right: 5px;
}

まとめ

ボタンに関しての考察
「PREV」「NEXT」「Back to INDEX」もボタンなのでアイキャッチも重要ですが、判読しやすくあるべきではないかと。
「PREV」「NEXT」に関しては記事タイトルになるので、文字数もばらつきがあり、天地センタリングすると読みづらいのではないか。
実際テスト段階で天地センタリングにもしてたんですけど、読みづらかったので頭ぞろえにしたわけです。

テーマデフォルトの場合は、判読はしやすい(?)が、アイキャッチが弱く目に留まらない

スポンサーリンク

-WordPress
-, , , ,

関連記事

カテゴリーの表示を個性的にしてみた。 [WordPress]

カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。 今回手を加えたのは、style.cssとfunctions.php。 カテゴリーの親子関係の表示を調整。 style.c …

ソネットブログからWordPressへ引っ越してみた。

ブログのコンテンツ自体は、エクスポート機能を利用すれば問題ないけど、画像の引っ越しは結構やっかい。 忘備録として残しておきます。 ブログ引っ越しの流れを確認しておきましょう。 目次 コンテンツのエクス …

Stinger8サムネイル画像を大きくして、スマホのレイアウト調整してみた。 [WordPress]

Stinger8のサムネイル画像のサイズは、100×100pxと小さくアイキャッチとしてはちょっと弱いので少し大きくしてみました。 そのままだとスマホのレイアウトが崩れてしまうのでそちらも調整。 今回 …

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。 デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。 今回はいつも …

no image

Stinger8よく使う「h」タグを装飾してみた。 [WordPress]

ブログを書く上で、よく使うタグの一つが「h」タグではないでしょうか。 なので、カスタマイズしたくもなります。 デフォルトだとこんな感じです。 今回手を入れたのは、「h2」タグと「h3」タグ。 「h4」 …