Guia basica para crear Widgets en WordPress, en esta parte veremos solo componentes sencillos como campos de textos, campos numericos, … en las proximas guias veremos como crear widgets serios.
Tabla de contenidos
Estructura de un Widget
La mejor manera de crearse un widget es crearse un fichero con extension .php por ejemplo nombretuwidget.php donde el nombretuwidget es un nombre inventado para que pongas el tuyo. Y este fichero lo incluiras en functions.php
Los widgets extienden de la clase WP_Widget de WordPress y están compuesto por las siguientes funciones.
- Constructor donde definiremos el titulo , descripción,..
- Función widget: en este función pintaremos el html que se mostrara en nuestro tema.
- Función form: en esta función crearemos el formulario que veremos en la zona de widgets
- Función update: En esta función actualizaremos los datos.
class nombretuwidget extends WP_Widget {
public function __construct() {
}
public function widget( $args, $instance ) {
}
public function form( $instance ) {
}
public function update( $new_instance, $old_instance ) {
}
}
function prefijodemowidget_register_widgets() {
register_widget( 'nombretuwidget' );
}
add_action( 'widgets_init', 'prefijodemowidget_register_widgets' );
Personalizando titulo, descripción , id, clase css
Ahora que habeis visto la configuracion de un widget en WordPress vamos a personalizar el constructor.
Al extender de la clase WP_Widget vamos a llamar al constructor del padre así que os pongo el código que sustituiremos por la función constructor. Al final del articulo dejare el ejemplo completo pero quiero que vayáis parte por parte sabiendo que campos poner.
id_widget: este es el atributo id que saldrá en el widget al publicar el html
titulo del widget : este es el titulo que aparecerá en el widget
descripcion del widget: este texto es el que tendremos para explicar el widget
classname: este campo es la clase css de tu widget
Como veréis los textos los pone tal que así:
Esto es para traducirlo, donde demo_domain es el nombre de vuestro tema para la traducción.
__( 'Mi primer super widget', 'demo_domain' ),
La Función Constructor de tu widget
public function __construct() {
parent::__construct(
'id_widget',
__( 'Mi primer super widget', 'demo_domain' ),
array(
'description' => __( 'Esta es una pequeña descripcion del widget', 'demo_domain' ),
'classname' => 'clase_css_widget',
)
);
}
Campos personalizados en tu Widget
Vamos a ver la lista de campos que podemos utilizar en nuestros widget, desde campo de texto, textarea , selectores, ….
Cuando trabajamos con campos tenéis que saber que tenemos que recoger esa información, guardarla, editarla, pintarla o imprimirla en la web. Entonces tenemos que tocar en todas las funciones que hemos visto al comienzo de esta guía.
Para ponernos en situación vamos a ir viendo muchos tipos de campos para nuestros widget y vamos a comenzar con un ejemplo genérico el típico campo de texto.
CAMPO BASICO DE TIPO TEXTO
Vamos a añadir un campo de texto que se llame “campotexto1”
- Tipo de campo: text
- id del campo de texto: campotexto1
- Etiqueta: campo de texto
- Descripción: esto es un campo de texto
- Placeholder: valor a modo de descripción que se suele usar sino se pone etiqueta o para indicar un formato como fechas ,…
- Valor por defecto: Este valor por ejemplo si usas cantidades puedes poner uno, un color puedes poner el blanco #ffffff,….
Como os comentaba, vamos a ir por partes por un lado tenemos que pintar ese campo de texto en nuestro widget para eso usamos la funcion form
- Lo primero que hacemos es declarar nuestros campos
- Cargamos la información que viene la base de datos
- Un ejemplo de como pintar el campo . Aquí hay muchas etiquetas, se puede reducir yo he puesto todos los campos como descripción,… pero os pongo un ejemplo sin tanto código
public function form( $instance ) {
// Valores por defecto
$instance = wp_parse_args( (array) $instance, array(
'demowp_demo_title' => '',
'demowp_campotexto' => '',
) );
// Si existen datos en la bsae de datos los recogemos para mostrarlos
$demowp_campotexto = !empty( $instance['demowp_campotexto'] ) ? $instance['demowp_campotexto'] : '';
echo '<p>';
echo ' <label for="' . $this->get_field_id( 'demowp_campotexto' ) . '" class="demowp_campotexto_label">' . __( 'campo texto', 'text_domain' ) . '</label>';
echo ' <input type="text" id="' . $this->get_field_id( 'demowp_campotexto' ) . '" name="' . $this->get_field_name( 'demowp_campotexto' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $demowp_campotexto ) . '">';
echo '</p>';
}
Como actualizar los campos en un Widget
Cogemos los datos de la variable $new_instance y los pasamos a $instance y hacemos un return. Al principio hacemos una copia de lo antiguo $old_instance porque puede ser que haya campos que no queramos actualizar.
// Función para actualizar la informacion
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['demowp_campotexto'] = !empty( $new_instance['demowp_campotexto'] ) ? strip_tags( $new_instance['demowp_campotexto'] ) : '';
return $instance;
}
Como pintar el widget
public function widget( $args, $instance ) {
$text = apply_filters( 'widget_text', empty( $instance['demowp_campotexto'] ) ? '' : $instance['demowp_campotexto'], $instance );
// Before widget tag
echo $args['before_widget'];
// Text
echo '<div class="textwidget">' . $text . '</div>';
// After widget tag
echo $args['after_widget'];
}
Asi quedaria nuestro ejemplo completo.
class demowp_widget extends WP_Widget {
public function __construct() {
parent::__construct(
'id_widget',
__( 'Mi primer super widget', 'demo_domain' ),
array(
'description' => __( 'Esta es una pequeña descripcion del widget', 'demo_domain' ),
'classname' => 'clase_css_widget',
)
);
}
public function widget( $args, $instance ) {
$text = apply_filters( 'widget_text', empty( $instance['demowp_campotexto'] ) ? '' : $instance['demowp_campotexto'], $instance );
// Before widget tag
echo $args['before_widget'];
// Text
echo '<div class="textwidget">' . $text . '</div>';
// After widget tag
echo $args['after_widget'];
}
public function form( $instance ) {
// Valores por defecto
$instance = wp_parse_args( (array) $instance, array(
'demowp_demo_title' => '',
'demowp_campotexto' => '',
) );
// Si existen datos en la bsae de datos los recogemos para mostrarlos
$demowp_campotexto = !empty( $instance['demowp_campotexto'] ) ? $instance['demowp_campotexto'] : '';
echo '<p>';
echo ' <label for="' . $this->get_field_id( 'demowp_campotexto' ) . '" class="demowp_campotexto_label">' . __( 'campo texto', 'text_domain' ) . '</label>';
echo ' <input type="text" id="' . $this->get_field_id( 'demowp_campotexto' ) . '" name="' . $this->get_field_name( 'demowp_campotexto' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $demowp_campotexto ) . '">';
echo '</p>';
}
// Función para actualizar la informacion
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['demowp_campotexto'] = !empty( $new_instance['demowp_campotexto'] ) ? strip_tags( $new_instance['demowp_campotexto'] ) : '';
return $instance;
}
}
function demowp_register_widgets() {
register_widget( 'demowp_widget' );
}
add_action( 'widgets_init', 'demowp_register_widgets' );
CAMPO BASICO DE TIPO TEXTAREA
Hemos visto como crear un campo de texto en un Widget . Con todos campos aunque se pueden poner mas label , campo , placeholder.
Ahora vamos a ver como generar un TextArea y voy a dejar dos campos un input tipo text y un textarea para que veais la forma de ir añadiendo mas campos.
Como veis se van añadiendo un campo detras de otro y listo.
Pintamos los valores por defecto , si los dejarais en blanco podeis dejarlo tal que asi. El ejemplo_ es un prefijo nos sirve para para diferenciar.
Aqui tenemos dos campos con valor por defecto a nada 😛
$instance = wp_parse_args( (array) $instance, array( 'ejemplo_campotextarea' => '', 'ejemplo_campotext' => '', ) );
Recogemos los valores de la base de datos
$ejemplo_campotextarea = !empty( $instance['ejemplo_campotextarea'] ) ? $instance['ejemplo_campotextarea'] : ''; $ejemplo_campotext = !empty( $instance['ejemplo_campotext'] ) ? $instance['ejemplo_campotext'] : '';
Por ultimo crearmos los campos de texto en html
Lo normal seria haer un echo no 6 😛 pero asi lo podeis ver mejor .
echo '<p>'; echo ' <textarea id="' . $this->get_field_id( 'ejemplo_campotextarea' ) . '" name="' . $this->get_field_name( 'ejemplo_campotextarea' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '">' . $ejemplo_campotextarea . '</textarea>'; echo '</p>'; echo '<p>'; echo ' <input type="text" id="' . $this->get_field_id( 'ejemplo_campotext' ) . '" name="' . $this->get_field_name( 'ejemplo_campotext' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $ejemplo_campotext ) . '">'; echo '</p>';
CAMPO TIPO NUMERO
En este ejemplo vereis como mostrar un tipo numero en la funcion form y en el update
public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array(
'custom_numero' => '5',
) );
$custom_numero = !empty( $instance['custom_numero'] ) ? $instance['custom_numero'] : '';
echo '<p>';
echo ' <input type="number" id="' . $this->get_field_id( 'custom_numero' ) . '" name="' . $this->get_field_name( 'custom_numero' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_numero ) . '">';
echo '</p>';
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['custom_numero'] = !empty( $new_instance['custom_numero'] ) ? strip_tags( $new_instance['custom_numero'] ) : '';
return $instance;
}
CAMPO TIPO PASSWORD
public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array(
'custom_password' => '',
) );
$custom_password = !empty( $instance['custom_password'] ) ? $instance['custom_password'] : '';
echo '<p>';
echo ' <input type="password" id="' . $this->get_field_id( 'custom_password' ) . '" name="' . $this->get_field_name( 'custom_password' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_password ) . '">';
echo '</p>';
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['custom_password'] = !empty( $new_instance['custom_password'] ) ? strip_tags( $new_instance['custom_password'] ) : '';
return $instance;
}
CAMPO TIPO BOOLEAN
public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array(
'custom_booleano' => '',
) );
$custom_booleano = !empty( $instance['custom_booleano'] ) ? $instance['custom_booleano'] : '';
echo '<p>';
echo ' <label>';
echo ' <input type="checkbox" id="' . $this->get_field_id( 'custom_booleano' ) . '" name="' . $this->get_field_name( 'custom_booleano' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="1" ' . checked( $custom_booleano, true, false ) . '>' . __( '', 'text_domain' );
echo ' </label><br>';
echo '</p>';
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['custom_booleano'] = !empty( $new_instance['custom_booleano'] ) ? true : false;
return $instance;
}
CAMPO TIPO EMAIL
Campo email es igual solo cambia type=”email” frente a un text o un url ,…
echo '<p>'; echo ' <input type="email" id="' . $this->get_field_id( 'custom_email' ) . '" name="' . $this->get_field_name( 'custom_email' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_email ) . '">'; echo '</p>';
CAMPO TIPO URL
Campo Url lo unico que cambiamos es el type que es de tipo url
echo '<p>'; echo ' <input type="url" id="' . $this->get_field_id( 'custom_url' ) . '" name="' . $this->get_field_name( 'custom_url' ) . '" class="widefat" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $custom_url ) . '">'; echo '</p>';
CAMPO SELECT, RADIO, CHECKBOX
Voy a poner un ejemplo con los tres tipos que tenemos, selector o select , radiobutton y con checkbox en las funciones .
Para ello he cogido como tematica el sexo y tenemos dos valores hombre y mujer. Cada variable es diferente para que no me de problema en las capturas.
- radiobutton la variable es $ejemplo_sexoradio
- checkbox la variable es $ejemplo_sexocheckbox
- select la varaible es $ejemplo_sexoselect
public function form( $instance ) {
// valores por defecto
$instance = wp_parse_args( (array) $instance, array(
'ejemplo_sexocheckbox' => array(),
'ejemplo_sexoradio' => '',
'ejemplo_sexoselect' => '',
) );
// recogemos los datos del checkbox
$ejemplo_sexocheckbox = isset( $instance['ejemplo_sexocheckbox'] ) ? $instance['ejemplo_sexocheckbox'] : array();
// recogemos los datos del radiobutton
$ejemplo_sexoradio = !empty( $instance['ejemplo_sexoradio'] ) ? $instance['ejemplo_sexoradio'] : '';
// recogemos los datos en el select
$ejemplo_sexoselect = !empty( $instance['ejemplo_sexoselect'] ) ? $instance['ejemplo_sexoselect'] : '';
// Ejemplo de mostrar el checkbox
echo '<p>';
echo ' <label for="' . $this->get_field_id( 'ejemplo_sexocheckbox' ) . '" class="ejemplo_sexocheckbox_label">' . __( 'Elige una opcion', 'text_domain' ) . '</label><br>';
echo ' <label>';
echo ' <input type="checkbox" name="' . $this->get_field_name( 'ejemplo_sexocheckbox' ) . '[]" value="hombre" ' . ( in_array( 'hombre', $ejemplo_sexocheckbox )? 'checked="checked"' : '' ) . '> ' . __( 'hombre', 'text_domain' );
echo ' </label><br>';
echo ' <label>';
echo ' <input type="checkbox" name="' . $this->get_field_name( 'ejemplo_sexocheckbox' ) . '[]" value="mujer" ' . ( in_array( 'mujer', $ejemplo_sexocheckbox )? 'checked="checked"' : '' ) . '> ' . __( 'mujer', 'text_domain' );
echo ' </label><br>';
echo '</p>';
// ejemplo de mostrar el radiobutton
echo '<p>';
echo ' <label for="' . $this->get_field_id( 'ejemplo_sexoradio' ) . '" class="ejemplo_sexoradio_label">' . __( 'tipo sexo', 'text_domain' ) . '</label><br>';
echo ' <label>';
echo ' <input type="radio" name="' . $this->get_field_name( 'ejemplo_sexoradio' ) . '" value="ejemplo_hombre" ' . checked( $ejemplo_sexoradio, 'ejemplo_hombre', false ) . '> ' . __( 'hombre', 'text_domain' );
echo ' </label><br>';
echo ' <label>';
echo ' <input type="radio" name="' . $this->get_field_name( 'ejemplo_sexoradio' ) . '" value="ejemplo_mujer" ' . checked( $ejemplo_sexoradio, 'ejemplo_mujer', false ) . '> ' . __( 'mujer', 'text_domain' );
echo ' </label><br>';
echo '</p>';
// ejemplo de mostrar el select
echo '<p>';
echo ' <label for="' . $this->get_field_id( 'ejemplo_sexoselect' ) . '" class="ejemplo_sexoselect_label">' . __( 'sexo con select', 'text_domain' ) . '</label>';
echo ' <select id="' . $this->get_field_id( 'ejemplo_sexoselect' ) . '" name="' . $this->get_field_name( 'ejemplo_sexoselect' ) . '" class="widefat">';
echo ' <option value="hombre" ' . selected( $ejemplo_sexoselect, 'hombre', false ) . '> ' . __( 'hombre', 'text_domain' ) . '</option>';
echo ' <option value="mujer" ' . selected( $ejemplo_sexoselect, 'mujer', false ) . '> ' . __( 'mujer', 'text_domain' ) . '</option>';
echo ' </select>';
echo '</p>';
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
// actualizamos el checkbox
$instance['ejemplo_sexocheckbox'] = !empty( $new_instance['ejemplo_sexocheckbox'] ) ? array_map( 'strip_tags', $new_instance['ejemplo_sexocheckbox'] ) : array();
// actualizamos el radiobutton
$instance['ejemplo_sexoradio'] = !empty( $new_instance['ejemplo_sexoradio'] ) ? $new_instance['ejemplo_sexoradio'] : '';
// actualizamos el select
$instance['ejemplo_sexoselect'] = !empty( $new_instance['ejemplo_sexoselect'] ) ? strip_tags( $new_instance['ejemplo_sexoselect'] ) : '';
return $instance;
}
