Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Cómo desarrollar un plugin de bloqueo de contenido simple usando WordPress

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Andrea J (you can also view the original English article)

Aunque algunos ven el compartir como uno de los principios fundamentales de Internet, hay momentos en los que solo queremos compartir cierta información con un determinado grupo de personas.

A esta información llamémosla "contenido prémium" para cualquier fin, solo se compartirá con los usuarios que nos den algo a cambio. Este "algo" puede ser una dirección de correo electrónico, una donación de PayPal, o simplemente que compartan en Facebook.

En este tutorial, explicaré cómo crear un plugin de bloqueo de contenido que con un código corto simple nos permitirá elegir qué contenido queremos hacer prémium.

Usaremos estos dos ejemplos:

  1. Uno de los ejemplos será un código corto simple que nos permitirá mostrar contenido a los usuarios que están registrados en el sitio.
  2. El otro código corto requerirá que el usuario comparta la URL del contenido en Facebook para poder leer el resto del contenido.

En WordPress Social Invitations utilizamos un bloqueador de contenido muy similar que muestra el contenido solo a los usuarios que invitaron a sus amigos.

Nota: En lugar de agregar código al archivo de funciones de una hoja de estilo y/o tema, recomiendo crear un plugin para agregarlo a tu sitio. Este método mantiene todo en un solo lugar y te permite usar el código corto en cualquier otro sitio.

Lo que necesitarás para este tutorial

Para completar este tutorial, necesitarás:

  • un sitio con WordPress instalado
  • un editor de código
  • opcionalmente, un programa FTP para cargar tu plugin

Configuración del plugin

Empieza abriendo un nuevo archivo en tu editor de texto y dándole un nombre. En los ejemplos que vamos a ver en este artículo, verás que llamé al mío wptuts-content-locker.php pero puedes llamar al tuyo como quieras.

En el archivo, inserta el siguiente código:

Esto configura tu plugin y le informa a WordPress su nombre y su versión.

Añadir la función de código corto

Debajo del comentario inicial, debemos agregar la función que creará el código corto y conectarlo al gancho de acción add_shortcode:

Ahora podemos usar nuestro código corto, así:

[premium-content method=""]El contenido prémium va aquí[/premium-content]

¡Pero espera! Revisemos el código anterior detalladamente.

Como puedes ver, nuestro código corto acepta un argumento que dividirá nuestro código en dos secciones. Este argumento que llamé "método" nota la diferencia entre usar el enfoque "Me gusta en Facebook" o una verificación de "usuario registrado simple".

Ambos métodos son similares en la lógica como puedes ver en el siguiente gráfico:

Si el usuario no está registrado, mostramos un enlace de inicio de sesión usando la función wp_login_url y también pasamos la URL de la publicación/página. De esa forma, después de que el usuario inicie sesión, será redirigido a la publicación.

El método de Facebook es un poco más complejo e implica el uso de cookies. Las usamos para almacenar el ID de la publicación, con el fin de saber qué publicaciones compartió el usuario y cuáles no.

El archivo JavaScript

También necesitamos algo de javascript que maneje la creación de cookies y la devolución de llamada de Facebook. Creemos un archivo llamado script.js y peguemos el siguiente código:

En este script, adjuntamos una función de devolución de llamada al FB edge.create event. Específicamente, esta función creará la cookie que usamos en nuestro script principal para verificar si el usuario compartió la publicación. Una vez creada la cookie, el script volverá a cargar la página para mostrar el contenido prémium.

Agregar los scripts a nuestro plugin

Ahora necesitamos agregar nuestro archivo de script al plugin, pero crearemos primero un archivo CSS muy básico para darle estilo a nuestro plugin.

Crea un archivo llamado style.css y agrega el siguiente código:

Ahora registremos nuestros scripts en el gancho wp_enqueue_scripts:

Ten en cuenta que estamos utilizando la función has_shortcode. De esa manera incluiremos los archivos JavaScript y CSS solo cuando sea necesario y no en todas las páginas de nuestro sitio.

También aprovechamos la función localize_script para pasar correctamente el ID de la publicación al archivo JavaScript.

Conclusión y código

En aproximadamente 120 líneas de código, creamos un plugin de bloqueo de contenido simple pero muy útil. Eso fue fácil, ¿verdad?

La belleza de este plugin es que puedes ajustarlo para que funcione con cualquier método que se te ocurra. Por ejemplo, en lugar de un me gusta de Facebook, puedes pedirle a los usuarios que twitteen sobre tu sitio, agregar un enlace de donación de PayPal (el enlace de pago lo añades tú para que ellos donen) o cualquier otra cosa que puedas imaginar.

Puedes obtener el código de GitHub u obtener una demostración.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.