Esconder elementos en WordPress

En esta ocasión voy a escribir una entrada breve, seguro que la mayoría ya conocéis este truquito, pero por si a alguno le sirve de ayuda.

En primer lugar me he decidido a escribir esta entrada rápida porque acabo de actualizar a WordPress 5.0.1 desde la 4.9.8, si, sé que debería esperar hasta finales de enero o febrero, pero si no pruebo en mi propia web, que además está bastante controlada…

Tengo dos webs más de clientes en la 5.0.1, la primera porque se autoactualizó, aunque en esa ya se habían realizado pruebas. La segunda porque era algo muy sencillo y sin posible punto de fallo.

El siguiente cambio relevante aquí será pasar a PHP 7.3, espero que en unos días, cuando saque un ratito libre, y así disfrutar de un pequeño aumento en el rendimiento.

Pero vamos al tema de esta entrada. Un cliente (y amigo) me cuenta que tiene una publi que aparece en los posts después del segundo párrafo, que si podría hacer que en algunos posts concretos no apareciese.

Ok, hay muchas maneras de plantearse la tarea, el Tema usado es Newspaper en su versión 7.1.1 debido a un problema de incompatibilidad con un plugin de Newsletter. Además no tiene un tema hijo, esa es una tarea urgente a realizar…

La publicidad se gestiona directamente desde el tema, que tiene varios recuadros para anuncios. Se utiliza uno para anuncios inline y se marca después del 2º párrafo.

Podríamos ir al código para modificar que el javascript no se cargase en esas entradas que no queremos (pero otros anuncios de la barra lateral si los queremos), vamos, que hay muchas opciones.

Pero vamos a utilizar la más sencilla que es ocultar los anuncios en esas páginas concretas. No es la más optimizada, ya que el anuncio se carga igual, simplemente se oculta mediante CSS, pero es algo rápido, que era la idea.

Distinguir entradas por CSS

WordPress en la etiqueta body de cada post inserta una clase css con el id de la misma tipo postid-29991.

Body css class

También en el div (o article) que envuelve el artículo tenemos clases CSS con la categoría y etiquetas, que nos sería más útil para por ejemplo ocultar la publi en toda una categoría o en todas las entradas que tengan una determinada etiqueta.

De momento lo hemos hecho por id si hay que extenderlo a más posts veremos si hay una categoría o etiqueta para poder separar esas entradas.

Con estas premisas ya está casi todo hecho, miramos los ids de los posts y en esos mediante CSS ocultamos el anuncio, al que previamente le hemos añadido una clase nuestra:

Anuncios Newspaper
Anuncio en el que hemos añadido nuestra clase CSS personalizada

Ocultar contenido con CSS

Sólo nos queda añadir el CSS que ocultará los divs de los anuncios sólo si están debajo de una de las clases indicadas (que tendrás las entradas que hemos copiado su id):

CSS personalizado para ocultar contenido
Nuestro CSS añadido al personalizador

Y el CSS es el siguiente:

Que oculta todos los elementos que tengan una clase .cl-selective-hide-ad y dicho elemento sea hijo de otro (en nuestro caso body) con una clase postid-idDeNuestraEntrada como por ejemplo .postid-29991

Sencillo, útil y barato… si, hay mejores soluciones, pero en este caso ha cumplido con lo que necesitábamos.

Y pensad que esto lo podéis utilizar para muchas otras cosas, por ejemplo para personalizar todos los títulos de las entradas que tengan una determinada categoría o etiqueta. Las entradas con la etiqueta importante irán en rojo y fuente de 20em (no se os ocurra 😀 ). O esa entrada en concreto, con id 69, que muestre el texto de los párrafos en Comic Sans (si hacéis esto avisadme que quiero ver el resultado).

Al final me ha quedado una entrada más extensa de los que contaba, y además he utilizado un poco más rápido Gutenberg al encontrar que para escribir código en línea me basta con escribir el texto y (antes cambiaba a vista HTML e insertaba los tags <code>, si, insufrible).