WordPressで1つ前のページに戻るボタンってどうやって作るの？
記事一覧ページの個別記事ページの下には『前の記事・次の記事・一覧に戻る』などが一般的だと思いますが、たまに『戻る』というデザインもあります。
『前の記事・次の記事』はページネーションで『一覧に戻る』は単純に記事一覧ページのリンクを設定すればいいのですが、『戻るボタン』はちょっと複雑になります。
例えば、
- トップページから個別記事に遷移して『戻るボタン』をクリックするとトップページへ遷移
- 記事一覧から個別記事に遷移して『戻るボタン』をクリックすると記事一覧へ遷移
という感じになります。
今回はコピペで実装できる『1つ前に戻るボタン』のコードをご紹介します。
今だけ！5大無料特典あり🎁
WordPressで1つ前のページに戻るボタンを設置する方法
まずは出力されるHTMLを以下とします。
<a class="back-btn" href="1つ前のURL">前に戻る</a>そして上記コードを出力するためのPHPコードはこちらです。
<?php
$h = $_SERVER['HTTP_HOST'];
if (!empty($_SERVER['HTTP_REFERER']) && (strpos($_SERVER['HTTP_REFERER'],$h) !== false)) {
echo '<a class="more-btn" href="' . $_SERVER['HTTP_REFERER'] . '">前に戻る</a>';
}
?>ここで編集する箇所は『class名』と『aタグ内のテキスト』だけになります。
ちなみにこのコードはサイト内で移動した時だけ表示され、外部サイトなどからアクセスが来た時には表示されないようになっています。
滅多に使う機会はないかも知れませんが私は過去に2回だけ使った事があるので、頭の片隅に置いておいても損はないかと思います。
以上になります。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
今だけ！5大無料特典あり🎁
