Cómo desarrollar un complemento simple de Content Locker usando WordPress

Aunque algunos consideran que compartir es uno de los principios básicos de Internet, hay ocasiones en las que solo queremos compartir información con un determinado grupo de personas..

Esta información, llamémosla "contenido premium" para todos los propósitos y propósitos, solo se compartirá con los usuarios que nos brinden algo.en cambio. Este "algo" puede ser una dirección de correo electrónico, una donación de PayPal o simplemente una acción en Facebook.

En este tutorial, explicaré cómo crear un complemento de bloqueo de contenido que con un simple shortcode nos permitirá elegir qué contenido queremos que sea premium.

Cubriremos dos ejemplos:

Una vez, el ejemplo será un simple código breve que nos permitirá mostrar contenido a los usuarios registrados en el sitio.
El otro código abreviado requerirá que el usuario comparta la URL del contenido en Facebook para poder leer el resto del contenido..

En WordPress Social Invitations usamos un casillero 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 un tema y / o stylesheeet, recomiendo crear un complemento para agregarlo a su sitio. Este método mantiene todo en un solo lugar y le permite utilizar el código abreviado 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 subir tu plugin.

Configurando el complemento

Comience por abrir un nuevo archivo en su editor de texto y asígnele un nombre. En los ejemplos que veremos en este artículo, verás que he nombrado el mío wptuts-content-locker.php Pero puedes llamar tuyo como quieras..

En el archivo, inserte el siguiente código:

Esto configura su complemento y le dice a WordPress su nombre y versión.
Añadiendo la función de código corto
Debajo del comentario de apertura, debemos agregar la función que creará el shortcode y lo enganchará a la add_shortcode gancho de acción:
// registrar el código corto que acepta un parámetro add_shortcode ('contenido-premium', 'wptuts_content_locker'); // función de la función de shortcode wptuts_content_locker ($ atts, $ content) extract (shortcode_atts (array ('method' => ", $ atts)); global $ post; // si el método no es 'facebook', entonces verifique el usuario registrado si ('facebook'! = $ method) if (is_user_logged_in ()) // Devolvemos el contenido devuelto do_shortcode ($ content); else // Devolvemos un enlace de inicio de sesión que redireccionará a este publicar después de que el usuario está registrado volverNecesitas identificación)). '"> Inicia sesión para ver este contenido
';  // Estamos utilizando el método de facebook else // Compruebe si ya tenemos una cookie configurada para esta publicación if (isset ($ _COOKIE ['wptuts-lock'] [$ post-> ID])) // Devolvemos el contenido devolver do_shortcode ($ contenido); // Le pedimos al usuario que le guste la publicación para ver el contenido else return '
Por favor comparte esta publicación para ver el contenido. 
'; 
Ahora podemos usar nuestro código abreviado así:
[contenido premium] El contenido premium va aquí [/ contenido premium]
¡Pero espera! Vamos a echar un vistazo detallado al código de arriba. 
Como puede ver, nuestro código abreviado acepta un argumento que dividirá nuestro código en dos secciones. Este argumento al que llamé "método" se diferencia entre usar el enfoque "Me gusta en Facebook" o un "simple usuario registrado"..
Ambos métodos son similares en la lógica, como se puede ver en el siguiente gráfico:
Si el usuario no está registrado, estamos mostrando un enlace de inicio de sesión usando wp_login_url Funciona y también pasamos el post / page url. De esa manera, después de que el usuario inicie sesión, será redirigido de nuevo a la publicación.
El método de Facebook es un poco más complejo e implica el uso de cookies. Los usamos para almacenar la ID de la publicación, para saber qué publicaciones compartió el usuario y cuáles no..
El archivo de JavaScript
También necesitamos algún javascript que maneje la creación de cookies y la devolución de llamada de Facebook. Vamos a crear un archivo llamado script.js y pega el siguiente código:
 La función createCookie (nombre, valor, días) var expira; if (days) var date = new Date (); date.setTime (date.getTime () + (days * 24 * 60 * 60 * 1000)); expires = "; expires =" + date.toGMTString ();  else expires = "";  document.cookie = escape (name) + "=" + escape (value) + expires + "; path = /";  (function ($) $ (function () FB.Event.subscribe ('edge.create', function (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']', verdadero, 9999 ); location.reload (););); (jQuery));
En este script, adjuntaremos una función de devolución de llamada al FB. evento de edge.create. Específicamente, esta función creará la cookie que usamos en nuestro script principal para verificar si el usuario ha compartido la publicación. Una vez que se crea la cookie, el script volverá a cargar la página para mostrar el contenido premium.
Agregando los scripts a nuestro complemento
Ahora necesitamos agregar nuestro archivo de script al complemento, pero primero vamos a crear un archivo CSS muy básico para personalizar nuestro complemento.. 
Crear un archivo llamado style.css y añada el siguiente código:
/ * Hoja de estilo para Tuts + Content Locker Shortcode * / .wptuts-content-locker width: 80%; bloqueo de pantalla; borde: 3px punteado #ccc; relleno: 20px; text-align: center; margen: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget desbordamiento: oculto; 
Ahora vamos a registrar nuestros scripts en el wp_enqueue_scripts gancho:
// Registre la hoja de estilo y javascript con el gancho 'wp_enqueue_scripts', que se puede usar para la parte delantera de CSS y JavaScript add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // función que pone en cola la secuencia de comandos solo si se utiliza el shortcode función wptuts_content_locker_scripts () global $ post; wp_register_style ('wptuts_content_locker_style', plugins_url ('style.css', __FILE__)); wp_register_script ('wptuts_content_locker_js', plugins_url ('script.js', __FILE__), array ('jquery'), ", true); if (has_shortcode ($ post-> post_content, 'premium-content')) wp_enqueuestyle (' wptuts_content_locker_style '); wp_enqueue_script (' wptuts_content_locker_js-fb ',' http://connect.facebook.net/en_US/all.js#xfbml=1 ', array (' jquery '), ", FALSE); wp_enqueue_script ('wptuts_content_locker_js'); wp_localize_script ('wptuts_content_locker_js', 'wptuts_content_locker', array ('ID' => $ post-> ID)); 
Tenga en cuenta que estamos utilizando el has_shortcode función. 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 localize_script Función para pasar correctamente la ID de la publicación al archivo JavaScript.
Conclusión y Código
En aproximadamente 120 líneas de código, creamos un complemento de bloqueo de contenido simple pero muy útil. Eso fue fácil, ¿verdad??
La belleza de este complemento es que puede ajustarlo para que funcione con cualquier método que pueda pensar. Por ejemplo, en lugar de Facebook, puedes pedirle a los usuarios que hagan un Tweet acerca de tu sitio, agreguen un enlace de donación de PayPal o cualquier otra cosa que puedas ver..
Puede obtener el código de GitHub o probar una demostración.



		
			
	   
	




Código