【Gush2】前の記事・次の記事へ行くリンク「PREV：NEXT：」を、関連記事の上に移動してみました。文字も変えたよ

2015/07/02

前の記事・次の記事に行くためのリンク「PREV：NEXT：」を関連記事の上に移動したので、その方法を紹介します。
Gush2のデフォルトでは、「PREV：NEXT：」は、コメント欄の下（記事エリアの一番下）に表示されます。
　

1 個別記事画面で「PREV：NEXT：」を関連記事の上に移動
- 1.1 single.php で、「PREV：NEXT：」用の記述を移動します
2 ついでに、「PREV：」「NEXT：」を好きな文字列に変更
- 2.1 single.phpで、文字列を変えます
- 2.2 全角３文字を超える場合、style.cssで表示を調整します
3 Gush2のバグ？を、ついでに修正
4 まとめと今後の課題

個別記事画面で「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行目です。

<?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-->

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

<?php comments_template(); ?>

<?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>

</div>

</div>

上記の水色部分を切り取って、「関連記事用記述」の前に貼り付けます。
「<div id=”relations”>」の前、single.phpがGush2デフォルトのままであれば、73行目です。

</article>
</div><!--//article_body-->

<div id="relations">
<h3>関連記事-こちらもどうぞ</h3>

</article>

</div>

<h3>関連記事-こちらもどうぞ</h3>

下記は、変更後のsingle.phpです。

</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>

</article>

</div>

<?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>

<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行目です。

/*--------------------------------------
  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: 60px;

margin-bottom: 1.2em;

}

/*--------------------------------------
  768px 前の記事・次の記事
--------------------------------------*/
dl#prenex dt {
	float: left;
	width: 4.5em;
	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：」の下には入らないのです。

#entry_body dt:first-child {
	margin: 0 0 1em 0;
}

572

573

574

#entry_body dt:first-child {

margin: 0 0 1em 0;

}

修正は、573行目を変更するのではなく、975行目からの「スマホ用の『前の記事・次の記事』」のところで行います。992行目で指定しているマージンが573行目での指定に負けちゃっているので、992行目が生きるように「!important」を入れます。
（975行目からが「スマホ用の『前の記事・次の記事』」です。前章の1542行目からの記述は「PCとタブレット用」なので、間違えないでね）

/*--------------------------------------
  前の記事・次の記事
--------------------------------------*/
#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;
}

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を追加します。

/*--------------------------------------
  前の記事・次の記事
--------------------------------------*/
#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;
}

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表示は前のほうがよかった気もするし、様子を見て、また変えてみようと思っています。

on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。初めまして。同感です。こんなに良いのに、なんでみんな使わないの？？って思いますよね。確かにフォントは、初期状態ではちょっと… そのあたりがもうちょっと何とかなれば最高なんですけどね。ＣＳＳの解説ありがとうございます、参考にさせていただきますね♪
on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。bloggerは僕もオススメです( ´ ▽ ` )ﾉ本当シーサーブログは広告多いですね( ´ ▽ ` )ﾉ
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）TN0816さまご訪問ありがとうございます。キーワード検索の下に表示されるのは、サイド広告300pxです。外観＞ウィジェット＞サイド広告300px に、広告コードを書いているのではないでしょうか？
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）このブログとても参考になりました！１つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。a cattle northern さまくわしい情報をありがとうございます。なるほど。怪物レベルでなければ、ポイントで受け取る分が必ずあるのですね。「ポイントで楽天市場で買い物してね」ってことなのでしょうね。楽天市場を使ってない人は『もしも』がいいですね。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。楽天アフィですが、１ヶ月で３０００円以上は、３０００ポイントを楽天ポイントで＋超過分を楽天銀行振込１ヶ月で３０００円未満は楽天ポイントで支給となります。毎月１０万以上確実で全額銀行振込となりますが、そんな怪物は・・・・・。楽天市場を使うのでなければ、もしもの方がいいと思いますよ。

さらさらぶろぐ

アフィリエイトのことを書くつもりで始めたけど、WordPressやGush2のことを書いちゃってます。

【Gush2】前の記事・次の記事へ行くリンク「PREV：NEXT：」を、関連記事の上に移動してみました。文字も変えたよ

個別記事画面で「PREV：NEXT：」を関連記事の上に移動

single.php で、「PREV：NEXT：」用の記述を移動します

ついでに、「PREV：」「NEXT：」を好きな文字列に変更

single.phpで、文字列を変えます

全角３文字を超える場合、style.cssで表示を調整します

Gush2のバグ？を、ついでに修正

まとめと今後の課題

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

個別記事画面で「PREV：NEXT：」を関連記事の上に移動

single.php で、「PREV：NEXT：」用の記述を移動します

ついでに、「PREV：」「NEXT：」を好きな文字列に変更

single.phpで、文字列を変えます

全角３文字を超える場合、style.cssで表示を調整します

Gush2のバグ？を、ついでに修正

まとめと今後の課題

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル