WordPressに横からニョキっと出てくるページナビゲーション

ニョキっとページナビゲーション

WordPress に設置する場合は以下の PHP をテーマファイルに加えます。

index.php など一覧ページ

<?php
if ( get_previous_posts_link() ) :
?>
<div id="hide-nav-prev"><?php previous_posts_link('▶'); ?></div>
<?php 
endif;
?>

<?php
if ( get_next_posts_link() ) :
?>
<div id="hide-nav-next"><?php next_posts_link('◀'); ?></div>
</nav>
<?php 
endif;
?>

single.php など記事ページ

<?php 
if( get_previous_post() ) :
?>
<div id="hide-nav-prev"><?php previous_post_link('%link', '▶'); ?></div>
<?php 
endif;
?>

<?php
if( get_next_post() ) :
?>
<div id="hide-nav-next"><?php next_post_link('%link', '◀'); ?></div>
<?php 
endif; 
?>

PHP コードを加える場所は body 内であれば特にどこでも構いません。

以下のような HTML が body 内にあれば OK です。これらの要素が存在すれば WordPress 以外でも設置可能です。

HTML

<div id="hide-nav-next">
    <a href="・・・">◀</a>
</div>
<div id="hide-nav-prev">
    <a href="・・・">▶</a>
</div>

アニメーションや hover にかかわるところは全て CSS に任せます。JavaScript はつかいません。

CSS

#hide-nav-next, #hide-nav-prev {
    height: 100%;
    position: fixed; /* 位置を固定 */
    top: 0;
    width: 60px; /* 横幅 */
}

#hide-nav-next {
    left: 0;
}

#hide-nav-prev {
    right: 0;
}

#hide-nav-next a, #hide-nav-prev a {
    background-color: #ffab91; /* 背景色 */
    color: #fff; /* 三角形の色 */
    display: table-cell;
    height: 100vh;
    text-align: center;
    transition: transform 0.2s linear; /* 0.2秒はアニメーションにかかる時間 */
    vertical-align: middle;
    width: 60px; /* 横幅と合わせる */
}

#hide-nav-next a {
    transform: translateX(-60px); /* 左のナビの初期位置 横幅と合わせる */
}

#hide-nav-prev a {
    transform: translateX(60px); /* 右のナビの初期位置 横幅と合わせる */
}

#hide-nav-next:hover a, #hide-nav-prev:hover a {
    transform: translate(0); /* hover 時はアニメーションで位置を戻す */
}

#hide-nav-next a:hover, #hide-nav-prev a:hover {
    background-color: #ffab91; /* hover時の背景色 変更しない場合は同色に*/
    color: #fff; /* hover時の▶の色 変更しない場合は同色に*/
}

transform を使うことで割かしシンプルに記述できました。

まとめ

PC ではほぼすべての最新ブラウザで大丈夫ですが、 iPhone は hover が基本効かないので動かないはずです。Android は hover も使えるので動きますがスマホの画面が狭いためかなり本文にはみ出してきます。

UI 的にはともかくアニメーションなどは面白いので何か別の活用法があるかもしれません。