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

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

新規登録して質問してみよう
ただいま回答率
85.50%
URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

1760閲覧

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

junjun1479

総合スコア7

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2019/08/21 07:27

編集2019/08/21 07:32

前提・実現したいこと

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


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

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

試したこと

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

functions.phpにこちらを追記。

php

1add_filter( 'the_password_form', function ( $output ) { 2 global $wp; 3 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 ); 4} ); 5 6 7add_action( 'wp_footer', function () { 8 ob_start();?> 9 10<script type="text/javascript"> 11 12window.onload = function () { 13if( document.getElementById('_wp_http_referer') ){ 14 const anchor = window.location.hash; 15 console.log(anchor); 16 let redirect_to_url = document.getElementById('_wp_http_referer').value; 17 redirect_to_url = redirect_to_url + anchor; 18 document.getElementById('_wp_http_referer').value = redirect_to_url; 19 console.log(document.getElementById('_wp_http_referer').value); 20} 21} 22</script> 23<?php 24 echo do_shortcode( ob_get_clean() ); 25});

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

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

投稿2019/08/22 06:53

fareastnoise

総合スコア250

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

junjun1479

2019/08/22 07:09

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

0

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

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

php

1function url_plus_anchor(){ ?> 2<script type="text/javascript"> 3 4window.onload = function () { 5 let redirect_to_url = getParam('redirect_to'); 6 let form = document.forms.loginform; 7 form.redirect_to.value = redirect_to_url; 8}; 9 10function getParam(name, url) { 11 if (!url) url = window.location.href; 12 name = name.replace(/[[]]/g, "\$&"); 13 var regex = new RegExp("[?&]" + name + "(=([^&]*)|&|#|$)"), 14 results = regex.exec(url); 15 if (!results) return null; 16 if (!results[2]) return ''; 17 return decodeURIComponent(results[2].replace(/+/g, " ")); 18} 19</script> 20<?php } 21add_action( 'login_enqueue_scripts', 'url_plus_anchor' ); 22

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

getParamのところは、
http://www-creators.com/archives/4463

を参考にして、リダイレクトURLのハッシュ以降も取り出すようにしました。

投稿2019/08/22 02:41

fareastnoise

総合スコア250

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

junjun1479

2019/08/22 04:49

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

2019/08/22 05:07

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

2019/08/22 06:03

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

2019/08/22 06:06

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

2019/08/22 06:23

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問