Crear Shortcode para restringir partes del contenido – Parte 2

tutoriales-y-cursos-webmaster-crear-shortcode-para-restringir-partes-del-contenido--parte-2-tutoriales-y-cursos-webmaster-shortcode 

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?

 
<?php
/*
Plugin Name: OAF Restrict Partial Content Shortcode
Plugin URI: https://www.oscarabadfolgueira.com
Description: This plugin creates a [restrict_pcs] that you can use to restrict some contents of your posts or pages.
Version: 1.0
Author: Oscar Abad Folgueira
Author URI: https://www.oscarabadfolgueira.com
License: GPLv2 only
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
 
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 );
}
}
 
add_shortcode (restrict_pcs, oaf_restrict_partial_content_shortcode );

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?

tutoriales-y-cursos-webmaster-crear-shortcode-para-restringir-partes-del-contenido--parte-2-tutoriales-y-cursos-webmaster-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:

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

Entonces, lo que hacemos es modificar lo siguiente:

Por esto otro:

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í:

tutoriales-y-cursos-webmaster-crear-shortcode-para-restringir-partes-del-contenido--parte-2-tutoriales-y-cursos-webmaster-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…

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

Y va quedando así:

tutoriales-y-cursos-webmaster-crear-shortcode-para-restringir-partes-del-contenido--parte-2-tutoriales-y-cursos-webmaster-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í:

Y visualmente:

tutoriales-y-cursos-webmaster-crear-shortcode-para-restringir-partes-del-contenido--parte-2-tutoriales-y-cursos-webmaster-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:

Y vemos que si, que esto está mejor:

tutoriales-y-cursos-webmaster-crear-shortcode-para-restringir-partes-del-contenido--parte-2-tutoriales-y-cursos-webmaster-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:

 
<?php
/*
* Plugin Name: OAF Restrict Partial Content Shortcode
* Plugin URI: https://www.oscarabadfolgueira.com/crear-shortcode-restringir-partes-del-contenido
* Description: This plugin creates a [restrict_pcs] that you can use to restrict some contents of your posts or pages.
* Version: 1.2
* Author: Oscar Abad Folgueira
* Author URI: https://www.oscarabadfolgueira.com
* License: GPLv2 only
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
 
// If this file is called directly, abort.
if ( ! defined( ABSPATH ) ) {
exit;
}
 
function oaf_restrict_partial_content_shortcode( $atts, $content = null ) {
if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) {
return $content;
} else {
 
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>;
}
}
 
add_shortcode (restrict_pcs, oaf_restrict_partial_content_shortcode );

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í:

Y ahora el contenido del fichero css “oaf-restrict-partial-content-shortcode.css“:

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:

Lo que hemos hecho ha sido añadir la clase “oaf_restrict_content” en el <div>.

Además, hemos utilizado la función “wp_enqueue_style” del API de WordPress para inyectar el fichero css que se indica como segundo parámetro.

Descargar el plugin

Pues, como no, aquí tenéis el plugin para descargar. Eso si, debes estar registrado para poder descargarlo, ok?

[restrict_pcs]Descargar plugin “OAF Restrict Partial Content Shortcode – Versión 1.2[/restrict_pcs]

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!

Random Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*
*