WordPressプラグイン「bbPress」に不具合
やりたかったこと
まず、私がやりたかったこと。
それは、固定ページにログインページを作成し、そこからのログイン。
固定ページには、bbPressのショートコードである、「bbp-login」を使用している。
環境
使用しているプラグインは、「bbPress」のほか、ajaxでのログインなどを可能にする「bbPress forum utility pack」も使用しています。
おそらく、これも不具合に関連していそうです。
不具合内容
ログインができず、以下のようなメッセージが返ってきた。
エラー:ユーザー名を入力してください。
もちろん、ユーザ名もパスワードも入力していますが、値が取得できていないようです。
しかし、これは固定ページで作成したログインページだけの話で、どうやらウィジットから追加したログインページからはログインできるようです。
ウィジットでの表示のみも考えましたが、理想の形と違っていたため、この問題をなんとか解決しようと考えました。
調査
調べてみると、同じような不具合に悩まされている人を発見しましたが、
「ウィジットに表示したログインページと両方を表示されている場合にログインできない」
というようなことを書かれていました。
おそらく、私と同じ状態なのだと思います。
解決法を提案している人はいなかったため、自身で探すしかなさそうです。
まずはJavascriptで書かれたコードを確認します。
Ajaxによるログインということなので、おそらくjavascript内でユーザ名、パスワードの取得がうまくいっていないためです。
結果、この辺りが怪しいことに気づきました。
<script type="text/javascript">
window.bbpajax = {};
BBPAjax_extparm = function() {
const params = window.bbpajax['params'];
const selector = window.bbpajax['selector'];
const items = document.querySelectorAll( selector );
for (let i = 0; i < items.length; i++) {
if(items[i].name && items[i].name != 'g-recaptcha-response'){
if(items[i].type == 'checkbox'){
params[ items[i].name ] = (items[i].checked != false)? 1 : 0;
} else {
params[ items[i].name ] = items[i].value;
}
}
}
const recaptcha = document.querySelectorAll( "*[name='g-recaptcha-response']" );
for (let i = 0; i < recaptcha.length; i++) {
if(recaptcha[i].textLength > 0){
params[ recaptcha[i].name ] = recaptcha[i].value;
break;
}
}
return params;
}
BBPAjax_submit = function( params ) {
jQuery.ajax({ type: 'POST', url: 'https://share.took.jp/wp/wp-admin/admin-ajax.php', dataType: 'json',
data : params,
}).then(
function (response, dataType) {
if(typeof renderInvisibleReCaptcha !== "undefined"){
grecaptcha.reset();
}
let result = window.bbpajax['success'];
if(response.data.result !== result.code){
result = window.bbpajax['error'];
}
if(result.msg != null)
jQuery( result.msg ).html(response.data.info);
if(result.action == 'redirect')
window.location.href = response.data.info;
},
function () {
if(typeof renderInvisibleReCaptcha !== "undefined"){
grecaptcha.reset();
}
//alert("ajax response error");
}
);
}
</script>
<script type="text/javascript">
WPCustomLogin = function(nonce, is_widget, redirect, lostpass){
window.bbpajax['params'] = { action: "custom_login", _ajax_nonce: nonce, redirect_to:redirect, lostpass:lostpass,};
window.bbpajax['selector'] = (is_widget)? ".bbp_widget_login > form.bbp-login-form input" : ".bbpress-wrapper form.bbp-login-form input";
window.bbpajax['success'] = { code:'login_redirect', msg: null, action: 'redirect' };
window.bbpajax['error'] = { code: 'e_login', msg: '.custom-login-info', action: null };
if(typeof renderInvisibleReCaptcha !== "undefined"){
grecaptcha.execute();
} else {
BBPAjax_submit( BBPAjax_extparm() );
}
return false;
};
//# sourceURL=http://localhost/wordpress/bbp_custom_login.js
</script>
そして、今回の不具合の犯人はこいつ。
上記のコードだと5行目あたりに当たるでしょうか。
const selector = window.bbpajax['selector'];
const items = document.querySelectorAll( selector );
selectorという定数の中身を確認してみると、
.bbp_widget_login > form.bbp-login-form input
これでは、ウィジットのログインフォームしか動作しませんね。
修正するにはselectorを
form.bbp-login-form input
に変更すれば、動作しそうです。
修正方法
少し強引な方法ですが、私はひとまず、このように対応しました。
footerに以下をスクリプトを挿入します。
<script type="text/javascript">
window.bbpajax = {};
BBPAjax_extparm = function() {
const params = window.bbpajax['params'];
// const selector = window.bbpajax['selector'];
const selector = "form.bbp-login-form input";
const items = document.querySelectorAll( selector );
for (let i = 0; i < items.length; i++) {
if(items[i].name && items[i].name != 'g-recaptcha-response'){
if(items[i].type == 'checkbox'){
params[ items[i].name ] = (items[i].checked != false)? 1 : 0;
} else {
console.log("name:" + items[i].name + " value:" + items[i].value)
params[ items[i].name ] = items[i].value;
}
}
}
const recaptcha = document.querySelectorAll( "*[name='g-recaptcha-response']" );
for (let i = 0; i < recaptcha.length; i++) {
if(recaptcha[i].textLength > 0){
params[ recaptcha[i].name ] = recaptcha[i].value;
break;
}
}
return params;
}
BBPAjax_submit = function( params ) {
jQuery.ajax({ type: 'POST', url: 'https://share.took.jp/wp/wp-admin/admin-ajax.php', dataType: 'json',
data : params,
}).then(
function (response, dataType) {
if(typeof renderInvisibleReCaptcha !== "undefined"){
grecaptcha.reset();
}
let result = window.bbpajax['success'];
console.log(result)
console.log(response)
if(response.data.result !== result.code){
result = window.bbpajax['error'];
}
if(result.msg != null)
jQuery( result.msg ).html(response.data.info);
if(result.action == 'redirect')
window.location.href = response.data.info;
},
function () {
if(typeof renderInvisibleReCaptcha !== "undefined"){
grecaptcha.reset();
}
alert("ajax response error");
}
);
}
WPCustomLogin = function(nonce, is_widget, redirect, lostpass){
is_widget = 1;
window.bbpajax['params'] = { action: "custom_login", _ajax_nonce: nonce, redirect_to:redirect, lostpass:lostpass,};
window.bbpajax['selector'] = (is_widget)? ".bbp_widget_login > form.bbp-login-form input" : ".bbpress-wrapper form.bbp-login-form input";
window.bbpajax['success'] = { code:'login_redirect', msg: null, action: 'redirect' };
window.bbpajax['error'] = { code: 'e_login', msg: '.custom-login-info', action: null };
if(typeof renderInvisibleReCaptcha !== "undefined"){
grecaptcha.execute();
} else {
BBPAjax_submit( BBPAjax_extparm() );
}
return false;
};
//# sourceURL=http://localhost/wordpress/bbp_custom_login.js
</script>
URLについては、自身のサイトに置き換えてみてください。
ひとまずは、これで解決ということにして、しっかりとした修正は公式が出してくれるのを待とうと思います。
ただ、この方法だとウィジットにもログインを表示させたい場合には、動作しないため、修正が必要です。