質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.96%

WordPressパスワード保護ページでログイン後アンカーリンクを保持したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 564

score 7

前提・実現したいこと

WordPrss の投稿ページなどにある「パスワード保護」機能を使いページにパスワードをかけた時に、
アンカーリンクのあるURLでアクセスした後、ログインするとアンカーリンクが消えてしまいます。


https://example.com/page/#anker
上記のようにアクセスしてログインを行うと。
https://example.com/page/
のようになってしまいます。

https://example.com/page/#ankerのURLを保持したままログインをしたいのですが、
こうなってしまうのはWordPressの仕様なのでしょうか。

試したこと

javascriptでページ読込後アンカーリンクが動作するように試したのですが、
そもそも#ankerが消えているので効果はありませんでした。

申し訳ありませんが解決方法がありましたらご教示ください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

functions.phpにこちらを追記。

add_filter( 'the_password_form', function ( $output ) {
    global $wp;
    return str_ireplace( '</form>', '<input type="hidden" id="_wp_http_referer" name="_wp_http_referer" class="_wp_http_referer" value="' . trailingslashit( home_url( $wp->request ) ) . '"></form>', $output );
} );


add_action( 'wp_footer', function () {
    ob_start();?>

<script type="text/javascript">

window.onload = function () {
if( document.getElementById('_wp_http_referer') ){
    const anchor = window.location.hash;
    console.log(anchor);
    let redirect_to_url = document.getElementById('_wp_http_referer').value;
    redirect_to_url = redirect_to_url + anchor;
    document.getElementById('_wp_http_referer').value = redirect_to_url;
    console.log(document.getElementById('_wp_http_referer').value);
}
}
</script>
<?php
    echo do_shortcode( ob_get_clean() );
});

ちょっとコードが乱雑で、改良しなくてはいけないですが、、、
たぶん動作すると思います。
試してみてください。

こちらを参考にしました。
https://wordpress.org/support/topic/jump-link-into-password-protected-page/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/22 16:09

    回答、ありがとうございました。
    今回教えて頂いたコードを使うことで、思っていたことが実現できました。

    キャンセル

0

リダイレクトのためのURLにハッシュ以降が入っていなかったので、JavaScriptで書き換えるようにすると動作するようでした。

functions.phpに以下を追記して、試してみてください。
思ったような挙動になれば良いのですが!

function url_plus_anchor(){ ?>
<script type="text/javascript">

window.onload = function () {
    let redirect_to_url = getParam('redirect_to');
    let form = document.forms.loginform;
    form.redirect_to.value = redirect_to_url;
};

function getParam(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
<?php }
add_action( 'login_enqueue_scripts', 'url_plus_anchor'  );

記述が正しくないかもしれませんが適宜直してください。

getParamのところは、
http://www-creators.com/archives/4463
を参考にして、リダイレクトURLのハッシュ以降も取り出すようにしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/22 15:03

    返信ありがとうございます。
    console.logを確認すると「Uncaught TypeError: Cannot read property 'redirect_to' of undefined」と表示されています。パスワード入力inputのnameは"post_password"になっています。

    キャンセル

  • 2019/08/22 15:06

    すみません! この回答、プラグインの「パスワード保護」のことだと勘違いしていました。
    いったんこの回答を忘れてくださいー。汗。

    キャンセル

  • 2019/08/22 15:23

    質問が分かり難くて申し訳ありませんでした。もう少しいろいろ調べてみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る