【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:」を好きな文字列に変えます。
全角3文字を超える場合、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表示は前のほうがよかった気もするし、様子を見て、また変えてみようと思っています。
この記事へのコメントはこちら