WordPress, ブログ

WordPressのデフォルトのページ送りの表記がどうもしっくりこないと思った方いらっしゃませんか？

「←以前の投稿」と「新しい投稿→」って出てくるんですが、何となく直訳っぽい感じがして直感的ではないんですよね。そして、日本人の感覚からすると、位置が逆かなと思います。

という訳で、修正してみましょう！

 

テンプレートの修正

ページ送りが記載されているテンプレートは、「loop.php」です。

テンプレート上部にある、

<div id="nav-above"></div>

がページ上部のページ送りで、

<div id="nav-below"></div>

が、ページ下部のページ送りです。今回は、ページ下部のページ送りを変更します。

テンプレートの該当箇所は、下記の部分です。

<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->

この中で、

上記の箇所が、「←以前の投稿」を表示させる箇所です。そして、

上記の箇所が、「新しい投稿→」を表示させる箇所です。

これを、下記のように変更します。

<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav”>＞＞</span> 次ページへ', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( ‘前ページへ <span class="meta-nav”>＜＜</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->

変更後のイメージがこちら

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

ここで2点気になるところがあります。

１、「＞＞」と「次ページへ」の位置が逆

２、「次ページへ」と「前ページへ」が左右逆

まず１から直しましょう。

先程のテンプレートを、下記のように修正します。

<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '次ページへ<span class="meta-nav">＞＞</span> ', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( '<span class="meta-nav">＜＜</span>前ページへ', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->

そして、２の修正はCSSの修正なので、「style.css」を修正します。

.nav-previous {
float: left;
width: 50%;
}
.nav-next {
float: right;
text-align: right;
width: 50%;
}

上記の項目を、下記のように修正します。

.nav-previous {
    float: right;
    text-align:right;
    width: 50%;
}
.nav-next {
    float: left;
    text-align: left;
    width: 50%;
}

変更後のイメージはこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

古い記事へ新しい記事へ