【WordPress】遷移元のページのURLを取得して戻るボタンにリンクを貼る方法

遷移元のページに戻るための「戻る」ボタンは、ユーザーエクスペリエンスを向上させる効果的な方法の1つです。特に、複雑なサイト構造や多数の記事・ページを持つブログでは、このボタンが非常に役立つことがあります。この記事では、WordPressのテンプレートに「戻る」ボタンを追加する方法をステップバイステップで解説します。

リファラURLの取得
戻るボタンの表示
スタイリッシュなデザインを適用
注意点
サンプルコード
まとめ

リファラURLの取得

まず始めに、WordPressで遷移元のページのURL（リファラURL）を取得する方法を紹介します。このURLは、ユーザーがあなたのサイトに訪れる前のページのアドレスを指します。

$referrer = wp_get_referer();

ここで使用しているwp_get_referer()関数は、WordPressの核心機能として提供されている関数で、遷移元のURLを取得することができます。

戻るボタンの表示

取得したリファラURLを元に、実際に「戻る」ボタンを表示させるコードは以下のとおりです。

if ($referrer) {
    echo '<a href="' . esc_url($referrer) . '">戻る</a>';
}

スタイリッシュなデザインを適用

シンプルなテキストリンクよりも、ボタン風のデザインを適用した方が目立ちやすく、使いやすい場合があります。以下は、ボタンの基本的なスタイルを示すCSSコードの例です。

a.back-button {
    padding: 10px 15px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
}

a.back-button:hover {
    background-color: #555;
}

これをテーマのstyle.cssに追加した後、先ほどのPHPコードにclass=”back-button”を追加します。

注意点

遷移元のURLはブラウザが提供する情報であり、ユーザーが直接URLを入力してページにアクセスした場合や、新しいタブでページを開いた場合など、リファラURLが存在しない場合があります。そのため、上記のコードはリファラURLが存在する場合のみボタンを表示するようにしています。

サンプルコード

例として、single.php の記事の終わりに「戻る」ボタンを追加したいとします。

single.php

<?php get_header(); ?>

<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>

            <!-- 戻るボタンを追加 -->
            <?php
                $referrer = wp_get_referer();
                if ($referrer) {
                    echo '<a href="' . esc_url($referrer) . '" class="back-button">戻る</a>';
                }
            ?>
        </article>
    <?php endwhile; endif; ?>
</main>

<?php get_footer(); ?>

style.css

/* 既存のスタイルの下に追加 */

a.back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
}

a.back-button:hover {
    background-color: #555;
}

これで、WordPressの記事ページ（single.php）の下部に「戻る」ボタンが表示され、そのボタンをクリックすると前のページに戻る動作が行われます。

スタイルやボタンの位置などは、さらにサイトのデザインや要件に合わせて調整することができます。