Comprobar si un usuario ha iniciado sesión en WordPress

En este artículo veremos como leer Cookies con Javascript y añadir estilos al body si estas logado. También mostramos cómo crear un EndPoint en la REST API de WordPress y realizar acciones según su respuesta.

Comprobar si el usuario esta logado de la forma más óptima

En muchas ocasiones necesitas saber si un usuario que navega por tu site está logado. La comprobación más rápida y que no afecte al rendimiento de la página es hacerlo mediante JavaScript mirando en la cookie wp-settings-time.

Con el siguiente código podemos verificar si estamos logados, y si es así, añadirle una estilo a la etiqueta Body para identificarlo y darle estilo con CSS.

if ( document.cookie.indexOf('wp-settings-time') !== -1) {
    document.body.classList.add( 'logged-in' );
}

Comprobar si el usuario está logado mediante JavaScript

Existen muchas formas de comprobar si estas logado. La más usada es mediante una petición AJAX a «/wp-admin/admin-ajax.php». Esta manera es la más sencilla y más cómoda, pero consume muchos recursos del servidor y es una petición bastante lenta. Tienes que evitarlo sobre todo si lo vas a utilizar al inicio de la carga de la página.

La mejor manera es crear un EndPoint en la API de WordPress y hacer la petición necesaria.

Crear EndPoint en la API de WordPress

Existen infinidad de formas de crear EndPoint. El código que aquí se muestra es solo para simplificar el modo de crearlo y no complicar demasiado el código.

He creado una variable llamada «namespace» por si necesito crear más puntos de entradas y así no tener que repetirlo, o si más adelante necesito cambiarlo. Tenéis más información en REST API HandBook de WordPress.

// Añadimos el endpoint
add_action( 'rest_api_init', 'bk_add_endpoint' );

function bk_add_endpoint() {
    $namespace = 'b2b/v2/public';

    // https://tu-dominio.es/wp-json/b2b/v2/public/user-check-state
    register_rest_route( $namespace, '/user-check-state', array(
        'methods'  => 'POST',
        'callback' => 'bk_api_check_state',
        'permission_callback' => '__return_true'
    ));
}

Función que comprueba sí estamos logados

El EndPoint de nuestra API REST , llama a la siguiente función cuando recibe una petición, y devolverá «true» si esta logado, o «false» si no lo está.

function bk_api_check_state ( $request ) {
    $data = [
        'loggedin' =>  is_user_logged_in()
    ];

    wp_send_json_success( $data );
}

Si necesitas información sobre el usuario actual debes incluir un «nonce» en la petición a la API REST de WordPress. Si no lo proporcionas el usuario actual es 0 aunque hayas iniciado la sesión, más información en la documentación de WordPress

Realizar petición y acción según la respuesta del EndPoint

Ya solo quedaría realizar la petición al EndPoint que hemos creado mediante jQuery con la siguiente función.

Una vez que recibamos la respuesta, realizamos la acción que deseemos, como añadir una clase al Body, mensajes, etc.

$.ajax({
   url: `${wpApiSettings.root}b2b/v2/public/user-check-state`,
  method: 'POST',
  beforeSend: function ( xhr ) {
      xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
  },
  data:{}
 }).done( function ( resp ) {
    if (resp && resp.success && resp.data) {
        isLoggedIn = resp.data.loggedin;
        if (isLoggedIn){
            // Código a ejecutar cuando Sí estamos logado
        } else {
           // Código a ejecutar cuando NO estamos logado
        }
    }
});

Conclusión

Siempre debemos evitar utilizar peticiones Ajax a través de «/wp-admin/admin-ajax.php», sobre todo al inicio de la carga de la página, puesto que suele ser una petición lenta y penalizará nuestro resultado en PageSpeed.

Además de que si queremos mostrar al usuario puede que note el cambio.