【Gush2】前の記事・次の記事へ行くリンク「PREV：NEXT：」を、関連記事の上に移動してみました。文字も変えたよ
前の記事・次の記事に行くためのリンク「PREV：NEXT：」を関連記事の上に移動したので、その方法を紹介します。
Gush2のデフォルトでは、「PREV：NEXT：」は、コメント欄の下（記事エリアの一番下）に表示されます。
目次
個別記事画面で「PREV：NEXT：」を関連記事の上に移動
個別記事に関するPHPファイルは「single.php」ですので、これを編集します。
single.php で、「PREV：NEXT：」用の記述を移動します
single.phpで、「PREV：NEXT：」を表示している部分（前後記事用記述）を関連記事を表示している部分（関連記事用記述）の前に移動します。
「前後記事用記述」のID名は「page_pn」です。
single.phpをエディタで開き、「page_pn」を検索すれば、「前後記事用記述」を見つけられます。single.phpがGush2デフォルトのままであれば、117～130行目です。
|
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<?php comments_template(); ?> <!--//コメント--> <div id="page_pn" class="clearfix"> <dl id="prenex"> <?php $prev_post = get_previous_post(); if (!empty( $prev_post )): ?> <dt>PREV：</dt><dd><a href="<?php echo 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 get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a></dd> <?php endif; ?> </dl> </div><!--//page_pn--> </div><!--//entry_body--> </div><!--//main--> |
上記の水色部分を切り取って、「関連記事用記述」の前に貼り付けます。
「<div id=”relations”>」の前、single.phpがGush2デフォルトのままであれば、73行目です。
|
71 72 73 74 75 |
</article> </div><!--//article_body--> <div id="relations"> <h3>関連記事-こちらもどうぞ</h3> |
下記は、変更後のsingle.phpです。
|
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
</article> </div><!--//article_body--> <div id="page_pn" class="clearfix"> <dl id="prenex"> <?php $prev_post = get_previous_post(); if (!empty( $prev_post )): ?> <dt>ひとつ前</dt><dd><a href="<?php echo 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>ひとつ後</dt><dd><a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a></dd> <?php endif; ?> </dl> </div><!--//page_pn--> <div id="relations"> <h3>関連記事-こちらもどうぞ</h3> |
ついでに、「PREV：」「NEXT：」を好きな文字列に変更
「PREV：」を「ひとつ前」、「NEXT：」を「ひとつ後」に変えてみました。
single.phpで、文字列を変えます
変更する箇所は、「PREV」「NEXT」を「大文字と小文字を区別する」で検索すると見つかります。single.phpがGush2デフォルトのままであれば、「PREV：」は122行目、「NEXT：」は127行目です。
コードは前章を見てね。
「PREV：」「NEXT：」を好きな文字列に変えます。
全角３文字を超える場合、style.cssで表示を調整します
PC表示のとき、「ひとつ前」「ひとつ後」の後ろで改行しちゃうので、style.cssで、表示の調整をしました。
style.cssによれば、文字列幅が60pxを超えると改行するようです。
style.cssの「前後記事用記述」は、PC表示（画面幅1024px以上）とタブレット表示（画面幅768px以上）と共通で記述されています。
下記のとおり「768px 前の記事・次の記事」のところを変更します。style.cssがGush2デフォルトのままであれば、記述は1542行目からで、変更するのは1547行目です。
|
1542 1543 1544 1545 1546 1547 1548 1549 |
/*-------------------------------------- 768px 前の記事・次の記事 --------------------------------------*/ dl#prenex dt { float: left; width: 60px; margin-bottom: 1.2em; } |
|
1542 1543 1544 1545 1546 1547 1548 1549 |
/*-------------------------------------- 768px 前の記事・次の記事 --------------------------------------*/ dl#prenex dt { float: left; width: 4.5em; margin-bottom: 1.2em; } |
文字列幅はemで定義するほうが、なんとなく好きなので、そうしてます。4.5emは、全角4.5文字ぐらいです。（emは英字基準で、日本語の全角とは違うので、「ぐらい」になっちゃいます）
Gush2のバグ？を、ついでに修正
このカスタマイズのデバッグ中に、「スマホ表示で『PREV：』の下にマージンが入ってる。『NEXT：』の下には入っていないのに」って気がつきました。私のミスかと思ったら、Gush2デフォルトでも「NEXT：」の下だけマージンが入っていました。
原因は、style.cssの573行目、このマージンを継承してしまうからでした。
first-childにマージンをつけているので、「PREV：」の下には1emのマージンが入るけど、「NEXT：」の下には入らないのです。
|
572 573 574 |
#entry_body dt:first-child { margin: 0 0 1em 0; } |
修正は、573行目を変更するのではなく、975行目からの「スマホ用の『前の記事・次の記事』」のところで行います。992行目で指定しているマージンが573行目での指定に負けちゃっているので、992行目が生きるように「!important」を入れます。
（975行目からが「スマホ用の『前の記事・次の記事』」です。前章の1542行目からの記述は「PCとタブレット用」なので、間違えないでね）
|
975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 |
/*-------------------------------------- 前の記事・次の記事 --------------------------------------*/ #page_pn { margin: 24px 0 20px 0; } dl#prenex { text-align: left; width: 90%; padding: 5%; margin: 0; } dl#prenex dt { background: none; padding: 0; margin: 0; } |
992行目に!importantを追加します。
|
975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 |
/*-------------------------------------- 前の記事・次の記事 --------------------------------------*/ #page_pn { margin: 24px 0 20px 0; } dl#prenex { text-align: left; width: 90%; padding: 5%; margin: 0; } dl#prenex dt { background: none; padding: 0; margin: 0 !important; } |
まとめと今後の課題
ファブレットで全記事の表示確認をしていて、「PREV：NEXT：」が使いづらいなって思ったので、変えてみました。
PCだと一番下までスクロールすれば「PREV：NEXT：」が見つかるけど、モバイルだと「PREV：NEXT：」の下にサイドバーが表示されるから、スクロールで「PREV：NEXT：」のところにうまく止まれなくて、記事を次々に移動するのにイマイチだったのです。
シェアボタンの上に入れるか迷ったけど、下にしました。私のブログは、まだ関連記事の無い記事が多いので、そんな場合に、「PREV：NEXT：」を見てもらえるといいかなって思ったりして。(^^ゞ
このカスタマイズの後で、「書いた人」をシェアボタンの下に入れちゃったので、また「PREV：NEXT：」にたどり着きにくくなっちゃいました。PC表示は前のほうがよかった気もするし、様子を見て、また変えてみようと思っています。
この記事へのコメントはこちら