Cómo detectar la página de inicio usando JavaScript

Question

Cómo detectar la página de inicio usando JavaScript

14 mar 2017, 12:34:35

Vistas: 19.8K

Votos: 4

He intentado usar is_front_page() pero creo que esa es la forma de hacerlo en PHP. Quizás no lo estoy llamando correctamente porque, por supuesto, no obtengo respuesta. Tal vez me faltan conocimientos detallados sobre las formas de acceder a las clases de WordPress con JavaScript.

Lo que intento hacer es simple. Si estoy en la página principal o página de inicio, agregar esta clase; si no lo estoy, agregar esta otra clase. Es muy simple pero no está funcionando. Incluso he intentado usar una etiqueta span pseudo y agregar la clase a esa, pero no funciona.

SunRhythms

53

tipos de entradas personalizadas publicaciones css javascript

Comentarios

¿Has probado usar is_home en su lugar? WordPress maneja las páginas de inicio compuestas por publicaciones recientes de manera diferente a las páginas estáticas. Además, WordPress ya agrega automáticamente clases para la página de inicio, así que tal vez no necesites más clases que esas.

physalis

14 mar 2017 12:49:18

Bueno, eso podría funcionar, pero creo que lo que estoy intentando hacer es acceder a una función PHP mediante jQuery, que es el principal conflicto (creo).

SunRhythms

14 mar 2017 12:59:04

Bueno, honestamente, no sé qué es una "ficción PHP", pero podrías usar la función has_class() de jQuery para apuntar específicamente a la página de inicio. O, si deseas que un script se ejecute exclusivamente en la página de inicio, podrías encolar el script mediante PHP con la condición is_home()/is_front_page().

physalis

14 mar 2017 13:10:37

cf. https://api.jquery.com/hasclass/

physalis

14 mar 2017 13:17:48

Todas las respuestas a la pregunta

Usando jQuery:

jQuery(document).ready(function($){
    if ( $('body').hasClass('home')) {
        $('.menu').addClass('absolute');
    } else {
        $('.menu').addClass('fixed');
    }
});

Dragos Micu

213

14 mar 2017 13:34:11

Comentarios

Obtener por nombre de clase no siempre es compatible y nunca he tenido suerte con ello.

SunRhythms

14 mar 2017 14:09:50

Revisa la respuesta actualizada usando jQuery.

Dragos Micu

14 mar 2017 14:22:26

Buena respuesta, pero ¿hasClass no es ya como un condicional en sí mismo? ¿Necesitas el if? Lo he visto escrito sin él solo digo. Al escribir jQuery para WordPress hay que cambiar el formato. Pero gracias. Me lleva a algún lugar, intentaré escribir algo y ojalá funcione. Por cierto, todo esto es para encajar en un documento jQuery ya funcional y estructurado para un plugin en el que solo estoy usando una condición menor porque mi página de inicio tiene un rotador de fondo de pantalla completa que necesita que mi cabecera esté encima en posición absoluta. Solo ocurre en la página principal.

SunRhythms

14 mar 2017 14:44:55

@SunRhythms Como puedes ver en la documentación, el método hasClass devuelve un valor booleano, por lo que usas la sentencia IF para añadir una clase cuando es Verdadero, ELSE (si no) una clase diferente cuando es Falso.

https://api.jquery.com/hasclass/

Dragos Micu

14 mar 2017 15:32:35

Puedes usar la clase del ID de página. Si agregas la clase page-id en tu archivo JavaScript, tal vez resuelvas tu problema.

descripción de la imagen

ferdouswp

22

14 mar 2017 12:49:24

Comentarios

Sí, conozco la clase de página. ¿Debería usar un booleano para que si el ID de página === home entonces tal y tal? La dirección CSS es muy larga incluso para el área o div que es solo el headerwrapper

SunRhythms

14 mar 2017 12:54:46

Puedes usar algo como

if( $('body.page-id-6').length ){ // Hacer algo }

ferdouswp

15 mar 2017 08:18:56

La respuesta marcada funciona... es básicamente lo mismo. gracias

SunRhythms

17 mar 2017 04:51:50

RRikesh 5.66K · Accepted Answer · 2017-03-14T14:37:28Z

Acabo de publicar una respuesta a otra pregunta sobre cómo hacerlo.

En tu caso, asumiendo que usaste body_class() en tu tema, tu página de inicio debería tener una etiqueta <body> con la clase home.

Entonces en tu JS, puedes hacer:

if( $('body.home').length ){
  // Hacer algo
}

RRikesh

5.66K

14 mar 2017 14:37:28