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

Question

前提・実現したいこと

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

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

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

試したこと

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

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

Answer 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/

Comments

[junjun1479]

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

Answer 2

リダイレクトのための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のハッシュ以降も取り出すようにしました。

Comments

[junjun1479]

ご回答ありがとうございます。上記のコードを試してみましたが、現状ではまだハッシュ以降が消えてしまっています。もう少し試してみます。

[fareastnoise]

console.log(form.redirect_to.value);
を追記すると、どんな値が表示されますでしょうか？
質問ですが、パスワード入力画面でリダイレクト先のURLがinputに入るのですが、それのnameは何になっていますでしょうか？

[junjun1479]

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

[fareastnoise]

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

[junjun1479]

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