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?
¿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?
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í:
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í:
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:
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:
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 hacer más cambios de estilo.
A continuación, el nuevo Snippet:
Ahora vamos a hacer lo mismo pero poniendo todo el CSS en un fichero a parte
Añadir estilo forma 2
Como ya he comentado antes, la forma más limpia y más ordenada de escribir CSS es hacerlo en un fichero a parte.
Para hacer eso tenemos que hacer dos cosas.
- Crear el fichero css con nuestros estilos en un fichero para la ocasión.
- Inyectar dicho fichero en nuestro plugin.
Este segundo método está mas enfocado a la creación de un plugin puesto que en un plugin añadimos ficheros en los directorios correspondientes.
Claro que si queremos añadirlo en forma de Snippet en nuestro functions.php podríamos hacerlo de la primera forma o si no también podemos añadir el código CSS al fichero style.css.
También podemos hacerlo en un fichero a parte y ubicarlo en nuestro theme. Posteriormente, cuando lo inyectemos tendremos que indicarle bien la url de este fichero.
Pero aquí nos centramos en la creación del plugin y para ello primero creamos el ficheros CSS con los estilos.
Por lo tanto, la línea de retorno la cambiamos y añadimos una clase css así:
return '<div class="oaf_restrict_content"><h4>Upps, Este contenido sólo está disponible para usuarios registrados</h4></div>';
Y ahora el contenido del fichero css «oaf-restrict-partial-content-shortcode.css«:
.oaf_restrict_content {
background-color: #F5F2F2;
padding: 5%;
}
.oaf_restrict_content h4 {
color: red;
text-align:center;
}Ya veis que es muy sencillo.
Como ya os digo, podéis modificar a vuestro gusto y necesidades.
Ahora pongo el código del fichero php completo y comento algo a continuación:
<?php /* * Plugin Name: OAF Restrict Partial Content Shortcode * Plugin URI: https://oscarabadfolgueira.com/crear-shortcode-restringir-partes-del-contenido-parte-2 * Description: This plugin creates a
Continuara…
Claro que si. Aquí no acaba la cosa!
En próximos tutoriales de esta guía vamos a hacer más cosas.
Quiero Feedback
Pues eso, quiero que me comentéis cómo lo veis, que os gustaría que explicara mejor. Si voy muy lento, etc…
Bueno, por hoy lo dejamos aquí y ya seguiremos otro día.
Saludos y mucho ánimo!
