Como crear plug-in encuesta para wordpress

Posted on 3 of agosto, 2015 by admin in Wordpress

Los plug-in son pequeñas aplicaciones que podemos agregar y quitar de forma dinámica a nuestro wordpress. Hay infinidad de plug-in en wordpress para todo lo que necesitemos existe un plug-in, en pocas ocasiones tendremos que crear nuestro propios plug-in, pero a manera de conocer como estos funcionas estoy creando este post para tener una guía para cuando necesitemos algo específico que necesitemos implementar en nuestro wordpress. El plug-in que crearemos es algo sencillo es una encuesta es una app donde el usuario incluye una pregunta de opinión y los usuarios selecciona una de las opciones al final se visualiza la opinión de la mayoría y se puede tomar decisiones dependiendo de los resultados obtenidos.

  1. Implementación

Para implementar necesitamos tener wordpress instalado local o en un servidor y un editor de texto, yo utilizo sublimetext para este ejemplo.

    1. Creamos la carpeta que contendrá nuestro plug-in y la creamos en el directorio de wordpress: \wp-content\plugins la documentación de wordpress recomienda que el directorio creado contenga el nombre del plug-in, lo llamaremos jprograming-poll ya que tiene que ser un nombre único para que no haya conflictos con el mismo.
    2. Ahora dentro de nuestra carpeta creada crearemos la estructura necesaria para nuestro plug-in la estructura será como se muestra a continuación:

directory

De esta forma tendremos nuestros archivos organizados para cuando deseemos realizar modificaciones se mas fácil encontrar los archivos. En este plug-in utilizaremos bootstrap para las vistas del html y jquery Ajax para la llamada al servidor, por esta razón descargamos bootstrap de la página oficial y lo descomprimimos y tendremos el directorio organizado como en la imagen anterior.

      1. Ahora creamos un archivo .php con el nombre del plug-in, lo llamaremos jprograming-poll.php, empezamos a crear el plug-in, según la documentación lo primero es agregar los comentarios lo agregamos en el archivo php que creamos anteriormente:

<?php
/*
Plugin Name: jPrograming Poll Widget
Plugin URI:  http://www.jprograming.com
Description: This plugin for create poll in the blog
Version:     1.5
Author:      Ramses2099
Author URI:  http://www.jprograming.com
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /languages
Text Domain: jprograming-poll-widget
*/
?>


En los comentarios agregamos la información que define el propósito del plug-in. Esta información es la que se desplegara cuando activamos o desactivamos nuestro plug-in en el manager de los plug-in en el wordpress:
plugin

      1. Ahora creamos la clase que se encargara de manejar nuestro plug-in la llamaremos jprograming_poll_widget esta será la responsable de manejar todas las operaciones que realizara nuestro plug-in. Esta según la documentación tiene que heredar de la clase WP_Widget clase especializada de wordpress para los plug-in. Nuestro plugin severa de la siguiente forma:

<?php

/*

Plugin Name: jPrograming Poll Widget

Plugin URI: http://www.jprograming.com

Description: This plugin for create poll in the blog

Version:     1.5

Author:     Ramses2099

Author URI: http://www.jprograming.com

License:     GPL2

License URI: https://www.gnu.org/licenses/gpl-2.0.html

Domain Path: /languages

Text Domain: jprograming-poll-widget

*/

/**

*define class jprograming-poll-widget

*/

class jprograming_poll_widget extends WP_Widget {

/**

* Register widget with WordPress.

**/

function __construct() {

parent::__construct(

‘jprograming_poll_widget’, // Base ID

__(‘jPrograming Poll Widget’, ‘jprograming-poll-widget’), // Name

array( ‘description’ => __( ‘This plugin for create poll in the blog’, ‘jprograming-poll-widget’ ), ) // Args

);

}

 

//salida en el front end

function widget($args, $instance){

}

// la entra en el back_end

function form($instance){

}

//

function update($new_instance, $old_instance){

return $instance;

}

}

//

    Agregamos un constructor y tres métodos los cuales se encarga de realizar las operaciones necesarias:

  1. Widget: este método se encarga de desplegar la información de nuestro plug-in.
  2. Form: este método se encarga de capturar la información de nuestro plug-in.
  3. Update: este se encarga de la creación, actualización de la información capturada por nuestro método form.
  • Ahora construiremos el html necesario para agregarlo los métodos del plug-in, al final tendremos una ui igual a esta:

plugin2

Agregamos el html al método form y se vera de esta forma:

function form($instance){

if (isset($instance[‘title’]) ) {

$title = esc_attr($instance[‘title’]);

$opcion1 = esc_attr($instance[‘opcion1′]);

$opcion2 = esc_attr($instance[‘opcion2′]);

$opcion3 = esc_attr($instance[‘opcion3′]);

}else{

$title = ”;

$opcion1 = ”;

$opcion2 = ”;

$opcion3 = ”;

}

?>

<p>

<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title:’); ?></label>

</p>

<p>

<input class”widefat” type=”text” id=”<?php echo $this->get_field_id(‘title’); ?>”

name=”<?php echo $this->get_field_name(‘title’); ?>”

value=”<?php echo esc_attr( $title ) ?>” style=”width:100% !important;”/>

</p>

<p>

<label id=”lbl1″ for=”<?php echo $this->get_field_id(‘opcion1′); ?>”><?php _e(‘Opcion1:’); ?></label>

</p>

<p>

<input class”widefat” type=”text” id=”<?php echo $this->get_field_id(‘opcion1′); ?>”

name=”<?php echo $this->get_field_name(‘opcion1′); ?>”

value=”<?php echo esc_attr( $opcion1 ) ?>” style=”width:100% !important;”/>

</p>

<p>

<label id=”lbl2″ for=”<?php echo $this->get_field_id(‘opcion2′); ?>”><?php _e(‘Opcion2:’); ?></label>

</p>

<p>

<input class”widefat” type=”text” id=”<?php echo $this->get_field_id(‘opcion2′); ?>”

name=”<?php echo $this->get_field_name(‘opcion2′); ?>”

value=”<?php echo esc_attr( $opcion2 ) ?>” style=”width:100% !important;”/>

</p>

<p>

<label id=”lbl3″ for=”<?php echo $this->get_field_id(‘opcion3′); ?>”><?php _e(‘Opcion3:’); ?></label>

</p>

<p>

<input class”widefat” type=”text” id=”<?php echo $this->get_field_id(‘opcion3′); ?>”

name=”<?php echo $this->get_field_name(‘opcion3′); ?>”

value=”<?php echo esc_attr( $opcion3 ) ?>” style=”width:100% !important;”/>

</p>

</p>

<?php

}

Ahora modificamos nuestro método update para que se vea de la siguiente forma:


function update($new_instance, $old_instance){

$instance = $old_instance;

$instance[‘title’] = strip_tags($new_instance[‘title’]);

$instance[‘opcion1′] = strip_tags($new_instance[‘opcion1′]);

$instance[‘opcion2′] = strip_tags($new_instance[‘opcion2′]);

$instance[‘opcion3′] = strip_tags($new_instance[‘opcion3′]);

return $instance;
}

  •  Ahora modificamos el método Widget para que se vea de esta forma:

function widget($args, $instance){

extract($args);

$title = apply_filters( ‘widget_title’, $instance[‘title’] );

$opcion1 = esc_attr($instance[‘opcion1′]);

$opcion2 = esc_attr($instance[‘opcion2′]);

$opcion3 = esc_attr($instance[‘opcion3′]);

echo $arg[‘before_widget’];

echo ‘<div class=”row offset”>
</div>
<form id=”form1″ class=”form-horizontal”>

<div class=”list-group”>
<h4 class=”list-group-item active text-center”>’.$title.'</h4>
<ul>
<li>
<div class=”row”>
<div class=”col-xs-12 col-sm-12 col-md-12 col-lg-12″>
<div class=”form-group text-center”>
<label id=”lbl1″>
<input type=”radio” id=”‘.$opcion1.'” name=”myRadio”> ‘.$opcion1.’
</label>
</div>
<div class=”form-group text-center”>
<label id=”lbl2″>
<input type=”radio” id=”‘.$opcion2.'” name=”myRadio”> ‘.$opcion2.’
</label>
</div>
<div class=”form-group text-center”>
<label id=”lbl3″>
<input type=”radio” id=”‘.$opcion3.'” name=”myRadio”> ‘.$opcion3.’
</label>
</div>
</div>
</div>
</li>
<li>
<div class=”row”>
<div class=”col-xs-12 col-sm-12 col-md-12 col-lg-12″>
<div class=”btn-group”>
<button type=”button” id=”votar” class=”btn btn-default btn-ms”>
<span class=”glyphicon glyphicon-thumbs-up” aria-hidden=”true”></span> Votar
</button>
<button type=”button” id=”resultado” class=”btn btn-default btn-ms”>
<span class=”glyphicon glyphicon-eye-open” aria-hidden=”true”></span> Resultado
</button>
<div>
</div>
</div>
</li>
<li>
<div class=”row”>
<div class=”col-xs-12 col-sm-12 col-md-12 col-lg-12″>
<div id=”result”>

</div>
</div>
</div>
</li>
</ul>
</div>

</form>';

echo $args[‘after_widget’];

}

8) Ahora creamos la función que registrara nuestro widget:

function jprograming_poll_widget_load_widget(){

if (class_exists(‘jprograming_poll_widget’)) {

register_widget( ‘jprograming_poll_widget’ );

}

}

 

  1. Ahora creamos y registramos nuestro archivo javascript con el nombre de jprograming.poll.widget.js este contendrá todas las funciones javascript necesarias para realizar las llamadas al servidor, para guardar la data. Colocamos en el archivo php la función para registrar el archivo javascript que creamos.

function jprograming_poll_widget_load_script(){

wp_enqueue_script(‘ajax-script’, plugins_url(‘/js/jprograming.poll.widget.js’, __FILE__ ), array( ‘jquery’ ));//

wp_localize_script(‘ajax-script’,’ajax_object’, array(

‘ajax_url’ =>admin_url(‘admin-ajax.php’),

‘opcion1′ => 0,

‘opcion2′ => 0,

‘opcion3′ => 0

));

}

add_action(‘widgets_init’,’jprograming_poll_widget_load_widget’ );

  1. Ahora agregamos las funciones que necesitamos para crear la tabla en la que guardaremos la data de la encuesta y manejamos los insert y update se vera de la siguiente forma:

function jprograming_poll_widget_install_db()

{

global $wpdb;

$table_name = $wpdb->prefix.”poll”;

if ($wpdb->get_var(“SHOW TABLES LIKE ‘$table_name'”) != $table_name) {

$sql = “CREATE TABLE $table_name(

id mediumint(9) NOT NULL AUTO_INCREMENT,

title text NOT NULL,

col1 int,

col2 int,

col3 int,

time datetime DEFAULT ‘0000-00-00 00:00:00′ NOT NULL,

PRIMARY KEY (id)

)”;

 

$sql2 =”INSERT INTO `wp_poll`(`title`, `col1`, `col2`, `col3`,`time`) VALUES (‘Encuesta’,0,0,0,NOW());”;

require_once(ABSPATH.’wp-admin/includes/upgrade.php’);

dbdelta( $sql);

dbdelta( $sql2);

}

}

//

add_action(‘wp_ajax_jprograming_poll_widget_save’,’jprograming_poll_widget_save_callback’);

add_action(‘wp_ajax_nopriv_jprograming_poll_widget_save’,’jprograming_poll_widget_save_callback’);

function jprograming_poll_widget_save_callback(){

global $wpdb;

$opcion1 = array();

if(isset($_POST[‘opcion1′])){

$opcion1 = split(‘[|]’, $_POST[‘opcion1′]);

}

$wpdb->query(“UPDATE wp_poll SET `col1`=`col1` +”.$opcion1[0].”,`col2`=`col2` +”.$opcion1[1].”,`col3`=`col3` +”.$opcion1[2].” WHERE id = 1;”);

require_once(ABSPATH.’wp-admin/includes/upgrade.php’);

echo ‘voto realizado';

wp_die();

}

//

add_action(‘wp_ajax_jprograming_poll_widget_display’,’jprograming_poll_widget_display_callback’);

add_action(‘wp_ajax_nopriv_jprograming_poll_widget_display’,’jprograming_poll_widget_display_callback’);

function jprograming_poll_widget_display_callback(){

global $wpdb;

$row = $wpdb->get_row(“SELECT col1,col2,col3 FROM `wp_poll` WHERE id = 1;”);

require_once(ABSPATH.’wp-admin/includes/upgrade.php’);

echo ‘<p><span id=”col1″></span></p>

<div class=”progress”>

<div class=”progress-bar progress-bar-success progress-bar-striped” role=”progressbar” aria-valuenow=”‘.$row->col1.'” aria-valuemin=”0″ aria-valuemax=”100″ style=”width: ‘.$row->col1.’%”>

<span class=”sr-only”>’.$row->col1.’% Complete</span>

</div>

</div>

<p><span id=”col2″></span></p>

<div class=”progress”>

<div class=”progress-bar progress-bar-info progress-bar-striped” role=”progressbar” aria-valuenow=”‘.$row->col2.'” aria-valuemin=”0″ aria-valuemax=”100″ style=”width: ‘.$row->col2.’%”>

<span class=”sr-only”>’.$row->col2.’% Complete</span>

</div>

</div>

<p><span id=”col3″></span></p>

<div class=”progress”>

<div class=”progress-bar progress-bar-warning progress-bar-striped” role=”progressbar” aria-valuenow=”‘.$row->col3.'” aria-valuemin=”0″ aria-valuemax=”100″ style=”width: ‘.$row->col3.’%”>

<span class=”sr-only”>’.$row->col3.’% Complete</span>

</div>

</div>';

wp_die();

}

add_action(‘widgets_init’,’jprograming_poll_widget_load_widget’ );

add_action(‘wp_enqueue_scripts’,’jprograming_poll_widget_load_script’ );

add_action(‘wp_head’,’jprograming_poll_widget_load_script’ );

//registre action for ajax function

  1. Ahora agramamos los métodos javascript en el archivo js y se vera de la siguiente forma:

jQuery(document).ready(function($) {

$(‘#votar’).click(function(e){

e.preventDefault();

ajax_object.opcion1 = (($(‘div.form-group.text-center’).find(‘input[type=”radio”]’)[0].checked == true) ? 1 : 0);

ajax_object.opcion2 = (($(‘div.form-group.text-center’).find(‘input[type=”radio”]’)[1].checked == true) ? 1 : 0);

ajax_object.opcion3 = (($(‘div.form-group.text-center’).find(‘input[type=”radio”]’)[2].checked == true) ? 1 : 0);

if (ajax_object.opcion1 ==0 && ajax_object.opcion2 ==0 && ajax_object.opcion3 == 0) {

alert(‘debe seleccionar una opcion para poder votar’);

return;

};

 

var op =”” + ajax_object.opcion1 + “|” + ajax_object.opcion2 + “|” + ajax_object.opcion3 +””;

 

var data ={

‘action':’jprograming_poll_widget_save’,

opcion1:op

};

 

jQuery.ajax({

method: “POST”,

url: ajax_object.ajax_url,

dataType:”json text”,

data:data

}).always(function(jqXHR) {

alert(jqXHR.responseText);

$(‘#result’).empty();

$(‘input[type=”radio”]’).removeAttr(‘checked’);

});

 

});

 

//

 

$(‘#resultado’).click(function(e){

 

e.preventDefault();

 

var data ={

‘action':’jprograming_poll_widget_display’

};

 

jQuery.ajax({

method: “POST”,

url: ajax_object.ajax_url,

dataType:”json text”,

data:data

}).always(function(jqXHR) {

 

$(‘#result’).empty();

$(‘#result’).append(jqXHR.responseText);

 

$(‘#col1′).text($.trim($(‘#lbl1′).text()));

$(‘#col2′).text($.trim($(‘#lbl2′).text()));

$(‘#col3′).text($.trim($(‘#lbl3′).text()));

$(‘input[type=”radio”]’).removeAttr(‘checked’);

});

});

});

Luego de realizar todo esto si todo está correcto vamos al admin de WordPress y activamos y agregamos a el área de widget y visualizaremos la encuesta de esta forma:

plugin3

Ya para concluir para crear plug-in en wordpress no es necesario mucho conocimiento solo tener un poco de imaginación, ya que wordpress tiene una documentación bastante rica, solo hay que dedicar un poco de tiempo. Espero que esto de un como de luz a algunos que la necesiten.

Descargar Ejemplo Completo