Crear Shortcode para restringir partes del contenido – Parte 2

Crear Shortcode para restingir el acceso a partes del contenido - Parte 2

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?

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 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.

  1. Crear el fichero css con nuestros estilos en un fichero para la ocasión.
  2. 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!

Ver parte 1

Crear Shortcode para restringir partes del contenido – Parte 1

Crear Shortcode para restingir el acceso a partes del contenido-parte 1

En esta ocasión vamos a ver cómo crear un shortcode para restringir partes del contenido de nuestras páginas o entradas de WordPress.

¿De qué estamos hablando?

Es posible que nos interese restringir ciertas partes de algunas página o entradas de nuestro blog por los motivos que sean.

Pero qué mejor que poner un ejemplo real, ¿Verdad?

Un ejemplo real

Os pongo el ejemplo de esta misma entrada en esta web.

Como comenté en algún artículo anterior, estamos comenzando una andadura que será larga y muy interesante en los terrenos de WordPress por lo que a parte de comentar y explicar los códigos «Snippets«, también daré la opción de descargar el mismo Snippet en formato plugin para que no tengamos nuestro fichero functions.php con tantas cosas e incluso podamos llegar a perderlo si algún día cambiamos de tema. Que pasará tarde o temprano.

Por lo tanto, al final de esta entrada daré la opción de descargar el plugin en cuestión. Ah! pero eso si! sólo para usuarios registrados.

No hay que preocuparse porque de momento es todo «by the face«. Simplemente quiero saber si esto que estoy haciendo sirve de algo y más adelante puedo montar algunos proyectos que tengo en mente y de los cuales os informaré de antemano.

Entonces el lo que os digo. cierta parte de esta entrada estará restringida a usuarios no registrados.

Esto es lo que vamos a hacer ahora.

La función que maneja el asunto

Eso es, vamos a escribir la función que maneje la lógica de este snippet o plugin.

Creamos una función que en mi caso la llamaré: «oaf-restrict-partial-content-shortcode«. Nada original, ya lo se…

function oaf_restrict_partial_content_shortcode(  ) {
}

Pues nada, ya la tenemos creada. Pero claro, habrá que escribir algo de lógica dentro, verdad?

La idea es que recoja el «contenido» y en función de que el usuario esté logueado o no, muestre una cosa u otra.

Por ejemplo, vamos a comprobar si:

  • El usuario está logueado (tiene que estar logueado para ver el contenido dentro del shortcode).
  • Si el contenido no es «null«. Es decir que tiene contenido.
  • Si no es un «feed«.

Estas son algunas de las comprobaciones que podemos realizar y para este ejemplo nos puede valer.

En posteriores tutoriales volveremos sobre este asunto para ir mejorando lo que hemos hecho.

Entonces, si el usuario está logueado Y el contenido no es «null» Y además no se trata de un «feed«, entonces la función retornará con contenido.

Pero si no es así, si no cumple alguna de las 3 condiciones anteriores, devolverá un texto en plan: «Este contenido sólo es visible para usuarios registrados. Regístrate!«.

Venga, vamos allá.

function oaf_restrict_partial_content_shortcode( $atts, $content = null ) {
	if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) {
		return $content;
	} else {
		return __( 'Upps! Este contenido sólo está disponible para usuarios registrados.', 'oaf_rpcs' );
	}
}

Es muy sencillo por lo que doy por sentado que se entiende correctamente el código.

Y el Shortcode, ¿Dónde está?

Eso es, nos falta añadir el código o función para crear el Shortcode.

Esto también es sencillo, lo único que tenemos que hacer es utilizar la función:

add_shortcode ();

Ya bueno, pero así sin más no haría nada.

Necesitamos 2 parámetros. Que son:

  • El nombre del Shortcode.
  • La función que gestiona el código del Shortcode.

Entonces:

add_shortcode ('restrict_pcs', 'oaf_restrict_partial_content_shortcode' );

Ahora si, ahora ya lo tenemos todo.

El Snippet completo

Este es el código completo de este Snippet:

Y ahora, como he prometido antes, a continuación disponéis del plugin que realiza lo mismo que el Snippet pero sin tener que incluir nada en nuestro functions.php.

Ya sabéis, lo descargáis y lo instaláis en vuestro WordPress.

Cómo usarlo

Para usar este shortcode que acabamos de crear tenemos que hacer lo mismo que con los demás shortcodes, es decir, introducir el contenido restringido dentro del comienzo y el fin del shorcode.

Por ejemplo. Si queremos restringir:  «Este contenido es super importante y tiene que estar restringido«. Haremos lo siguiente:

[restrict_pcs]Este contenido es super importante y tiene que estar restringido[/restrict_pcs]

Si el usuario está registrado y logueado, no tendrá ningún problema en ver el contenido restringido como muestro en la siguiente captura:

Plugin OAF Restrict Partial Content Shortcode
Plugin OAF Restrict Partial Content Shortcode 2

Ahora bien, si el usuario visitante no no está logueado, es decir, que no tiene cuenta en nuestro WordPress, verá el siguiente mensaje de aviso:

Perfecto. Ya lo veis!!

Bueno, al final este tutorial se a alargado un poco pero me gusta explicar las cosas poco a poco.

¿Y ya está?

Bueno, estar está. Jajaja… Pero no está ni por asomo visible o para andar enseñándolo por ahí.

Es por eso que estoy preparando una guía completa que compelte todo el proceso de la realización de este plugin. Eso sí, algunos contenidos estarán restringidos.

Haremos muchas cosas. Como por ejemplo darle un poco de estilo al mensaje, prepararlo para la traducción a otros idiomas, traducirlo al Español, Crear el «readme.txt«, etc…

Y al final de la guía realizaremos todo el proceso para publicarlo en el repositorio de http://www.wordpress.org.

¿Te animas?

Espero que te animes a seguir esta guía y otras que tengo en lista de espera.

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!

Ver la parte 2

Ir al contenido