Wordpress 'wp_enqueue_script‘不使用'wp_login’钩子

Question

当用户登录到我的wordpress系统时，我想执行一个javascript。具体来说，我需要执行。请参考下面的代码，

function gtm_wp_login() {
    wp_enqueue_script( 'gtm-on-login', get_stylesheet_directory_uri() . '/assets/js/gtm_on_login.js', array());
    echo "<script>alert('Welcome');</script>";
    echo "One";
    echo "<script>console.log('Welcome Theme');</script>";
    echo "Two";
    print_r($_REQUEST);
    echo "Three";
    die();
}
add_action( 'wp_login', 'gtm_wp_login');

我把上面的代码放在Wordpress主题的functions.php文件中。在排队的文件gtm_on_login.js中，我现在只做了console.log检查它是否被排队。当我将die()语句放在回调函数的末尾时，我看到了一种奇怪的行为

1. 内联javascript回显，显示输出，包括警报(‘欢迎’)语句。
2. console.log在排队的脚本不显示。(我检查了wp_enqueue_script语句，将它放在回调之外以检查其语法正确性，在这种情况下，它显示了输出)

但是，在删除die()语句时，Pt 1和Pt都没有。2输出被显示，换句话说，流中不接受javascript。请指导，当用户在wordpress系统中登录时，我如何通过查询和回音来执行脚本。

Answer 1

我认为你处理这个问题有点不正确。您是否已经100%地验证了您的脚本在登录页面的源代码中？我敢打赌你不会在登录页面上找到你添加的JS。

您试图利用的是wp_enqueue_script，这与将上述脚本添加到被认为是后端WordPress页面的特定页面不合适。这是一个动作钩子，即使需要将脚本/样式注入到站点的前端。

据我所收集的，您正在试图跟踪用户在WP后端登录后，或有某种触发击中，当他们登录到WP后端。为了正确地做到这一点，并让它与WP登录页面一起工作，我将考虑创建一个前端登录实用程序，它或多或少只是一个带有页眉和页脚的空页面。这将使您能够准确地控制在特定页面上注入和运行的内容，而不必真正地尝试将脚本注入管理核心。此外，当单击特定按钮或向用户发送某种成功消息时，您可以依靠GTM创建触发器，然后在GTM仪表板中独立跟踪数据。

以下是一些支持代码，可以让您开始使用自定义登录页面。请记住，您可能希望创建一个自定义页面模板，并将此代码委托给该模板，而不是wp-login.php页面，如本例中的代码所示：

/* Main redirection of the default login page */
function redirect_login_page() {
    $login_page  = home_url('/login/');
    $page_viewed = basename($_SERVER['REQUEST_URI']);

    if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init','redirect_login_page');

/* Where to go if a login failed */
function custom_login_failed() {
    $login_page  = home_url('/login/');
    wp_redirect($login_page . '?login=failed');
    exit;
}
add_action('wp_login_failed', 'custom_login_failed');

/* Where to go if any of the fields were empty */
function verify_user_pass($user, $username, $password) {
    $login_page  = home_url('/login/');
    if($username == "" || $password == "") {
        wp_redirect($login_page . "?login=empty");
        exit;
    }
}
add_filter('authenticate', 'verify_user_pass', 1, 3);

/* What to do on logout */
function logout_redirect() {
    $login_page  = home_url('/login/');
    wp_redirect($login_page . "?login=false");
    exit;
}
add_action('wp_logout','logout_redirect');

一些有参考价值的信息：https://themetrust.com/build-custom-wordpress-login-page/

Answer 2

对我有效的解决方案，也许是一项工作。

在主题文件夹的functions.php中，我添加了以下代码，

add_filter('login_redirect', 'login_query_parameter', 99, 3);

function login_query_parameter($url, $request, $user) {
    if(strpos($url, 'wp-admin') !== false) {
        return $url;
    }
    else {
        return $url."?login=success";
    }   
}

我已经添加了如果其他在上面的代码，因为我只想跟踪登录通过前端，而不是wordpress后端。在主题的functions.php文件中，如果发现用户已登录，我将对脚本进行查询。

if(is_user_logged_in()) {
        wp_enqueue_script( 'gtm-on-login', get_stylesheet_directory_uri() . '/assets/js/gtm_on_login.js', array());
        wp_localize_script(
            'gtm-on-login',
            'gtm_on_login_obj',
            array(
                'user_id' => get_current_user_id()              
            )
        );

    }

如果发现用户登录并使用wp_localize_script()函数传递必要的数据，我将对脚本进行排队，在我的示例中是当前用户的id。

在gtm_on_login.js里面，

var url = window.location.toString();
if(url.indexOf("login=success") > -1) {
   
  // Any Javacript to execute on Login, in my case GTM Code

   var trimmed_uri = url.replace('?login=success','');
   window.history.replaceState({}, document.title, trimmed_uri); 
} 

因此，现在使用上面的一组代码，只有当用户登录时，gtm_on_login.js才会加载到页面上，而基于查询的参数check只在用户登录时执行一次。以上代码中的以下2行从url中移除查询参数，以防止在同一页重新加载时重新执行脚本。

var trimmed_uri = url.replace('?login=success','');
window.history.replaceState({}, document.title, trimmed_uri);