Continuamos con el tutorial o guía sobre cómo crear un shortcode para restringir partes del contenido – Parte 2.

Recordemos…

Recordamos dónde lo dejamos antes de nada, ok?


Recordemos que simplemente comprobamos que si el usuario está registrado y alguna cosa más y si lo está, pues le mostramos la información. Pero si el usuario no está registrado no le mostramos la información o datos restringidos y en su lugar mostramos un mensaje para que sepa que no tiene acceso a ese contenido.

¿Qué vamos a hacer ahora?

En esta segunda parte de esta guía vamos a darle un poco de estilo al mensaje.

Si os fijáis, no le hemos dado ningún estilo por lo que queda un poco “soso”, ¿Verdad?

mensaje de aviso - contenido restringido

En la image anterior se ve claramente que es muy posible que el usuario ni se de cuenta del mensaje.

Es por eso que vamos a darle un poco de estilo para que se vea mejor. Vamos allá!

Añadir estilo forma 1

La forma más sencilla aunque menos aconsejable sigue siendo añadir los estilos css en el mismo código html.

Como digo no es la forma más aconsejable de hacerlo ni la más limpia pero ahora vamos a hacerlo así y después lo haremos en un fichero “.CSS” a parte para que esté todo más limpio y se entienda mejor.

Tampoco vamos a complicarnos mucho la vida con esto por lo que lo que vamos a hacer es darle un tamaño más grande al texto del aviso y un color algo más visible.

Creo que para empezar nos sirve con el siguiente estilo:

<h4 style="color: red;">

No es mucho de momento pero nos va sirviendo para ir comprendiendo el funcionamiento.

Entonces, lo que hacemos es modificar lo siguiente:

return ( 'Upps, Este contenido sólo está disponible para usuarios registrados. Regístrate!');

Por esto otro:

return '<h4 style="color: red;">Upps, Este contenido sólo está disponible para usuarios registrados</h4>';

Como digo, esto es sólo un ejemplo y podemos adaptarlo a nuestras propias necesidades.

Total, que con el cambio que acabamos de realizar deberíamos tener algo así:

mensaje contenido restringido rojo y grande

Bueno, algo mejor está, ¿Verdad?

Ahora yo creo que el usuario se dará cuenta del aviso y lo leerá porque está bien grande y bien rojo.

Para que quede un poco mejor, le voy a añadir un salto de linea. Para que no quede tan justo de espacio con la siguiente línea de texto.

Sin más, añado un <br /> y listo:

Ah, bueno, ya que estamos, lo centramos…

return '<div><h4 style="color: red; text-align: center;">Upps, Este contenido sólo está disponible para usuarios registrados</h4><br /></div>';

Habréis notado que lo he metido en un <div>. Ya veremos porqué en un momentito…

Y va quedando así:

mensaje contenido restringido rojo y grande 3

Yo creo que queda un poco mejor que antes.

Pero no lo dejamos así, vamos a darle otra vuelta más.

Añadir un color de fondo

Eso es. Porque sigue quedando un pelín sosillo, vamos a darle un color de fondo clarito para que se note más el aviso.

Pues eso, toca añadir un “background-color” al estilo del <div>.

Tened en cuenta que yo no soy muy bueno para esto de los colores osea que no me lo tengáis en cuenta, ok?

Ya he elegido este color:

Y con el cambio, la linea quedaría así:

return '<div style="background-color: #F5F2F2;"><h4 style="color: red; text-align: center;">Upps, Este contenido sólo está disponible para usuarios registrados</h4></div>';

Y visualmente:

mensaje contenido restringido rojo y grande 4

Bueno, no está mal. Es diferente.

Notad que he quitado el <br />.

Pero vamos a darle un poco de espacio con un padding:

return '<div style="background-color: #F5F2F2; padding: 5%;"><h4 style="color: red; text-align: center;">Upps, Este contenido sólo está disponible para usuarios registrados</h4></div>';

Y vemos que si, que esto está mejor:

mensaje contenido restringido rojo y grande 5

No queda mal o por lo menos queda algo mejor que antes para que el visitante se de cuenta del aviso.

De momento dejamos aquí y no vamos a hac