Estoy desarrollando un sitio web con un gran banner que se muestra de manera diferente en cada página. La imagen de fondo no se muestra cuando coloco la imagen de fondo en el selector de página, pero funcionará en el código CSS del banner principal.

Esto es para mi sitio de WordPress (WordPress 5.2) que ejecuta un tema completamente personalizado desarrollado desde cero por mí. Ejecutando la versión PHP: 7.0.33.

.page-id-15 .bannerImage {} .postid-15 .bannerImage {}

He intentado tanto la imagen de fondo como el color de fondo con Chrome Developer Tools que no muestra que está viendo este estilo.

He confirmado la página correcta / ID de publicación de 15.

Puse la imagen / color de fondo en .bannerImage y se muestra como se esperaba.

No estoy seguro de qué más probar. Esto debería ser fácil.

/// Esto mostrará la imagen de fondo y / o el color ///

.bannerImage {
    /* Set a specific height */
    height: 337px;

    /* Position and center the image to scale nicely on all screens */
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}   

/// Esto no mostrará la imagen de fondo y / o el color (mostrando el estilo de color) ///

.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }

/// Código HTML ///

<div class="bannerImage">
   <h2>Contact Us</h2>
</div>

/// URL de administrador de Wordpress para mostrar el número correcto de página / publicación ///

http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit

/// URL ///

http://box5308.temp.domains/~naiedmon/contact-us

Espero ver un banner de 337 píxeles de alto con un ancho del 100% que sea diferente en cada página. Lo que realmente veo es un espacio de banner blanco en blanco con la pantalla H2. Chrome solo genera el selector .bannerImage y no el .page-id-15 .bannerImage o .postid-15 .bannerImage selector.


***** actualizado *****

A continuación, agregué el código que veo cuando miro las Herramientas para desarrolladores de Chrome. A diferencia de las sugerencias con las que estoy completamente de acuerdo con que deberían funcionar (lo he intentado), el navegador no lee y muestra mi etiqueta selectora de .page-id-15 .bannerImage {}. También intenté .postid-15 .bannerImage {}. Aquí es donde me tiene perplejo.

Captura de pantalla de código de las herramientas de desarrollador de Chrome

0
grover_blue 10 may. 2019 a las 23:25

3 respuestas

La mejor respuesta

Pude obtener ayuda en el foro de WordPress.org y pensé que pondría la respuesta aquí en caso de que alguien más tenga este problema.

Lo que hice:

Entonces, por alguna razón, decidí escribir mi etiqueta corporal de esta manera (y seguí pasando por alto el error):

<body class="body" <?php body_class(); ?> >.

No necesito llamar a la clase "cuerpo". Una vez que eliminé class="body", se escribió la cadena de cuerpo correcta y ahora puedo llamar a estilos por ID de página.

La etiqueta de cuerpo correcta en mi caso se ve así:

<body class="page-template page-template-page_fullwidth page-template-page_fullwidth-php page page-id-394 page-parent logged-in admin-bar no-customize-support" >

El consejo exacto que recibí:

El problema principal es que no estás llamando a la función body_class () en tu tema Una vez que haces eso, las clases de cuerpo adecuadas (como page-id-15, etc.) se asociará con el elemento body. Ahora mismo, su elemento del cuerpo se ve así: <body class="topgradient">

Si cambia su sitio a otro tema de WordPress, y luego inspecciona el elemento del cuerpo, verá cómo debe verse.

¡Estoy muy agradecido por comunidades como esta y otras!

0
grover_blue 14 may. 2019 a las 17:42

WordPress a veces reescribe su CSS. He tenido este problema antes. intente usar "! important" en todos sus atributos CSS. Esto probablemente funciona.

0
Hossein Ghanaati 10 may. 2019 a las 21:35

He tenido que seguir adelante y encontrar otra solución a mi problema. Lamentablemente, no he podido trabajar con éxito con identificadores de página como selectores CSS. Mi solución al problema fue agregar clases adicionales y llamarlas de esa manera.

Ejemplo estar en mi página acerca de hacer un selector .about y adjuntar mi imagen de fondo a esa clase. Una solución simple, pero esperaba entender por qué no podía hacer que la identificación de la página funcionara como selector.

¡Adelante y hacia arriba! ¡Gracias a la comunidad por sus respuestas e intentos de ayudarme en esto!

0
grover_blue 14 may. 2019 a las 17:14