Forem: Juanan Ruiz

Usar taxonomías en el campo select de un formulario

Juanan Ruiz — Sun, 26 Jan 2020 00:40:21 +0000

La entrada Usar taxonomías en el campo select de un formulario se publicó primero en 🈴KungFuPress por Kung Fu Press

Cuando desarrolles un formulario en WordPress te vas a encontrar casi siempre con la necesidad de mostrar al usuario una lista de opciones para seleccionar una de ellas, el típico campo select. A veces, por acabar antes, pones las opciones grabadas a fuego en tu código, pero cuando más adelante necesites introducir o quitar opciones, tendrás que editar el código. La cosa se complica si cuando surja la necesidad no estás tú ahí para hacerlo.

Por ello una buena práctica es sacar siempre estas opciones del código y llevarlas a la base de datos. Podrías crear una tabla para ello, pero luego tendrías que crear un listado y un formulario para revisar, agregar o modificar elementos.

Si quieres ahorrarte este trabajo te recomiendo usar las taxonomías de WordPress. En este tutorial aprenderás a usar taxonomías en el campo select de un formulario y a guardarla con el resto de datos. Cada envío del formulario lo almacenarás en un Custom Post Type (CPT).

Creando la base del plugin y el CPT

Lo primero que vas a hacer es crear la estructura básica del plugin y agregar un CPT de la forma más breve posible.

Crea una carpeta con el nombre del plugin y un fichero PHP dentro con el mismo nombre de la carpeta. Contendrá un par de constantes con información del plugin y la llamada al fichero plugin-init.php donde luego definirás el tipo de entrada personalizada (CPT) y la taxonomía personalizada.

Como siempre, tienes el código completo del plugin en GitHub, pero recuerda que si estás siguiendo este tutorial con fines de aprendizaje te recomiendo teclear todo el código de tu puño y letra.

<?php
/** 
 * Plugin Name: KFP FormTaxon 
 * Plugin URI: https://github.com/kungfupress/kfp-formtaxon
 * Description: Ejemplo de utilización de una categoría personalizada desde un formulario 
 * Version: 0.1.0 
 * Author: Juanan Ruiz 
 * Author URI: https://kungfupress.com/ 
 * PHP Version: 5.6 
 *  
 * @package kfp_ftx 
 */

defined( 'ABSPATH' ) || die();
// Constantes que afectan a todos los ficheros del plugin.
define( 'KFP_FTX_DIR', plugin_dir_path( __FILE__ ) );
define( 'KFP_FTX_URL', plugin_dir_url( __FILE__ ) );
define( 'KFP_FTX_VERSION', '0.1.0' );
// Crea CPT y taxonomia.
require_once KFP_FTX_DIR . 'include/plugin-init.php';

Creación del CPT

Crea una carpeta include y dentro de ella el archivo plugin-init.php. En este archivo vas a crear el CPT y la taxonomía.

Vas a utilizar el hook add_action('init') de manera que el CPT esté definido antes de ejecutar otras acciones del plugin. Para definir dicho CPT usarás la función register_post_type() que recibe como parámetros el slug o nombre interno del CPT y un array de argumentos donde se pueden personalizar muchos aspectos del mismo, aunque en este ejemplo será lo mínimo para ir al grano. Tienes otro artículo más extenso sobre cómo crear tipos y campos personalizados

<?php
** 
 * File: kfp-formtaxon/include plugin-init.php 
 * @package kfp_formtaxon 
 *

defined( 'ABSPATH' ) || die();

add_action( 'init', 'kfp_cpt_taller', 10 );
/** 
 * Crea el CPT Taller con lo mínimo que se despacha en CPTs
 * @return void 
 */
function kfp_cpt_taller() {
    $args = array('public' => true,'label' => 'Taller',);
    register_post_type( 'kfp-taller', $args );
}

Cómo crear una taxonomía personalizada

Agrega el código para definir la taxonomía y algunos ejemplos predeterminados de esta. Para ello vas a usar de nuevo el hook add_action('init') y la función register_taxonomy() que recibe tres parámetros: el slug de la taxonomía, un array con los tipos de entrada que pueden usar esta categoría y otro array con el resto de propiedades, de nuevo al mínimo.

En este ejemplo el CPT representa una actividad formativa ( taller ) y la taxonomía el lugar donde se imparte.

add_action( 'init', 'kfp_taxonomy_lugares', 0 );
/** 
 * Registra la taxonomía con lo mínimo indispensable 
 * @return void 
 */

function kfp_taxonomy_lugares() {
    $args = array('label' => 'Lugar','hierarchical' => true,'show_admin_column' => true,);
    register_taxonomy( 'kfp-lugar', array( 'kfp-taller' ), $args );
}

add_action( 'init', 'kfp_lugares_add', 1 );
/** 
 * Agrega algunos lugares de ejemplo por defecto 
 * @return void 
 */
function kfp_lugares_add() {
    $lugares = array('Escuela de Ingenieros Informáticos','Facultad de Derecho','Facultad de Bellas Artes','Facultad de Medicina','Rectorado',);
    foreach ( $lugares as $lugar ) {
        wp_insert_term( $lugar, 'kfp-lugar' );
    }
}

Creación del formulario

Ahora vas a crear el formulario que te permitirá crear un nuevo taller desde el frontend. Para mostrarlo en la parte pública o frontend de tu web, podrías crear una plantilla específica o aprovechar algún elemento de la plantilla como la cabecera, el pié o incluso un widget. Para este ejemplo vas a asociar el formulario a un shortcode, esto te permitirá incluirlo en cualquier página o entrada que desees, incluso en un widget en el que podrías colocar el shortcode.

Si prefieres tener el formulario en el backend podrías crear un panel de administración allí y reutilizar el código que verás aquí con algunas adaptaciones.

Así que crea un nuevo fichero llamado form_taller_shortcode.php dentro de la carpeta include. Recuerda que necesitas mostrar la lista de lugares en el formulario, así que lo primero que harás será recuperar todos los elementos de la taxonomía utilizando la función get_terms() de WordPress.

Luego «pintas» el formulario, que se va a procesar con el fichero admin-post.php de WordPress, tal como se indica en el action del formulario. Un campo oculto del formulario llamado también action permitirá a WordPress saber que formulario es el que estás grabando por lo que debes usar un identificador único, yo he escogido kfp-ftx-taller.

El formulario se completa con un campo nonce de seguridad, el nombre y la descripción del nuevo taller y por supuesto la lista desplegable para seleccionar el lugar donde se va a celebrar el taller.

<?php
/**
* File: kfp-formtaxon/include/form-taller-shortcode.php
*
* @package kfp_ftx
*/

defined( 'ABSPATH' ) || die();
add_shortcode( 'kfp_ftx_crear_taller', 'kfp_ftx_crear_taller' );


/**
 * Implementa formulario para crear un nuevo taller.
 *
 * @return string
 */
function kfp_ftx_crear_taller() {
    // Trae los lugares existentes en la base de datos a la vatiable $lugares.
    // Esta variable recibirá un array de objetos de tipo taxonomy.
    $lugares = get_terms('kfp-lugar',array('orderby' => 'term_id','hide_empty' => 0,));
    ob_start();
    ?>
    <form action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="post">
        <?php wp_nonce_field( 'kfp-ftx-taller', 'kfp-ftx-taller-nonce' ); ?>
        <input type="hidden" name="action" value="kfp-ftx-taller">
        <div class="form-input">
            <label for="nombre">Taller</label>
            <input type="text" name="nombre" id="nombre" required>
        </div>
        <div class="form-input">
            <label for="id_lugar">Lugar</label>
            <select name="id_lugar" required><option value="">Selecciona el lugar</option>
            <?php 
                foreach ( $lugares as $lugar ) {
                    echo('<option value="' . esc_attr( $lugar->term_id ) . '">'. esc_attr( $lugar->name ) . '</option>');
                }
            ?>
            </select>
        </div>
        <div class="form-input">
            <label for="descripcion">Descripción</label>
            <textarea name="descripcion" id="descripcion"></textarea>
        </div>
        <div class="form-input">
            <input type="submit" value="Enviar">
        </div>
    </form>
    <?php
    return ob_get_clean();
}

Crea en tu web una página o entrada donde colocarás el shortcode [kfp_ftx_crear_taller]. Comprueba que el formulario aparece dentro de la entrada y que el campo Lugar contiene los elementos de ejemplo que pusiste al definir la taxonomía.

Grabar el formulario y la taxonomía en la base de datos

Para grabar los datos del formulario usarás un hook dinámico (parte del nombre lo inventas tú) que será procesado por el fichero wp-admin/admin-post.php. De momento el script procesará tanto el envío de usuarios autenticados como anónimos, por lo que utilizarás dos hooks: admin_post_{$action} y admin_post_nopriv_{$action}. Recuerda que el valor de {$action} lo has definido en un campo oculto del formulario.

Crea un nuevo fichero include/form-talller-grabar.php Agrega en él los hooks que acabo de explicar.

Define la función kfp_ftx_graba_taller() donde una vez comprobados que los campos requeridos vienen rellenos y que el nonce es correcto podrás grabar el CPT de tipo taller utilizando la función wp_insert_post()

<?php
/**
 * File: kfp-formtaxon/include/form-taller-grabar.php
 *
 * @package kfp_ftx
 */
defined( 'ABSPATH' ) || die();
// Agrega los action hooks para grabar el formulario (el primero para usuarios
// logeados y el otro para el resto)
// Lo que viene tras admin_post_ y admin_post_nopriv_ tiene que coincidir con
// el value del campo input con name "action" del formulario enviado.
add_action( 'admin_post_kfp-ftx-taller', 'kfp_ftx_graba_taller' );
add_action( 'admin_post_nopriv_kfp-ftx-taller', 'kfp_ftx_graba_taller' );
/**
 * Graba los datos enviados por el formulario como un nuevo CPT kfp-taller
 *
 * @return void
 */
function kfp_ftx_graba_taller() {
    // Comprueba campos requeridos y nonce.
    if ( isset( $_POST['nombre'] )
    &amp;&amp; isset( $_POST['id_lugar'] )
    &amp;&amp; isset( $_POST['kfp-ftx-taller-nonce'] )
    &amp;&amp; wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['kfp-ftx-taller-nonce'] ) ), 'kfp-ftx-taller' )
    ) {
        $nombre      = sanitize_text_field( wp_unslash( $_POST['nombre'] ) );
        $descripcion = sanitize_text_field( wp_unslash( $_POST['descripcion'] ) );
        $id_lugar    = (int) $_POST['id_lugar'];
        $args = array(
            'post_title' => $nombre,
            'post_content' => $descripcion,
            'post_type' => 'kfp-taller',
            'post_status' => 'draft',
            'comment_status' => 'closed',
            'ping_status' => 'closed'
        );
        // Esta variable $post_id contiene el ID del nuevo registro
        // Viene de perlas para grabar los metadatos
        $post_id = wp_insert_post($args);
    }
}

Comprueba que todo funciona y el nuevo CPT se graba. Al enviar el formulario obtendrás una pantalla en blanco, pero puedes comprobar que se ha creado un nuevo taller desde el escritorio. Luego arreglarás lo de la pantalla en blanca, primero tienes que asociar la taxonomía lugar con el taller .

Cómo grabar una taxonomía en un post

En el paso anterior, al grabar el nuevo post de tipo taller, capturabas su identificador (ID) en la variable $post_id, que era lo que te devolvía la función wp_insert_post().

Ahora vas a usar la función wp_set_object_terms()que recibe el ID del post como primer parámetro. Luego necesitas el ID de la taxonomía que has asignado desde el formulario (lo has capturado en la variable $id_lugar) y por último el tipo de taxonomía, en este caso 'kfp-lugar' Quedando el final del código así:

$post_id = wp_insert_post($args);
$term_taxonomy_ids = wp_set_object_terms( $post_id, $id_lugar, 'kfp-lugar' );

Sólo tendrías, por tanto, que añadir la última línea, volver a grabar un nuevo taller desde el formulario y comprobar desde el escritorio que la taxonomía se ha grabado con el taller.

Para terminar tendrás que salir de esa pantalla en blanco que aparece tras enviar el formulario. No es un error, es normal, precisamente estás usando admin-post.php porque es mucho más rápido que cargar el sitio completo, el tema y los contenidos actuales. Con admin-post.php procesas el formulario con un WordPress que carga lo mínimo y luego rediriges a donde quieras. En este caso al mismo formulario con un mensaje de éxito o error, pero podría enviar a una página con un listado con todos los talleres propuestos hasta el momento o de todos los talleres propuestos por este usuario.

Aquí tienes el código completo, incluyendo redirecciones y mensajes, del fichero include/form-taller-grabar.php

<?php
/**
 * File: kfp-formtaxon/include/form-taller-grabar.php
 *
 * @package kfp_ftx
 */

defined( 'ABSPATH' ) || die();
// Agrega los action hooks para grabar el formulario (el primero para usuarios
// logeados y el otro para el resto)
// Lo que viene tras admin_post_ y admin_post_nopriv_ tiene que coincidir con
// el valor del campo input con nombre "action" del formulario enviado.
add_action( 'admin_post_kfp-ftx-taller', 'kfp_ftx_graba_taller' );
add_action( 'admin_post_nopriv_kfp-ftx-taller', 'kfp_ftx_graba_taller' );

/**
 * Graba los datos enviados por el formulario como un nuevo CPT kfp-taller
 *
 * @return void
 */
function kfp_ftx_graba_taller() {
    // Si viene en $_POST aprovecha uno de los campos que crea wp_nonce para volver al form.
    $url_origen = home_url( '/' );
    if ( ! empty( $_POST['_wp_http_referer'] ) ) {
        $url_origen = esc_url_raw( wp_unslash( $_POST['_wp_http_referer'] ) );
    }
    // Comprueba campos requeridos y nonce.
    if ( isset( $_POST['nombre'] )
    &amp;&amp; isset( $_POST['id_lugar'] )
    &amp;&amp; isset( $_POST['kfp-ftx-taller-nonce'] )
    &amp;&amp; wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['kfp-ftx-taller-nonce'] ) ), 'kfp-ftx-taller' )
    ) {
        $nombre      = sanitize_text_field( wp_unslash( $_POST['nombre'] ) );
        $descripcion = sanitize_text_field( wp_unslash( $_POST['descripcion'] ) );
        $id_lugar    = (int) $_POST['id_lugar'];
        $args = array(
            'post_title' => $nombre,
            'post_content' => $descripcion,
            'post_type' => 'kfp-taller',
            'post_status' => 'draft',
            'comment_status' => 'closed',
            'ping_status' => 'closed'
        );
        // Esta variable $post_id contiene el ID del nuevo registro
        // Viene de perlas para grabar la taxonomía
        $post_id = wp_insert_post($args);
        $term_taxonomy_ids = wp_set_object_terms( $post_id, $id_lugar, 'kfp-lugar' );
        $query_arg = array( 'kfp-ftx-resultado' => 'error' );
        wp_redirect( esc_url_raw( add_query_arg( $query_arg , $url_origen ) ) );
        exit();
    }
    $query_arg = array( 'kfp-ftx-resultado' => 'error' );
    wp_redirect( esc_url_raw( add_query_arg( $query_arg , $url_origen ) ) );
    exit();
}

Verás que ahora el formulario redirige a la propia página o entrada del formulario y en la barra de direcciones de tu navegador aparece el resultado (‘success’ o ‘error’) pero tienes que hacer que aparezca dentro de la página.

Para ello coloca estos dos «if» justo antes de «pintar» el formulario en el fichero include/form-taller-shortcode.php

ob_start();
    if ( filter_input( INPUT_GET, 'kfp-ftx-resultado', FILTER_SANITIZE_STRING ) === 'success' ) {
        echo '<h4>Se ha grabado el taller correctamente</h4>';
    }
    if ( filter_input( INPUT_GET, 'kfp-ftx-resultado', FILTER_SANITIZE_STRING ) === 'error' ) {
        echo '<h4>Se ha producido un error al grabar el taller</h4>';
    }
    ?>
    <form action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="post">

Para terminar te comento las posibles formas de administrar tus taxonomías personalizadas.

Cómo administrar tu taxonomía personalizada

Si estás trabajando con entradas, páginas o entradas personalizadas (CPTs) el menú de administración de la taxonomía lo encontrarás asociado al menú de administración de los tipos de entrada a los que la taxonomía está asociada.

En la imagen de arriba ves la taxonomía «Lugar» asociada al Custom Post Type «Taller», desde el menú de este CPT puedes acceder al listado, creación, edición y borrado de elementos de esta taxonomía.

Si estás trabajando con una tabla propia (algo que siempre debe quedar como última opción) podrías asociar la taxonomía a las entradas (a los posts vamos) y desde allí podrás administrarla igualmente. Pero quizás podría quedar más elegante (y más usable) si desde el propio formulario pones un enlace o un botón al panel de edición de la taxonomía. En el caso de este ejemplo sería algo como:

<a href="wp-admin/edit-tags.php?taxonomy=provincias">Editar provincias</a>

Realmente esta última opción también la puedes utilizar aunque estés usando un Custom Post Type, siempre que el formulario esté en el escritorio o backend (para el frontend sería otro cantar y quizás no tendría sentido que cualquier usuario pudiera editar una taxonomía).

Conclusiones

Utilizar taxonomías es la manera óptima de ofrecer a tus usuarios una serie de opciones cerradas a la hora de rellenar un formulario, en algunos casos incluso podrías permitir a los propios usuarios agregar nuevas opciones si fuera necesario. En cualquier caso el uso de taxonomías proporciona a los administradores del sitio las herramientas necesarias para administrarlas, herramientas que ya vienen incluidas en WordPress. Cuando implementes lo aquí aprendido en un par de ocasiones te preguntarás cómo habías podido vivir hasta ahora sin utilizar taxonomías personalizadas.

Espero que te haya gustado el tutorial y le puedas sacar provecho, te recuerdo que tienes el código completo del plugin en GitHub.

Referencias

La entrada Usar taxonomías en el campo select de un formulario se publicó primero en 🈴KungFuPress por Kung Fu Press

Diferencia entre wp_register_script y wp_enqueue_script

Juanan Ruiz — Thu, 05 Sep 2019 15:54:38 +0000

La entrada Diferencia entre wp_register_script y wp_enqueue_script se publicó primero en KungFuPress por Kung Fu Press

Muchas veces me he preguntado cuándo debo usar wp_register_script() antes de wp_enqueue_script() y si realmente la primera sirve para algo.

Si necesitas cargar un fichero javascript en todas las ocasiones en que se cargue tu página puedes ahorrarte la llamada a wp_register_script() y utilizar sólo wp_enqueue_script().

Si sólo usaras wp_register_script() el script no se cargaría. Como su propio nombre indica, esta función lo único que hace es registrar el script, decir en qué orden quieres cargarlo y si tiene alguna dependencia, pero necesita wp_enqueue_script() para que el script realmente se cargue.

Entonces ¿cuándo tengo que usar wp_register_script?

Bien, imagina que estás usando un shortcode para mostrar un formulario, una tabla dinámica o cualquier otra cosa que necesite llamar un fichero JavaScript.

Sólo deberías cargar este script si el shortcode se está utilizando en la página o entrada actual. El problema es que cuando se carga el shortcode ya es tarde para hacer la llamada al script porque la cabecera ya se ha cargado.

Al final lo que hacen muchos desarrolladores es cargar los scripts junto con el plugin, pero entonces se cargan siempre y no sólo cuando se utilice el shortcode. Para solucionar este problema existe la función wp_register_script().

Cuando uses esta función todos los parámetros se los puedes pasar directamente a ella, luego cuando llames a wp_enqueue_scripts() sólo necesitas pasarle el “handler” del script.

A continuación te pongo un ejemplo de como deberías cargar el script correctamente:

<?php
// Cuando WP cargue la cabecera llama a este hook y tu script quedará registrado

add_action( 'wp_enqueue_scripts', 'kfp_Idea_List_scripts' );

function Kfp_Idea_List_scripts(){ 
  wp_register_script(
    'kfp-vote-link', 
    plugins_url('../js/vote-link.js', __FILE__), 
    array('jquery')
  );
}
add_shortcode('kfp_idea_list', 'Kfp_Idea_list');

function Kfp_Idea_list(){ 
  // El script sólo se carga si se utiliza el shortcode 
  wp_enqueue_script('kfp-vote-link’); 
  /* El shortcode hace lo que tenga que hacer */
}

Si quieres ver este código en su contexto visita https://github.com/kungfupress/kfp-vota-ideas

¿Y si tengo que usar wp_localize_script?

Se aplica lo mismo. En los casos mas simples puedes usar wp_enqueue_script() y luego wp_localize_script() para pasar parámetros al script. Pero siempre en ese orden porque el «handler» o identificador del script que utilizas en wp_localize_script() lo defines este caso en wp_enqueue_script().

Si utilizas wp_register_script() puedes llamar a wp_localize_script() inmediatamente después y ya lo tienes preparado para cuando llames a wp_enqueue_script()

¿Cuál es la diferencia entre wp_register_style y wp_enqueue_style?

Pues la misma que hay entre wp_register_script() y wp_enqueue_script(). Todo lo que te he contado arriba aplica para estas dos.

Por cierto, recuerda que el «hook» para ambos es siempre el mismo: 'wp_enqueue_scripts'. No existe 'wp_enqueue_styles'

¿Porqué meterme en todo este lío y no usar simplemente wp_enqueue?

Por rendimiento y optimización de recursos. Debes intentar cargar los mínimos scripts y hojas de estilo que necesites, pero debido al orden de carga de WordPress, hay veces que no sabrá que tiene que cargar un script u hoja de estilo hasta muy avanzado el proceso de carga de la página.

Por eso es importante, en esos casos, registrarlos antes con wp_register_script() o wp_register_style()

¿Cómo puedo forzar que mi script se cargue en el footer en lugar del head?

Esta es una de las opciones de las funciones wp_register_script() y wp_enqueue_script(). Hay que poner a true el último parámetro que recibe la función.

wp_register_script( string $handle, string|bool $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Por cierto, que en el Codex de WordPress tienes una lista completa de todos los scripts que se cargan por defecto con WordPress. Merece la pena darle un vistazo.

Referencias

WordPress wp_enqueue_script() vs. wp_register_script() – JH Tech Services
WordPress Theme Handbook: Including CSS & JavaScript – https://developer.wordpress.org/themes/basics/including-css-javascript/
Codex: function wp_register_script
Codex: function wp_enqueue_script
Codex: functions wp_localize_script

Entradas relacionadas

¿Cuál es la diferencia entre is_single() e is_singular()?

La entrada Diferencia entre wp_register_script y wp_enqueue_script se publicó primero en KungFuPress por Kung Fu Press

Sumar y restar cantidades con SQL en WordPress

Juanan Ruiz — Sat, 27 Jul 2019 15:58:11 +0000

La entrada Sumar y restar cantidades con SQL en WordPress se publicó primero en KungFuPress por KungFuPress

Hace unos días un usuario preguntaba en un comentario del blog como sumar y restar cantidades a una tabla de productos en WordPress usando SQL.

Parecía una pregunta simple con una respuesta simple pero después de darle un par de vueltas y hacer una pequeña prueba de concepto me ha parecido interesante mostrar aquí las dos aproximaciones que se me ocurren.

El ejemplo es sencillo, tengo una tabla de productos que contiene el nombre del producto y la cantidad de producto en existencia. La idea es incrementar o disminuir estas cantidades a medida que se compren o se vendan productos.

Para ello he creado un plugin que crea las tablas necesarias y un par de formularios en el escritorio para comprar y vender productos. Si necesitas entender mejor como funciona todo eso puedes consultar el artículo «Cómo programar un formulario sin utilizar plugins» en este blog.

Update directo

La primera solución que he adoptado se basa en realizar un UPDATE, sumando o restando al campo cantidad el incremento o decremento.

Sería algo así:

$cantidad_adquirida = (int)$_POST['cantidad'];
$id_producto = (int)$_POST['id_producto'];
$wpdb->query( $wpdb->prepare( "UPDATE `$tabla_producto` SET cantidad = cantidad + %d WHERE id = %d", $cantidad_adqurida, $id_producto ));

Esta aproximación es muy directa y creo que bastante fácil de entender. Vamos con la segunda.

Select más $wpdb->update

Aproximación en tres pasos: uno para averiguar la cantidad actual con un SELECT , luego hago la suma (o la resta) y finalmente una actualización a la nueva cantidad utilizando $wpdb->update

$cantidad_vendida = (int)$_POST['cantidad'];
$id_producto = (int)$_POST['id_producto'];
$consulta_cantidad_actual = "SELECT cantidad FROM $tabla_producto WHERE id = $id_producto";
$cantidad_actual = $wpdb->get_var($consulta_cantidad_actual);
$cantidad_final = $cantidad_actual - $cantidad_vendida;
$wpdb->update( $tabla_producto, array( 'cantidad' => $cantidad_final ), array( 'id' => $id_producto ));

Creo que esta opción, aunque un poco menos directa, es más versátil y me permitiría implementar más operaciones encapsulándola en una sola función, ya es cuestión de contexto.

En cualquier caso tienes el código completo en GitHub en forma de plugin para que puedas instalarlo y probarlo en local. Ten cuidado porque aunque está todo hecho dentro del escritorio no tomo todas las medidas de seguridad a la hora de procesar el formulario por simplificar la explicación.

Por cierto que el código incluye algunas otras cositas interesantes que espero poder comentar en próximos artículos.

Y, por último, me encantaría que si se te ocurre otra manera de encararlo me dejaras un comentario para ampliar el artículo y ofrecer una solución más completa.

La entrada Sumar y restar cantidades con SQL en WordPress se publicó primero en KungFuPress por Kung Fu Press

Configura la seguridad de tu WordPress de una manera sencilla con el plugin iThemes Security

Juanan Ruiz — Wed, 10 Jul 2019 17:35:20 +0000

Aunque en este blog normalmente te hablo sobre temas relacionados con el desarrollo de WordPress me parece que es muy importante adoptar unas medidas mínimas de seguridad para que en las webs que administres no se pierda o desluzca tu trabajo por esta expuesto a riesgos innecesarios. Así que he hecho esta excepción para contarte que plugin utilizo habitualmente para aumentar la seguridad de mis sitios WordPress.

Las medidas de seguridad, a la hora de desarrollar un plugin, ya os las pongo de serie en cualquier artículo que escribo. Pero recuerda que una cadena siempre se parte por el eslabón más débil, así que te recomiendo vigilar todos los frentes.

iThemes Security es mi plugin favorito de seguridad en WordPress. Fácil de configurar para un usuario medio te protege de una gran cantidad de amenazas incluso en su versión gratuita. Por ello recomiendo instalarlo, activarlo y configurarlo en todos tus sitios WordPress. A no ser que ya uses otro claro.

Una vez instalado y activado, accede al panel de configuración y allí encontrarás un cuadro de diálogo que te recomienda activar una serie de módulos básicos para asegurar tu sitio. Pulsa sobre Secure Site para activar estas medidas de seguridad básicas.

Una vez hecho esto verás una serie de fichas básicas, algunas activadas otras no, que configuran distintos aspectos de seguridad. Cada una de estas fichas es un pequeño plugin en sí mismo y de vez en cuando añaden alguna ficha nueva.

Además de la seguridad que obtienes “de serie” al ejecutar la opción Secure Site que te acabo de comentar, hay otras medidas interesantes que puedes activar:

Detección 404: si un usuario o un bot intenta buscar rendijas de seguridad en tu web irá accediendo de forma insistente a páginas al azar. Cuando estas no existen tu web genera un error 404. Si activas este filtro en iThemes el plugin rechazará nuevas conexiones desde cualquier dirección IP que haga más de 20 intentos de conexión a páginas inexistentes.
Modo de reposo: los ataques más peligrosos a tu red pueden producirse mientras duermes. Seguro que hay un periodo del día en el que casi nunca vas a acceder a tu escritorio de WordPress. Durante esas horas puedes prevenir ataques deshabilitando el acceso a la zona de administración. Con este módulo puedes configurar ese bloqueo horario a tu gusto. Si un día concreto sabes que vas a necesitar acceder a una hora bloqueada basta que lo deshabilites de manera temporal cuando todavía estás en periodo de acceso autorizado.
Detección de cambios de archivos: este es un poco latoso por la cantidad de falsos positivos que genera y que llegarán a tu correo. Pero te lo recomiendo si quieres enterarte cuando se realicen cambios de archivos en tu instalación. Hay que saber discernir cuándo estos cambios son autorizados, debidos a actualizaciones, o son obra de algún usuario malicioso que se nos haya colado.
Permisos de archivos : este es un poco más avanzado porque hay que tocar los permisos en el servidor o hosting. Comprueba la configuración actual de permisos de las carpetas y archivos más sensibles de WordPress y te señala cuales están correcta o incorrectamente configurados con una sugerencia sobre la estructura ideal de permisos. No es muy complicado, te puede evitar algún susto pero tienes que saber modificar permisos en el servidor.
SSL : si tienes un certificado SSL para que tus visitantes accedan de manera segura (algo muy recomendable por cierto), es importante que nadie entre por http pues estaría menos protegidos. Con este módulo fuerzas que cualquier intento de acceder por http se redirija a https.
Requisitos de contraseñas: cualquier usuario con cuenta en tu sitio debería utilizar una contraseña segura (recuerda lo del eslabón más débil). Con la configuración por defecto de iThemes el requisito de contraseña segura se establece sólo para los administradores, pero te recomiendo que lo apliques al perfil más bajo que aparezca en tu lista, en mi caso Suscriptor , para que afecte a todos los perfiles de usuario.

Algún efectos colateral:

Bloqueo de REST API: Este es uno de los bloqueos que iThemes Security activa por defecto cuando aseguras tu sitio con las opciones por defecto. En algunos casos es recomendable dejarlo así porque la REST API puede dar acceso público a información de tu sitio que piensas que es privada. El problema es que algunos plugins y servicios necesitan que esté activada. Así que si la activas y ves que no te perjudica en nada, déjala así y si ves que te quita algo “imprescindible” para ti puedes desbloquearla accediendo desde la ficha Ajustes de WordPress y en REST API escoges la opción Acceso por defecto. En uno de mis blogs esta opción hacía que el panel que me mostraba los resultados de Google Analytics en el escritorio me dejara de funcionar. Pero cómo puedo consultar estos datos desde otras herramientas he preferido dejar la API REST bloqueada de momento.

Avisos de bloqueo e intentos de acceso: de vez en cuando recibirás un correo de que cierta IP se ha bloqueado o que un usuario ha intentado entrar como “admin”. Esto es normal, son cosas que pasaban en tu sitio pero no lo sabías, ahora serás un poco más consciente y tendrás cuidado de no tener una cuenta que se llame “admin”, de usar buenas contraseñas y de estar un poco más pendiente de la seguridad de tu sitio pero sin volverte paranoico tampoco.

Recuerda que los sitios web reciben ataques casi a diario, aunque no seamos conscientes de ello y toma estas precauciones de seguridad nos puede ahorrar muchos dolores de cabeza con muy poco esfuerzo.

Si tienes alguna duda sobre este artículo, alguna aportación para mejorarlo o simplemente sientes un deseo refrenable de compartirlo con otros. No lo dudes, déjame un comentario o comparte un enlace en tu red social favorita. Recuerda que el karma exista y que las buenas acciones se nos devuelven multiplicadas

¿Cuál es la diferencia entre is_single() e is_singular()?

Juanan Ruiz — Wed, 26 Jun 2019 19:54:30 +0000

La función is_single() devuelve true si el contenido actual es una entrada única, un post.

La función is_singular() devuelve true si el contenido actual es una entrada, página, custom post type, etc. Cualquier tipo de contenido, pero que sea único. Devuelve false si el contenido actual es una página de categoría, etiqueta o un listado cronológico de entradas.

Ambas tienen en común que se utilizan para variar el comportamiento o el aspecto de la página actual en función del tipo de contenido que se está cargando.

Ten en cuenta que, si no hay contenido, también devuelve false, así que no te confíes pensando que tienes una pila de artículos por delante cuando en realidad no hay nada.

Un ejemplo para que lo veas más claro:

if ( is_singular() ) { 
  //carga un script y una hoja de estilos 
  wp_enqueue_script( … ); 
  wp_enqueue_style( … );
} else { 
  // carga un paginador
}

La función is_single() tiene dos funciones hermanas de utilidad similar:

is_page(): si el contenido actual es una página única.
is_attachment(): si el contenido actual es un enlace único (no creo que nadie use esto a estas alturas)

La función is_singular() no tiene hermanas, pero si tiene varias “contrarias”:

is_category()
is_tag()
is_archive()
is_author()
is_search()
is_tax()

A toda esta “familia» tan numerosa se les llama Conditional Tags y todas aceptan un parámetro que puede ser de tipo entero, cadena o array para poder ser más específicos en la búsqueda:

En el caso de is_single() y sus hermanas se le puede pasar el ID concreto del contenido, el slug o un array de identificadores o slugs.
En el caso de is_singular(), y sus contrarias, se puede especificar el tipo de contenido concreto o un array de tipos de contenido.

Por otro lado, no sé si has caído en la cuenta de que estas funciones tal como las ves tienen utilidad en las plantillas de los temas, pero no en un plugin.

Desde un plugin tienes la misma funcionalidad a través de la clase WP_Query que incorpora todos estos métodos: is_single, is_page, is_archive, is_preview, is_author, is_category, is_tag, is_tax, is_search, is_feed, is_comment_feed, is_404, is_attachment, is_singular.

Referencias

Cómo obtener la versión de WordPress desde un plugin

Juanan Ruiz — Tue, 14 May 2019 06:01:41 +0000

Para obtener la versión de WordPress puedes usar la función get_bloginfo('version') que te devuelve el número de versión, ejemplo: 5.2

Evidentemente esta función es útil, simplemente, para mostrar esta información a nuestros usuarios en un momento dado, sobre todo a editores o administradores del sitio.

Otro uso puede ser el de variar el comportamiento del plugin que estás desarrollando en función de la versión de WordPress actual. Para ello puedes usar la función version_compare que tiene precisamente esta misión. Esta función admite tres parámetros: los dos números de versiones que necesitas comparar y el operador de comparación que quieres usar.

En el siguiente ejemplo puedes ver estas dos funciones en acción en un pequeño plugin de usar y tirar.

El plugin muestra el número de versión actual como un elemento del menú de administración de WordPress, al pulsar sobre este nos mostrará una pequeña frase que varía en función de que la versión actual sea menor a la 5.0.

<?php
/**
 * Plugin Name: KFP Version WP
 * Author: Tonio Ruiz
 */

add_action("admin_menu", "Kfp_Vwp_Admin_menu");

function Kfp_Verwp_Admin_menu()
{
    add_menu_page(
        'Versión WordPress ', 'Wordpress ' . get_bloginfo('version'), 
        'manage_options', 'kfp_vwp_admin', 'Kfp_Vwp_admin', 'dashicons-wordpress'
    );
}

function Kfp_Vwp_admin()
{
    if (version_compare(get_bloginfo('version'), '5.0', '<')) {
        echo "<h3>Soy un WordPress " . get_bloginfo('version') 
        . " pregutemberiano</h3>";
    } else {
        echo "<h3>Soy un WordPress " . get_bloginfo('version') 
        . " con todo su Gutemberg</h3>";
    }
}

Por cierto la función get_blog_info( ) tiene muchas más utilidades: nombre del sitio, descripción, correo del administrador, url del sitio, etc. Puedes verlas todas en la referencia de WordPress.

¿Cómo programar un formulario en WordPress sin utilizar plugins?

Juanan Ruiz — Fri, 19 Apr 2019 14:53:40 +0000

Porqué desarrollar un formulario en vez de usar un plugin

Hay multitud de plugins para crear formularios, pero si eres programador de WordPress y lo único que necesitas es crear un par de formularios concretos puedes ofrecer una solución más personalizada creando un pequeño plugin de desarrollo propio, además ahorras la carga de un plugin mucho más grande, lo que redundará en la velocidad del sitio

Este plugin es muy mejorable pero creo que es un buen ejercicio para alguien que esté empezando. Si es tu caso y estás leyendo este artículo para aprender te recomiendo no ir cortando y pegando el código, sino irlo tecleando para asimilarlo mejor.

Por donde empiezo ¿cuál es el mejor sitio para el código de mi formulario?

En WordPress hay tres sitios diferenciados para desarrollar tu código:

En el tema (bueno en el tema hijo): recomendable si lo que estás haciendo es un cambio en la presentación, o agregando una información a tus páginas en la que vayas a usar fundamentalmente funciones de WordPress, con poco código propio, algo de HTML, algo de CSS, quizás JS, poco PHP.
En el archivo functions.php del tema (del tema hijo): igual que el anterior pero vas a usar esos cambios en varias plantillas o el tamaño del código añadido justifica una función.
En un plugin : si vas a necesitar algo más de lógica, tienes que escribir bastante PHP y no es tanto una cuestión de estética o presentación como de mecánica o comportamiento, la cosa está pidiendo un plugin a gritos. Además un plugin lo vas a poder usar independientemente del tema que tengas activo. En esta caso, que estás desarrollando un formulario claramente necesitas un plugin.

Creación del plugin

Crear un plugin es tan sencillo como crear un directorio nuevo en la carpeta de plugins y en su interior un archivo con el mismo nombre que la carpeta y la extensión .php

El nombre de carpeta y archivo debe ser descriptivo pero corto, no usar espacios sino guiones bajos y para evitar colisiones con otros plugins le puedes colocar delante unas siglas propias o un nombre corto: tu alias, tu marca, etc.

En mi caso la carpeta será kfp_form_autoevaluacion y el archivo principal kfp_form_autoevaluacion.php. Pero te animo a poner tu sufijo propio, y si vas a usar el formulario para otra cosa también debes cambiar el resto del nombre.

La primera versión del archivo debe contener una cabecera mínima para que WordPress lo considere un plugin. Ese mínimo funcional es el Plugin Name que debe reflejar el nombre de la carpeta y del archivo principal del plugin. No olvides la etiqueta inicial <?php

<?php 
/**
 * Plugin Name: KFP Form Autoevaluacion
 */

Si ahora vas al menú Plugins del panel de administración de WordPress debes ver allí tu plugin KFP Form Autoevaluacion , puedes activarlo y comprobar que no explota nada en tu web. Si quieres que tu plugin quede mejor documentado puedes añadir otros campos a la cabecera como Description , Author o Version

Empezando a pintar el formulario

Ya tienes claro que quieres desarrollar un formulario para recoger una serie de datos y grabarlos en una tabla, pero todavía no sabes dónde lo vas a colocar. La mejor forma de insertar un formulario en una página o un post de WordPress es hacerlo mediante un shortcode.

Un shortcode es una pequeña etiqueta de texto que va entre corchetes []. Para insertarlo en una página tendrás que hacerlo desde el modo HTML del editor clásico o usando un bloque especial de Gutemberg que se llama shortcode

Para programar un shortcode utilizas una función especial de WordPress a la que tienes que pasarle una función definida por ti que hará todo el trabajo. De momento el shortcode sólo va a pintar el formulario en la página o entrada donde lo coloques, sin capacidad de procesar el envío, ya llegarás a eso.

Para que sea más didáctico te iré poniendo el fragmento de código en el que irás trabajando, pero, si te pierdes en algún momento o quieres ver el resultado final antes de empezar, tienes todo el código en el repositorio de GitHub de KungFuPress.

Casi todo el código va comentado, así que espero que lo vayas entendiendo a medida que lo vas escribiendo, si no entiendes porqué se hace algo concreto te ruego me lo preguntes usando los comentarios para mejorar este tutorial.

Lo único que no he comentado es el parámetro action del formulario, que llama a la función get_the_permalink de WordPress, esta función devuelve la url (o permalink) de la entrada actual, con lo que cuando un usuario envíe el formulario se volverá a llamar a la entrada actual, por lo que aparecerá de nuevo el formulario. Más adelante pondrás un aviso para informar al usuario del resultado de su envío.

<?php
/**
* Plugin Name: KFP Form Autoevaluacion
*/

// Define el shortcode y lo asocia a una función
add_shortcode('kfp_aspirante_form', 'Kfp_Aspirante_form');

/** 
 * Define la función que ejecutará el shortcode
 * De momento sólo pinta un formulario que no hace nada
 * 
 * @return string
 */
function Kfp_Aspirante_form() 
{
    // Esta función de PHP activa el almacenamiento en búfer de salida (output buffer)
    // Cuando termine el formulario lo imprime con la función ob_get_clean
    ob_start();
    ?>
    <form action="<?php get_the_permalink(); ?>" method="post" id="form_aspirante"
class="cuestionario">
        <div class="form-input">
            <label for="nombre">Nombre</label>
            <input type="text" name="nombre" id="nombre" required>
        </div>
        <div class="form-input">
            <label for='correo'>Correo</label>
            <input type="email" name="correo" id="correo" required>
        </div>
        <div class="form-input">
            <label for="nivel_html">¿Cuál es tu nivel de HTML?</label>
            <input type="radio" name="nivel_html" value="1" required> Nada
            <br><input type="radio" name="nivel_html" value="2" required> Estoy 
                aprendiendo
            <br><input type="radio" name="nivel_html" value="3" required> Tengo 
                experiencia
            <br><input type="radio" name="nivel_html" value="4" required> Lo 
                domino al dedillo
        </div>
        <div class="form-input">
            <label for="nivel_css">¿Cuál es tu nivel de CSS?</label>
            <input type="radio" name="nivel_css" value="1" required> Nada
            <br><input type="radio" name="nivel_css" value="2" required> Estoy 
                aprendiendo
            <br><input type="radio" name="nivel_css" value="3" required> Tengo 
                experiencia
            <br><input type="radio" name="nivel_css" value="4" required> Lo 
                domino al dedillo
        </div>
        <div class="form-input">
            <label for="nivel_js">¿Cuál es tu nivel de JavaScript?</label>
            <input type="radio" name="nivel_js" value="1" required> Nada
            <br><input type="radio" name="nivel_js" value="2" required> Estoy 
                aprendiendo
            <br><input type="radio" name="nivel_js" value="3" required> Tengo 
                experiencia
            <br><input type="radio" name="nivel_js" value="4" required> Lo domino 
al dedillo
        </div>
        <div class="form-input">
            <label for="aceptacion">La información facilitada se tratará 
            con respeto y admiración.</label>
            <input type="checkbox" id="aceptacion" name="aceptacion"
value="1" required> Entiendo y acepto las condiciones
        </div>
        <div class="form-input">
            <input type="submit" value="Enviar">
        </div>
    </form>
    <?php

    // Devuelve el contenido del buffer de salida
    return ob_get_clean();
}

Comprueba que lo estás haciendo correctamente poniendo en una entrada de tu blog el shortcode [kfp_aspirante_form].

Cuando vayas a tu entrada debes ver un formulario como el de la imagen.

Bueno, no es lo más estético que habrás visto en formularios, pero… ¡es el tuyo!

Un poco de estilo

Si te duelen los ojos de ver este formulario puedes insertar una pequeña hoja de estilo para adecentarlo desde el propio plugin. Crea un fichero dentro de la carpeta del plugin con el nombre style.css y el siguiente contenido:

form.cuestionario {
    width: 600px;
}
form.cuestionario label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
form.cuestionario .form-input {
    padding: 1em;
}
form.cuestionario .form-input input[type='text'],
form.cuestionario .form-input input[type='email'] {
    display: block;
    width: 100%;
}
p.exito {
    font-size: 1.5em;
    padding: 1em;
    border: 2px solid green;
    background: lightgreen;
}
p.error {
    font-size: 1.5em;
    padding: 1em;
    border: 2px solid red;
    background: #ff8787;
}

Luegon inserta la función wp_enqueue_style dentro de la función Kfp_Aspirante_form antes de abrir el buffer de salida ob_start que imprime el formulario.

// Carga esta hoja de estilo para poner más bonito el formulario
wp_enqueue_style('css_aspirante', plugins_url('style.css', __FILE__));

// Esta función de PHP activa el almacenamiento en búfer de salida (output buffer)
// Cuando termine el formulario lo imprime con la función ob_get_clean
ob_start();

Crear la tabla para recoger los datos

Casi todo el contenido de un blog de WordPress, ya sean entradas, páginas o incluso las imágenes; se graban en la misma tabla de la base de datos: la tabla wp_posts. Esto tiene sus ventajas y sus incovenientes, y quizás para grabar los datos de un formulario lo más adecuado sería crear un custom post type o tipo personalizado con sus correspondientes custom fields o campos personalizados.

En este caso he preferido crear una tabla aparte para recoger los datos. El momento idoneo para crear esta tabla o comprobar que ya existe es en el momento en que se activa el propio plugin. Para ello puedes usar la función register_activation_hook y una sencilla consulta SQL de creación de tabla. Tienes un buen manual de MySQL en Wikilibros y si quieres algo más rápido mira el artículo sobre SQL en Wikipedia.

Puedes poner este código en cualquier lugar del fichero del plugin, yo he preferido ponerlo casi al principio, detrás de la cabecera y antes de definir el shortcode.

// Cuando el plugin se active se crea la tabla para recoger los datos si no existe
register_activation_hook(__FILE__, 'Kfp_Aspirante_init');

/**
 * Crea la tabla para recoger los datos del formulario
 *
 * @return void
 */
function Kfp_Aspirante_init() 
{
    global $wpdb; // Este objeto global permite acceder a la base de datos de WP
    // Crea la tabla sólo si no existe
    // Utiliza el mismo prefijo del resto de tablas
    $tabla_aspirantes = $wpdb->prefix . 'aspirante';
    // Utiliza el mismo tipo de orden de la base de datos
    $charset_collate = $wpdb->get_charset_collate();
    // Prepara la consulta
    $query = "CREATE TABLE IF NOT EXISTS $tabla_aspirantes (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        nombre varchar(40) NOT NULL,
        correo varchar(100) NOT NULL,
        nivel_html smallint(4) NOT NULL,
        nivel_css smallint(4) NOT NULL,
        nivel_js smallint(4) NOT NULL,
        aceptacion smallint(4) NOT NULL,
        created_at datetime NOT NULL,
        UNIQUE (id)
        ) $charset_collate;";
    // La función dbDelta permite crear tablas de manera segura se
    // define en el fichero upgrade.php que se incluye a continuación
    include_once ABSPATH . 'wp-admin/includes/upgrade.php';
    dbDelta($query); // Lanza la consulta para crear la tabla de manera segura
}

Una vez tecleado este código (recuerda que siempre recomiendo teclear el código en lugar de copia y pegar) debes desactivar el plugin y volver a activarlo para que se ejecute la función register_activation_hook. Si todo ha ido bien deberías poder ver en tu base de datos la nueva tabla (algo como wp_aspirante ).

Grabar los datos

Ya tienes definido el formulario y la tabla preparada, ¿no sería maravilloso qué cuando accedas al formulario y rellenes los datos estos se guarden en la tabla? Pues eso es lo que vas a hacer ahora.

Debes escribir este código dentro de la función Kfp_Aspirante_form que creaste al definir el shortcode. Puedes ponerlo hacia el principio o el final, pero dentro de la función, yo he preferido ponerlo al principio, delante del formulario que acabas de crear.

Lo primero que deberías hacer es comprobar que vienen rellenos todos los datos que vengan marcados como required en el formulario, se supone que sin esos no tendría sentido guardar la información en la base de datos. En este caso todos lo son, así que se comprueban todos. Esta comprobación la acabas de realizar, precisamente con el required , en el lado del cliente, pero como no todos nuestros visitantes van a acceder con un navegador actualizado lo debes volver a comprobar aquí también. Esto te va a pasar en más ocasiones, todo lo que compruebes o sanees en el lado del cliente debes volver a comprobarlo en el lado del servidor

add_shortcode('kfp_aspirante_form', 'Kfp_Aspirante_form');

/** 
 * Define la función que ejecutará el shortcode
 * Comprueba si se han enviado los datos desde el formulario
 * y pinta el formulario
 *
 * @return string
 */
function Kfp_Aspirante_form() 
{
    global $wpdb; // Este objeto global permite acceder a la base de datos de WP
    // Si viene del formulario  graba en la base de datos
    // Cuidado con el último igual de la condición del if que es doble
    if ($_POST['nombre'] != ''
        AND is_email($_POST['correo'])
        AND $_POST['nivel_html'] != ''
        AND $_POST['nivel_css'] != ''
        AND $_POST['nivel_js'] != ''      
        AND $_POST['aceptacion'] == '1'
    ) {
        $tabla_aspirantes = $wpdb->prefix . 'aspirante'; 
        $nombre = sanitize_text_field($_POST['nombre']);
        $correo = $_POST['correo'];
        $nivel_html = (int)$_POST['nivel_html'];
        $nivel_css = (int)$_POST['nivel_css'];
        $nivel_js = (int)$_POST['nivel_js'];
        $aceptacion = (int)$_POST['aceptacion'];
        $created_at = date('Y-m-d H:i:s');
        $wpdb->insert(
            $tabla_aspirantes,
            array(
                'nombre' => $nombre,
                'correo' => $correo,
                'nivel_html' => $nivel_html,
                'nivel_css' => $nivel_css,
                'nivel_js' => $nivel_js,
                'aceptacion' => $aceptacion,
                'created_at' => $created_at,
            )
        );
        echo "<p class='exito'><b>Tus datos han sido registrados</b>. Gracias 
            por tu interés. En breve contactaré contigo.<p>";
    }
// Esto que viene ya lo debes tener escrito del primer paso    
    ob_start();
    ?>
<form action="<?php get_the_permalink(); ?>" method="post" id="form_aspirante"
    class="cuestionario">
// ...y continúa el formulario que escribiste

Graba el código en tu editor y recarga la página donde estás mostrando el formulario, si todo ha ido bien, debería aparecer el mensaje de confirmación y en la base de datos deberías ver la información grabada.

Validando y saneando datos

Observa que en el código que acabas de teclear se hacen varias comprobaciones de los datos antes de grabarlos. Enumero las funciones utilizadas:

sanitize_text_field : impide que puedan ir etiquetas o caractéres “peligrosos” dentro de un campo de texto.
is_email : función de WordPress para validar que una cadena es un correo bien conformado.
(int): es un “cast” de php que intenta convertir la variable que viene a continuación en una variable de tipo int. Sería un saneado.

Por último, en todo formulario que desarrolles debes intentar evitar un ataque de CSRF (Cross-Site Request Forgery) . Para ello vas a insertar un campo nonce que te ayude a comprobar que el formulario que se está procesando viene de tu propia web utilizando las funciones wp_nonce de WordPress. Tienes una buena explicación de lo que es un ataque de este tipo en el artículo “Cross-site Request Forgery: Dos ejemplos para entenderlo”.

Así que tienes que introducir este código (o uno parecido) justo después de la etiqueta form y antes del primer input.

<form action="<?php get_the_permalink(); ?>" method="post" id="form_aspirante"
      class="cuestionario">
    <?php wp_nonce_field('graba_aspirante', 'aspirante_nonce'); ?>

Por último tienes que incluir una condición más cuando estás comprobando si vienen todos los datos requeridos del formulario

AND $_POST['aceptacion'] == '1'
AND wp_verify_nonce($_POST['aspirante_nonce'], 'graba_aspirante')

Sobre el tema de validación y saneado estoy preparando un artículo que espero publicar próximamente.

Bola extra: cumplir con RGPD en tú formulario

Una cosa que muchos plugins de formulario (al menos la versión gratuita) no hacen, es cumplir con los requisitos básicos de RGPD (Reglamento General de Protección de Datos) al solicitar la aceptación de “Política de Privacidad”: guardar el nombre de la persona que da su consentimiento, el acepto, la dirección IP, la fecha y la hora.

Aunque lo incluyo en el código completo del plugin, que te puedes descargar desde Github, te dejo como ejercicio el desarrollarlo por tu cuenta. Teniendo en cuenta que ya guarda el nombre, el “acepto” y la fecha con la hora, sólo faltaría guardar la IP.

Que yo conozca no hay ninguna función en WordPress que te devuelva la IP del usuario así que te animo a buscar en la web alguna solución para implementar tu propia función dentro del plugin, a la que puedas llamar antes de grabar los datos, para que te devuelva la IP del usuario.

Crear un menú de administración para el plugin

Por último necesitarás alguna forma de consultar los datos recogidos por el formulario que se han ido almacenando en la base de datos. Como estos datos solo deben estar accesibles a los administradores del sitio vas a crear un menú específico dentro de la zona de administración.

Para ello usuarás el hook admin_menu que llamará a la función Kfp_Aspirante_menu.

Esta función a su vez utiliza la función add_menu_page de WordPress, encargada de crear el menú si el usuario tiene privilegios suficientes. La función add_menu_page recibe varios argumentos:

El título de la página que se cargará al seleccionar el menú.
El nómbre del elemento del menú.
La capacidad (o privilegio) que tiene que tener el usuario para que se cargue el menú, en este caso manage_options.
El slug o alias que aparecererá en la URL de la página de administración.
El nombre de la función que construirá la página que se cargará cuando se seleccione el menú.
El icono que aparecerá asociado al menú. Hay varias formas de hacerlo, para simplificar vas a usar un dashicon, en este caso dashicon-feedback
La posisición del elemento en el menú, en este caso he puesto 75. Aunque esto depende de la versión de WordPress y de los plugins que tengas ya instalados, para no marearte lo mejor es no ponerlo y saldrá el último

// El hook "admin_menu" permite agregar un nuevo item al menú de administración
add_action("admin_menu", "Kfp_Aspirante_menu");

/**
 * Agrega el menú del plugin al panel de administración
 *
 * @return void
 */
function Kfp_Aspirante_menu() 
{
    add_menu_page(
        'Formulario Aspirantes', 'Aspirantes', 'manage_options', 
        'kfp_aspirante_menu', 'Kfp_Aspirante_admin', 'dashicons-feedback', 75
    );
}

Tras grabar el código ve al panel de administración de WordPress y allí debe aparecer un nuevo elemento de menú con el nombre Aspirantes , al pulsar sobre él se carga un panel a la derecha en el que, de momento, no aparece nada. Ahora vas a mostrar ahí los datos que has capturado desde el formulario (espero que hayas rellenado el formulario unas cuantas veces para tener algo que mostrar).

Crear una tabla para mostrar los datos del plugin desde el panel de administración

Uno de los argumentos de la función add_menu_page es el nombre de una función que pinte el panel o página de administración que se va a cargar cuando pulses sobre tu nuevo menú. Esa función , que vas a definir ahora, es la encargada de generar el código HTML que aparecerá en la página.

La función Kfp_Aspirante_admin hará cuatro cosas:

Imprimir la cabecera de una tabla HTML para mostrar los datos
Ejecutar una consulta SQL para obtener los datos desde la tabla de la base de datos generada por el propio plugin.
Recorrer con un bucle los registros obtenidos para irlos pintando en la tabla HTML
Imprimir el cierre de la tabla HTML

Observa que cuando vas a mostrar los campos de la base de datos escapas su contenido para que el usuario no reciba ninguna sorpresa. A pesar de todas las precauciones que has tomado en la fase de recogida de datos nunca puedes estar 100% seguro de que alguien haya inyectado algo en tus tablas, así que debes escapar en salida.

/**
 * Crea el contenido del panel de administración para el plugin
 *
 * @return void
 */
function Kfp_Aspirante_admin()
{
    global $wpdb;
    $tabla_aspirantes = $wpdb->prefix . 'aspirante';
    echo '<div class="wrap"><h1>Lista de aspirantes</h1>';
    echo '<table class="wp-list-table widefat fixed striped">';
    echo '<thead><tr><th width="30%">Nombre</th><th width="20%">Correo</th>
        <th>HTML</th><th>CSS</th><th>JS</th>
        <th>PHP</th><th>WP</th><th>Total</th></tr></thead>';
    echo '<tbody id="the-list">';
    $aspirantes = $wpdb->get_results("SELECT * FROM $tabla_aspirantes");
    foreach ( $aspirantes as $aspirante ) {
        $nombre = esc_textarea($aspirante->nombre);
        $correo = esc_textarea($aspirante->correo);
        $motivacion = esc_textarea($aspirante->motivacion);
        $nivel_html = (int)$aspirante->nivel_html;
        $nivel_css = (int)$aspirante->nivel_css;
        $nivel_js = (int)$aspirante->nivel_js;
        $nivel_php = (int)$aspirante->nivel_php;
        $nivel_wp = (int)$aspirante->nivel_wp;
        $total = $nivel_html + $nivel_css + $nivel_js + $nivel_php + $nivel_wp;
        echo "<tr><td><a href='#' title='$motivacion'>$nombre</a></td>
            <td>$correo</td><td>$nivel_html</td><td>$nivel_css</td>
            <td>$nivel_js</td><td>$nivel_php</td><td>$nivel_wp</td>
            <td>$total</td></tr>";
    }
    echo '</tbody></table></div>';
}

Guarda el código del plugin y selecciona de nuevo el menú Aspirante , si todo ha ido bien deberías poder ver los datos recogidos.

Para nota

Las tablas del panel de administración se podría usar la clase WP_List_Table , aunque hay que tomar ciertas precauciones. Hay un buen ejemplo en https://clearintelligence.mx/wp-list-table-una-guia-paso-a-paso/ y otro en https://www.smashingmagazine.com/2011/11/native-admin-tables-wordpress/

Reflexiones finales

Espero que hayas podido seguir este tutorial sin mayor problema y que tu formulario esté funcionando a la perfección, ¡me encantaría verlo en acción si me pasas la URL!

Te animo a explorar otros temas a partir de lo que has aprendido con esta práctica. Piensa en algo que necesites resolver con WordPress desarrollando un plugin sencillo de este estilo e intenta solucionarlo.

Si te quedas atascado en algún punto no dudes en preguntarme tus dudas y juntos podemos intentarlo. Si observas algún error o se te ocurre algo que mejorar tampoco te lo guardes.

¡Espero impaciente tus comentarios!

Referencias

Código completo en el repositorio de GitHub de KungFuPress.
Manual de MySQL en Wikilibros
SQL en Wikipedia
Artículo: “Cross-site Request Forgery: Dos ejemplos para entenderlo”
https://www.arsys.es/blog/programacion/generar-menus-admin-wordpress/
Ejemplos de funciones para obtener la IP del visitante:
Hooks y funciónes de WordPress utilizados:

¿Deberías quitar o limitar las revisiones de artículos en WordPress?

Juanan Ruiz — Tue, 05 Mar 2019 17:37:40 +0000

Una de las cosas que los usuarios no perdonan en una web es la lentitud. El contenido podrá ser de mayor o menor calidad y el diseño será mas o menos atractivo, si encuentran algo de valor seguirán contigo. Pero una página web que carga lenta es insufrible, si a eso le agregas la manía que tiene Google porque las webs sean rápidas tienes una tormenta perfecta.

En WordPress una de las dimensiones críticas que hay que controlar es el tamaño de la base de datos. Cuando creas un artículo o página y vas haciendo modificaciones el propio sistema guarda automáticamente las distintas versiones en la base de datos. Esto en algunos casos es de gran ayuda porque te permite revisar y recuperar versiones antiguas del contenido, pero con el tiempo las revisiones se van acumulando en la base de datos, el tamaño de esta va creciendo y tu sitio comienza a relentizarse (en webs con pocos recursos incluso he visto que impedía la creación de nuevas entradas).

Por tanto es necesario buscar una solución de compromiso ante el dilema de mantener o no mantener revisiones. Si tienes un buen plan de copias de seguridad y optas por optimizar la velocidad ante todo, puedes prescindir totalmente del sistema de revisiones. Si quieres una solución intermedia puedes al menos limitar el número de versiones que se guardan.

Otra solución bastante conservadora, aunque supone un poco más trabajo, es utilizar un plugin como WP-Optimize que te permite comprobar el total de revisiones de tus artículos y tomar distintas medidas al respecto, este plugin también es muy útil porque permite localizar y borrar registros huérfanos de tu base de datos.

Cómo deshabilitar las revisiones de artículos desde código

Para ello necesitas modificar el archivo wp-config.php. Lo primero es acceder a los ficheros de tu sitio web y hacer una copia de seguridad de este fichero por si accidentalmente modificas algo que no debieras.

Luego editas el fichero y más o menos debajo de la línea

$table_prefix = ‘wp_’;

pero siempre por encima de las líneas donde se define la constante “ABSPATH” añades la siguiente línea:

define('WP\_POST\_REVISIONS', false);

Es importante que esté bien escrito, si al volver a la web te aparece un error o la temida pantalla en blanca, vuelve a revisar lo que has escrito, mira que las comillas estén bien, el punto y coma, etc. También es importante la posición dentro del fichero como te he comentado antes. Pero tampoco te asustes demasiado, si quieres ser implementador o desarrollador de WordPress te tienes que acostumbrar a estas cosas. Para quedarte más tranquilo puedes practicar antes en un blog de pruebas o en uno local. Y recuerda siempre sacar a priori una copia de seguridad del archivo wp-config.php por si la lías parda.

Con esto has quitado las revisiones, pero WordPress seguirá haciendo el autoguardado automático del archivo, esto no ocupa lugar en la base de datos, pero, si quieres que no se haga con tanta frecuencia puedes aumentar el tiempo que viene establecido por defecto, que es de un minuto, a 3 o 5 minutos. Para ello encima de la línea anterior agrega esta otra:

define('AUTOSAVE\_INTERVAL', 300);

Con lo cual el autoguardado se define a 300 segundos, o sea, 5 minutos. Recuerda es importante que todo esto vaya encima de la línea del “Absolute path”.

Guarda finalmente el fichero wp-config.php y verás que en el panel de publicación de los artículos ya no aparece la opción de revisiones.

Cómo (NO) deshabilitar las revisiones de artículos con un plugin. ¡Cuidado lee hasta el final!

Resulta que buscando un plugin que hiciera esto, casi el único que encuentro es Disable Post Revision (https://wordpress.org/plugins/disable-post-revision/) es un plugin muy ligero que sólo sirve para estos. Además ofrece la opción de deshabilitar las revisiones en función del tipo de contenido: páginas, entradas, medios, etc.

Cuando analizo un plugin o publico un fragmento de código en esta web no me conformo con buscar el primer plugin que encuentro, probarlo y tirar para adelante. Me gusta ver el código del plugin para ver lo que hace internamente, ve que repercusiones tiene sobre el sitio, sobre la base de datos, etc.

Cuál ha sido mi sorpresa cuando tras instalar este plugin, configurarlo y ver que funciona, me voy a la base de datos y veo que las revisiones se siguen grabando, aunque no se tiene acceso a ellas desde el panel de control. O sea el plugin te quita la ventaja de poder acceder a las revisiones y te sigue dejando el marrón permitir su almacenamiento en la base de datos ¡Que mal! ¡Ni se te ocurra instalarlo!

Cómo quitar revisiones antiguas en un sitio existente con un plugin

Si te toca revisar un sitio existente que no tenía ningún plugin de este tipo instalado previamente puede que te encuentres con cientos de revisiones de algunos contenidos que están relentizando la base de datos, las soluciones vistas hasta ahora no valen

Para quitar las revisiones antiguas el plugin que brilla con luz propia es WP-Optimize. Antes de empezar a utilizar este plugin o cualquiera que se dedique a borrar contenidos de la base debes hacer sí o sí una copia de seguridad de la base de datos. Es más, las primeras pruebas deberías hacerla en una web local con contenido de prueba que no te importe perder. Si aún no tienes ningún plugin de copias de seguridad instalado te recomiendo Updraft Plus (https://updraftplus.com/)

Una vez instalado el plugin dentro de su menú de administración ve a la opción Base de datos, marca la opción Limpiar todas las revisiones de entradas y dale al botón Ejecutar optimización.

Como verás WP-Optimize tiene muchas más opciones, pero en este artículo no me quiero salir del tema que nos tocaba.

Como quitar revisiones antiguas desde código.

Para quitar revisiones antiguas desde código necesitas tener acceso a la base de datos de tu sitio WordPress y en ella teclear la siguiente sentencia SQL:

DELETE FROM wp\_posts WHERE post\_type = "revision";

Resumen

Quería escribir una simple entrada sobre cómo añadir una línea a tu fichero wp-config.php por si necesitas deshabilitar el mecanismo de almacenamiento de revisiones de WordPress. No es algo que te recomiende hacer por defecto porque en muchas ocasiones viene muy bien poder deshacer los cambios que hemos realizado en un artículo o recuperar información de una versión antigua de una página que pueda sernos útil.

Sólo quiero que seas consciente de que todas estas revisiones van quedando almacenadas en la base de datos y si tienes muchas entradas y haces muchas revisiones en ciertos alojamientos podrían suponer una carga para el sistema.

Por el camino me he encontrado un plugin que no hacía lo que decía y me he quedado un poco a cuadros porque es un plugin del repositorio oficial. Por favor si alguien lo usa y le funciona que me deje un comentario de la versión que está usando o que me diga que he podido hacer mal.

Deconstruyendo un tema de WordPress para entender como funciona

Juanan Ruiz — Fri, 15 Feb 2019 12:18:10 +0000

Desde pequeñito me gustaba desmontar las cosas para ver cómo funcionaban, recuerdo que con 5 o 6 años a mi madre se le estropeó el despertador de la mesita de noche. Era un despertador muy moderno, de plástico amarillo y dos campanas que sonaban con un pequeño martillo que había en medio. El despertador hubo que tirarlo a la basura, pero yo quedé extasiado de haber visto sus tripas y estuve toda la tarde manipulando los engranajes.

Con los sistemas informáticos me pasa lo mismo: me gusta mirar dentro para ver como funcionan. Al principio, como no tengo ni idea me pongo a sacar y meter piezas para saber qué es lo importante y que no lo es tanto.

Para esta práctica te recomiendo instalar el tema TwentyTwelve de WordPress. Vas a destrozar el tema usando el canto de tus dedos. ¡Yiaaaah!

Preparando el tema de prueba

Para empezar vas a descubrir como crear un tema en menos de 10 segundos. Instala el tema TwentyTwelve, desde un navegador de archivos, busca la carpeta del tema dentro de wp_content/themes y hazle una copia con otro nombre en el mismo directorio. Abre el fichero style.css que hay dentro de la carpeta que has copiado y renombrado, y cambia en la segunda línea el nombre de “TwentyTwelve” por otra cosa, en mi caso le voy a poner “TwentyKungFuPress”. Ve al panel de control, abre Apariencia > Temas. ¡Ya tienes un tema nuevo!

Ahora vamos a hacer algo parecido a lo que hice con el reloj. Crea una carpeta vacía dentro de wp_content/themes , puedes llamarla sala-de-espera. Ve a la carpeta donde están todos los archivos del tema TwentyKungFuPress o como lo hayas llamado y mueve todos los archivos y directorios que contiene a la carpeta que acabas de crear. Ve a la pantalla de administración de temas a ver qué ha pasado. Seguramente tendrás un mensaje de que el tema actual está dañado y WP ha vuelto a un tema por defecto para no dejar a tus visitantes en blanco.

Como lo mínimo que necesita un tema para funcionar son los ficheros index.php y style.css , traelos de nuevo desde la sala de espera y activa de nuevo el tema. Ahora el tema no dará errores pero cuando vayas a ver el sitio encontrarás un error parecido a este: “Fatal error: Uncaught Error: Call to undefined function twentytwelve_content_nav() in /app/public/wp-content/themes…”

Esto es debido a la llamada de funciones incorporadas al tema, que no pueden cargarse, seguramente debido a que no hemos incluido el archivo functions.php que es donde por convenio deberían estar, podríamos incluir este fichero o ir quitando del index.php las llamadas a las funciones que vayan fallando. Como el tema que hemos escogido de ejemplo está bien hecho es bastante fácil identificarlas porque todas empiezan por twentytwelve. De momento sólo encontraremos una o dos, así que podemos simplemente comentarlas. Vuelve a cargar tu sitio y ahora deberías poder ver la cabecera, el pie e incluso la barra lateral. ¡El tema está funcionando! Pero falta el contenido

Esto se debe con toda probabilidad a que falta un archivo llamado content.php que es el encargado de mostrar el contenido de cada entrada o página, en TwentyTwelve lo vas a encontrar directamente en la carpeta raiz, en temas más modernos puede estar un poco más escondido, por ejemplo en template-parts/post/content.php o en template-parts/content/content.php. Bueno, ¿sabes ya lo que tienes que hacer? Copia el archivo a su carpeta correspondiente y ahora deberías poder ver el contenido.

Puede que de nuevo aparezcan errores de llamadas a funciones, pues nada, ve a content.php y comenta las llamadas a las mismas. Si todo ha ido bien ahora deberías poder ver el contenido, la barra lateral, etc.

¡Pero es que todo se ve muy feo! Si, es verdad, así que sigue avanzando, copia ahora footer.php , functions.php y header.php desde la sala de espera, abre de nuevo el navegador y todo tu esfuerzo se verá recompensado con un error que comienza con “Warning: require(/app/public/wp-content/themes/twentykungfupress/inc/custom-header.php): failed to open stream …”

¡Que ingrato!, quiere más ficheros, se queja de uno que está en la carpeta inc así que para no escucharlo más copia la carpeta completa a tu tema (son dos o tres archivos solo).

¡Ahora, ahora! Esto ya se parece a un tema, sólo lo afea el contenido de la barra lateral, marchando ese sidebar.php.

Y ya que hemos agregado functions.php podemos quitar los comentarios que pusimos en index.php y en content.php. Verás que ahora se muestra la fecha de las entradas y alguna cosilla más que estaban a cargo de funciones definidas en function.php.

Si entras en una página o en una entrada (post), verás que parece funcionar correctamente, pero si observas bien verás que no aparece la caja para hacer comentarios, así que agrega también el fichero comment.php. Supongo que esto no ha arreglado nada ¿porqué?

Porque en realidad hemos forzado a WP a mostrar todo el contenido del sitio (la portada, las entradas, las páginas, las búsquedas, las categorías, etc) utilizando una sola plantilla, que es index.php pero la mayoría de los temas vienen con páginas dedicadas a cada uno de los tipos de contenido que hemos mencionado, así:

las entradas completas se muestran con single.php ,
las páginas con page.php ,
las búsquedas con search.php ,
las categorías con category.php , etc

Aquí tienes un esquema simplificado de la jerarquía de plantillas de WP para que veas de una manera gráfica esto que te cuento, si quieres una versión completa y más actualizada visita WP Hierarchy

Si ahora copias single.php verás que los comentarios ya aparecen en las entradas, pero ¿cómo puedes realmente saber que plantilla utiliza WP en cada momento? Hay un simpático plugin que lo muestra en la barra superior que aparece cuando has iniciado sesión en el blog, es el plugin Show Current Template que muestra la plantilla de la vista actual .Si pulsas sobre el nombre de la plantilla también da información sobre la ruta de la plantilla y las sub-plantillas que se están utilizando.

Instálalo desde el panel de control y ve agregando el resto de plantillas que le hemos quitado al tema: page.php , search.php , category.php , archive.php , etc. Ve mirando ahora como se cargan las entradas, las páginas, las categorías, etc. Así podrás comprobar que aunque a WP le gusta tener muchas plantillas al final se conforma con una sola: *index.php *

¿Cuál es la moraleja de todo este destrozo que hemos hecho?

Como desarrollador WordPress (o al menos como aprendiz de Kung Fu Press) debes perder ese miedo a tocar y romper cosas que tienen los usuarios menos avezados. Es normal que durante el desarrollo de un tema te dejes abierta una llamada a PHP, olvides poner un punto y coma al final de una línea, llames incorrectamente a una función o hayas borrado por accidente algún fichero. Tienes que acostumbrarte a enfrentar estas situaciones y resolverlas, puede que incluso algún cliente o amigo te venga con una instalación dañada de WP que no se atreve a tocar para no hacer más destrozos. Te va a tocar a ti recoger los cachitos y pegarlos de nuevo para que todo funcione. Y si ya tienes práctica actuarás con más seguridad y sangre fría.

Recuerda no hacer estas prácticas extremas en un sistema en producción, usa instalaciones locales de prueba donde no tengas nada que perder. Si te enfrentas a algo parecido en la vida real recuerda antes que nada hacer una copia de seguridad de todos los ficheros y de la base de datos. Si el sitio no está respondiendo no te valdrá ningún plugin así que tendrás que saber como hacer copias de seguridad de WP sin usar plugins.

Multiplica tu velocidad en Visual Studio Code utilizando Emmet

Juanan Ruiz — Mon, 04 Feb 2019 20:10:49 +0000

¿Qué es Emmet?

Emmet es un pequeño pero potente lenguaje de autocompletado de código que está disponible en prácticamente todos los editores que existen. ¡Incluso hay un plugin para usarlo en WordPress!

En Visual Studio Code, Emmet viene instalado por defecto, así que para usarlo sólo tenemos que aprender su sencilla sintáxis.

Para mi uno de los usos más interesantes que tiene es el de autocompletado de HTML y puede usarse para autocompletar etiquetas a medida que las vamos escribiendo o para formatear texto ya existente. También vale para CSS .

Imagina que un cliente te pasa todo el texto para colocar en su web en un fichero de Word, algo bastante típico ¿no?. Tienes dos opciones:

Intentar copiar el texto con el formato enriquecido que trae Word
Copiar el texto y pegarlo en un editor de texto plano

En la primera opción puede que consigas traerte los títulos, las negritas y quizás alguna lista. Pero puede que los títulos no vengan con las etiquetas que tu necesitas y que el resto venga todo infectado con etiquetas inútiles tipo span, div, etc.

La segunda opción parece que supone más trabajo: poner todas las etiquetas a mano, e irlas cerrando y abriendo correctamente es una lata. Pero vas a controlar mejor tu trabajo y además puedes acelerarlo de una manera brutal utilizando Emmet.

Emmet para generar nuevo contenido

En muchas ocasiones tendrás que escribir código HTML a pelo, partiendo desde cero, es una lata tener que abrir etiquetas, escribir texto, cerrarlas, etc. Con Emmet escribir HTML se convierte en un placer.

Creo que es más fácil aprender Emmet empezando con un documento en blanco, así que vamos a empezar por ahí.

Aunque puedes consultar toda la documentación sobre Emmet en su propia página web, te cuento aquí lo más básico y algunos trucos interesantes para que te entre el gusanillo de probarlo.

Emmet utiliza abreviaturas para ir generando elementos, en este tutorial veremos sólo HTML, aunque también se lleva muy bien con CSS. Las abreviaturas son muy sencillas, si escribes p y pulsas tabulador te va a crear las etiquetas de apertura y cierre de párrafo. Esto por si sólo no tiene demasiada gracia, pero si escribes ul>li*5 y das a tabulador te genera una lista no numerada con cinco elementos.

Prueba lo que te digo antes de seguir y ahora vemos cosas más interesantes.

Ahora vas a montar un menú de navegación en un periquete sin tener que preocuparte de abrir y cerrar etiquetas, copiar y pegar líneas, etc. Prueba con esto: ul.navbar>(li.nav>a.menuitem)*5 y pulsas tabulador, verás que te genera un código en el que sólo tienes que ir escribiendo el texto que te falta e ir usando el tabulador para terminar de rellenar toda la información.

El punto se utiliza para indicar una clase para la etiqueta que la precede, de la misma manera puedes usar la almohadilla # para crear un id. Cómo ves la sintáxis viene heredada de CSS así que te saldrá de manera muy natural.

Por cierto cuando Visual Studio Code detecta que estás usando Emmet te sale un pequeño círculo con una i para que puedas ver como va a quedar tu código, es muy útil hasta que domines el lenguaje para no tener que estar borrando todo el tiempo código fallido.

Teclea html:5 y dale al tabulador.
Introduce form>(label>input:text)*4 y tendrás un formulario con 4 campos con etiquetas, clases, etc.
Teclea p*5>lorem y tendrás cinco párrafos de texto para rellenar tus diseños de prueba.

Los ejemplos serían infinitos, te invito a probar por ti mismo e ir consultando la documentación de Emmet cuando tengas alguna duda. Te animo a intentar escribir una tabla de 10 filas por 5 columnas, o a escribir 3 parráfos cada uno con su correspondiente cabecera h2

Emmet para contenido existente

Tal como te comenté al principio de este artículo, cuando mas brilla Emmet es a la hora de formatear en HTML texto plano al que tienes que dar formato: encabezados, párrafos, listas, enlaces, negritas, etc.

Lo primero que te recomiendo es activar dos atajos de teclado para poder llamar a Emmet desde Visual Studio Code sin tener que tirar de ratón. Para ello ve al menú Preferencias y luego Métodos abreviados de teclado , ahora teclea “Encapsular” en el buscador de comandos y te aparecen dos entradas:

Encapsular con abreviatura
Encapsular las líneas individuales con abreviatura

Asigna una combinación de teclas abreviadas a cada una de ellas (yo he usado Comando+M y ALt+Comando+M en el Mac porque las combinaciones con “E” ya están cogidas para las búsquedas Ahora abre un texto plano que tengas que formatear, o mejor, para seguir bien el ejemplo, teclea primero:

lorem6+lorem2+lorem5*5

y luego pulsas el tabulador.

Y ahora vamos a aplicarle formato utilizando Emmet:

Selecciona la primera línea, usa tu atajo para “Encapsular con abreviatura” y escribe h2 y pulsas Intro.
Selecciona los dos párrafos siguientes, usa el atajo de nuevo y escribe p* (más Intro, claro). Esto asigna un párrafo por cada salto de línea que encuentra (si no pones el asterisco te lo coloca todo en un sólo párrafo).
Ahora selecciona una pálabra cualquiera del texto, haciendo doble clic sobre ella y utiliza el otro atajo para poner una negrita (usando b o strong )
Elige y selecciona dos o tres palabras seguidas y con el mismo atajo teclea a para crear un enlace.
Ahora ve a por las 5 líneas más cortas, selecciona con el primer atajo y escribe ul>li*

Puede que te resulte un poquillo engorroso al principio, pero recuerda que puedes usar todas las etiquetas de HTML, definir clases o identificadores para las etiquetas que lo necesiten e incluso puedes definir tus propios snippets personalizados para estructuras que uses con frecuencia, al estilo de html:5

Si tienes alguna duda o descubres alguna combinación chula de Emmet me encantaría que dejaras un comentario más abajo.

Referencias

Si quieres seguir aprendiendo sobre el tema te dejo algunas de las referencias en que me he basado para escribir este artículo o que me han parecido interesantes. La primera es la propia documentación oficial de Emmet.

Cómo crear tipos y campos personalizados en WordPress

Juanan Ruiz — Thu, 31 Jan 2019 20:07:11 +0000

Siguiendo este tutorial verás cómo crear un plugin de WordPress para convertir tu web en algo más que un blog. Vas a crear tipos de contenido personalizado, en inglés “Custom Posts Type” o “CPT” que te permitirán convertir tu página en un recetario de cocinas, un gestor de tu colección de libros, películas o sellos de correo.

Y lo harás todo desde código, sin utilizar ningún plugin pues esta es la mejor manera de aprender como funciona realmente WordPress y como programar aplicaciones completas con él. Más adelante en algún proyecto quizás necesites por cuestiones de tiempo o presupuesto utilizar algún plugin para crear campos personalizados como Advanced Custom Fields pero tu ya sabrás como funciona internamente.

Requisitos previos

Para enfrentar este tutorial te recomiendo un conocimiento medio o avanzado de WordPress y unos conocimientos mínimos de PHP.

Empezarás por lo básico creando el esqueleto del plugin con lo mínimo para que funcione todo correctamente. En tutoriales más avanzados aprenderás a crear plugins utilizando un esqueleto algo más complejo pero más estandarizado. Si ya eres desarrollador de WordPress quizás eches en falta definir el plugin dentro de un objeto, separar en distintos archivos las distintas partes del plugin y otras buenas prácticas que no he utilizado aquí a propósito, porque me parece más didáctico este planteamiento. En sucesivos tutoriales iré incorporando todas esas cuestiones.

Así que busca un sitio tranquilo para realizar tu práctica, con un tiempo delimitado durante el que nada te moleste, cíñete el cinturón, respira hondo y saluda a tu adversario antes de comenzar el combate.

Comienza a crear el plugin

Parte de una instalación básica y limpia, con un tema cualquiera, aunque si quieres que tenga apariencia de recetario te recomiendo uno de estos dos que son gratuitos y del repositorio oficial:

Baskerville 2, Anders Norén
Dyad 2, Automattic

Con tu editor de código favorito crea una nueva carpeta dentro de la ruta wp-content/plugins, la puedes llamar recetario o algo más acorde a lo que quieras hacer.

Dentro de esa carpeta crea un archivo y nómbralo recetario.php , este será el punto de partida de tu plugin. Es muy importante escribir correctamente la cabecera de este artículo para que WP lo identifique como un plugin.

\<?php
/\*
Plugin Name: Recetario
Author Name: Juanan Ruiz
Plugin URI: https://kungfupress.com/como-crear-tipos-y-campos-personalizados-en-wordpress
Description: Un plugin para aprender a programar WP practicando con un gestor de recetas.
\*/

La única línea realmente imprescindible es la del Plugin Name , el resto es información adicional, útil pero no imprescindible a nivel de funcionamiento interno. Que no se te olvide tampoco la primera línea con la etiqueta <?php , si olvidas ponerla el contenido del plugin o una parte de él se verá por toda tu web (si no pasa algo peor).

Si ahora guardas el fichero y vas al listado de plugins desde el panel de administración de tu sitio WP verás tu nuevo plugin esperando y listo para ser activado.

Creando un Custom Post Type o Campo Personalizado

Este pobre plugin aún no sabe hacer nada, así que vas a comenzar a definir el Custom Post Type (CPT). Para ello puedes copiarlo de otro que ya tengas hecho, del código que tienes más abajo o generarlo desde la web GenerateWP. Para ello vas recorriendo las pestañas que aparecen en la página: General, Post Type, Labels, etc y rellenando los campos.

Empieza por la pestaña General y rellena Function Name con: receta_post_type

Este es el nombre de la función con la que vas a definir el CPT

Luego ve a la pestaña Post Type y rellena los siguientes campos:

Post Type Key: receta
Name (Singular): Receta
Description: Receta
Name (Plural): Recetas
Hierarchical: No

En la pestaña Labels se pueden configurar un montón de etiquetas, rellena sólo estas dos de momento:

Menu name: Recetas
Admin Bar Name: Receta

Por último en la pestaña Options marca la casilla Custom Fields y para terminar pulsa el botón Update Code que hay un poco más abajo, copia el código generado en tu plugin y te quedará algo parecido a esto.

\<?php
/\*
Plugin Name: Recetario
...
\*/

// Register Custom Post Type
function receta\_post\_type() {
 $labels = array(
 'name' =\> \_x( 'Recetas', 'Post Type General Name', 'text\_domain' ),
 'singular\_name' =\> \_x( 'Receta', 'Post Type Singular Name', 'text\_domain' ),
 'menu\_name' =\> \_\_( 'Recetas', 'text\_domain' ),
 'name\_admin\_bar' =\> \_\_( 'Receta', 'text\_domain' ),
 'archives' =\> \_\_( 'Item Archives', 'text\_domain' ),
 'attributes' =\> \_\_( 'Item Attributes', 'text\_domain' ),
 'parent\_item\_colon' =\> \_\_( 'Parent Item:', 'text\_domain' ),
 'all\_items' =\> \_\_( 'All Items', 'text\_domain' ),
 'add\_new\_item'          =\> \_\_( 'Add New Item', 'text\_domain' ),
 'add\_new' =\> \_\_( 'Add New', 'text\_domain' ),
 'new\_item' =\> \_\_( 'New Item', 'text\_domain' ),
 'edit\_item' =\> \_\_( 'Edit Item', 'text\_domain' ),
 'update\_item' =\> \_\_( 'Update Item', 'text\_domain' ),
 'view\_item' =\> \_\_( 'View Item', 'text\_domain' ),
 'view\_items' =\> \_\_( 'View Items', 'text\_domain' ),
 'search\_items' =\> \_\_( 'Search Item', 'text\_domain' ),
 'not\_found' =\> \_\_( 'Not found', 'text\_domain' ),
 'not\_found\_in\_trash' =\> \_\_( 'Not found in Trash', 'text\_domain' ),
 'featured\_image' =\> \_\_( 'Featured Image', 'text\_domain' ),
 'set\_featured\_image'=\> \_\_( 'Set featured image', 'text\_domain' ),
 'remove\_featured\_image' =\> \_\_( 'Remove featured image', 'text\_domain' ),
 'use\_featured\_image' =\> \_\_( 'Use as featured image', 'text\_domain' ),
 'insert\_into\_item' =\> \_\_( 'Insert into item', 'text\_domain' ),
 'uploaded\_to\_this\_item' =\> \_\_( 'Uploaded to this item', 'text\_domain' ),
 'items\_list' =\> \_\_( 'Items list', 'text\_domain' ),
 'items\_list\_navigation' =\> \_\_( 'Items list navigation', 'text\_domain' ),
 'filter\_items\_list' =\> \_\_( 'Filter items list', 'text\_domain' ),
 );
 $args = array(
 'label'                 =\> \_\_( 'Receta', 'text\_domain' ),
 'description'           =\> \_\_( 'Receta', 'text\_domain' ),
 'labels'                =\> $labels,
 'supports'              =\> array( 'title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields' ),
 'hierarchical'          =\> false,
 'public'                =\> true,
 'show\_ui'               =\> true,
 'show\_in\_menu'          =\> true,
 'menu\_position'         =\> 5,
 'show\_in\_admin\_bar'     =\> true,
 'show\_in\_nav\_menus'     =\> true,
 'can\_export'            =\> true,
 'has\_archive'           =\> true,
 'exclude\_from\_search'   =\> false,
 'publicly\_queryable'    =\> true,
 'capability\_type'       =\> 'page',
 );
 register\_post\_type( 'receta', $args );
}
add\_action( 'init', 'receta\_post\_type', 0 );

¿Cómo se ha definido el CPT con este código?

Primero se ha creado un array llamado $labels que contiene las etiquetas para nombrar los diferentes elementos y acciones del nuevo CPT.

Luego se ha definido otro array $args , que a su vez ha incluido a $labels , y en este segundo array se pasan todos los parametros para configurar el comportamiento del CPT. Cosas como si va a ser público, si va a aparecer en el menú de administración, si se va a comportar como una página o como una entrada, si los contenidos se van a incluir en las búsquedas del sitio, etc.

Una vez definido este segundo array se llama a la función register_post_type que requiere dos parámetros, uno con el nombre clave del CPT y otro con el nombre del array de argumentos.

Por último, fuera ya de la función se engancha esta función que define al CPT al hook add_action(init) que es el que se invoca cuando se carga el plugin

Guarda ahora el archivo y ve de nuevo al listado de plugins en el panel de administración. Busca el plugin y ahora puedes darle a activar. Si todo ha ido bien en el menú de la izquierda aparecerá un nuevo elemento con el nombre “Recetas”. Si haces clic en Add New verás que aparece algo parecido a una nueva entrada de blog.

¡Felicidades por haber llegado hasta aquí! Has creado un nuevo tipo de contenido para WordPress, no muchos lo han hecho.

Verás que hay algunos títulos y nombres de menú sin actualizar, abre de nuevo el archivo del plugin y traduce los elementos que estimes necesarios, por ejemplo All Items , Add New , Add New Item , etc. La próxima vez esto puedes hacerlo directamente editando las Labels en el WordPress Type Generator.

Los campos personalizados

Llegamos a un punto crítico.

Un tipo de contenido personalizado tiene poco sentido si no tiene también asociados algunos campos personalizados. En este ejemplo estaría bien contar con un campo para ingredientes, otro para instrucciones, tiempo de preparación, comensales, tipo de cocina, etc. A esto se le llama “Custom Fields”, se pueden crear a mano dentro de cada receta pero hay que crearlo cada vez y es muy engorroso.

Existe un plugin fantástico para hacer esto Advanced Custom Fields (ACF), está genial y te recomiendo tenerlo en tu caja de herramientas . Pero la idea de este tutorial es ir más alla y crear también los Campos Personalizados desde código, este es un sendero poco transitado pero que te recomiendo recorrer si quieres convertirte en un verdadero guerrero de WordPress.

Así que a partir de aquí tienes dos opciones, utilizar la vía rápida del plugin ACF o seguir aprendiendo a programar como un auténtico practicante de la disciplina.

¿Sigues conmigo? ¡Bravo! Este camino es duro pero te garantiza grandes satisfacciones.

Agregando meta boxes.

Los meta boxes son todas esas cajas de formularios que rodean normalmente el contenido de un artículo o de una página cuando estás utilizando el editor de WP. Aquí los vas a utilizar para colocar en ellos los elementos de formulario donde recogerás tus campos personalizados.

Como no podía ser menos WordPress tiene funciones para que puedas crear tus propias meta boxes. Dentro de ellas se puede colocar cualquier tipo de información: texto, imágenes, etc y también se pueden introducir campos de formulario para recoger valores.

Empieza agregando al plugin una función parar registrar una meta box con un par de campos personalizados, luego podrás añadir más. Dentro de esa función vas a llamar a la función add_meta_box de WordPress.

add_meta_box($id, $title, $callback, $screen, $context, $priority, $callback_args);

$id: identificador o “slug” del nuevo “meta box”.
$title: título que se mostrará en el “meta box”.
$callback: función que imprime el contenido de la “meta box”, se utiliza echo para generar la salida
$screen: representa la pantalla de administración en la que se mostrará esta “meta box”. En este caso debes poner “receta” para que quede asociado a este “Custom Post Type”.
$context y $priority: en este caso las configuras como “normal” y “high” respectivamente.

Verás que la función encargada de cargar el meta box (o los meta boxes si fueran varios) tiene un nombre un poco largo: kfp_receta_register_meta_boxes.

Lo he puesto así porque con la estructura que estamos usando para construir el plugin los nombres de función podrían entrar en conflicto con otros plugins. Imagina que has instalado otro plugin de recetas y el autor llama a su función “receta_register_meta_boxes”, en este caso ambos plugins dejarían de funcionar. Esta forma de nombrar funciones y variables es un estándar y consiste en agregar al principio el nombre o las siglas del desarrollador (en mi caso son las siglas de Kung Fu Press), seguido del nombre o alias del plugin (en esta caso “receta”) y luego viene el resto del nombre que quieras dar a la función. Si hubiéramos encapsulado el plugin en un objeto esto no sería necesario, veremos esta forma de trabajar en algún tutorial más avanzado.

Este es el código que tienes que añadir a tu plugin:

/\*\*
 \* Agrega los meta boxes para el Custom Post Type Receta
 \* https://developer.wordpress.org/reference/functions/add\_meta\_box/
 \*/
function kfp\_receta\_register\_meta\_boxes()
{
    add\_meta\_box('receta-info', 'Información', 'kfp\_receta\_output\_meta\_box', 'receta', 'normal', 'high');
}

/\*\*
 \* Genera el contenido que hay que mostrar dentro del meta box
 \* @param WP\_Post $post WordPress Post object
 \*/
function kfp\_receta\_output\_meta\_box($post)
{
}

add\_action('add\_meta\_boxes', 'kfp\_receta\_register\_meta\_boxes');

Ahora puedes ir a tu Custom Post Type en el panel de administración y verás que cuando creas o editas un contenido de este tipo ahora aparece una meta box con el título “Información”.

A continuación tienes que rellenar el contenido de esa meta box para que sirva para algo. Para eso escribirás algo que genere una salida en pantalla dentro de la función “kfp_receta_output_meta_box”, utilizando la función echo de PHP.

/\*\*
 \* Genera el contenido que hay que mostrar dentro del meta box
 \* @param WP\_Post $post WordPress Post object
 \*/
function kfp\_receta\_output\_meta\_box($post)
{
 echo('\<label for="tiempo\_preparacion"\>' . \_\_('Tiempo de preparación', 'text\_domain') . '\</label\>');
    echo('\<input type="text" name="tiempo\_preparacion" id="tiempo\_preparacion" value="' . esc\_attr($tiempo\_preparacion) . '"\>');
 echo('\<p\>\<label for="comensales"\>' . \_\_('Comensales', 'text\_domain') . '\</label\>');
 echo('\<input type="date" name="comensales" id="fecha" value="' . esc\_attr($comensales) . '"\>');
}

De nuevo te animo a probar el resultado en tu panel de administración para que veas que aparecen dos campos de formulario dentro de la meta box. En esta punto si intentas grabar alguna información ahí verás que no se guarda, disculpa que vaya pasito a paso pero quiero asegurarme que lo entiendes bien.

Ahora vas a añadir el código para que la información se grabe en la base de datos y para que se muestre en la meta box cada vez que abramos este registro.

Es importante comprobar que el usuario actual tiene permisos para grabar esta información y añadir también una cláusula de seguridad para evitar que alguien intente grabar información en esos campos si no viene de este formulario. Para esto último vas a usar la función wp_nonce_field que genera un campo oculto en el formulario, campo que luego comprobaremos antes de grabar la información.

/\*\*
 \* Genera el contenido que hay que mostrar dentro del meta box
 \* @param WP\_Post $post WordPress Post object
 \*/
function kfp\_receta\_output\_meta\_box($post)
{
    // Los campos se graban en la base de datos con un subrayado bajo como prefijo
    // WP indica así por defecto que son campos metas
 $tiempo\_preparacion = get\_post\_meta($post-\>ID, '\_tiempo\_preparacion', true);
    $comensales = get\_post\_meta($post-\>ID, '\_comensales', true);

 echo('\<label for="tiempo\_preparacion"\>' . \_\_('Tiempo de preparación', 'text\_domain') . '\</label\>');
    echo('\<input type="text" name="tiempo\_preparacion" id="tiempo\_preparacion" value="' . esc\_attr($tiempo\_preparacion) . '"\>');
 echo('\<p\>\<label for="comensales"\>' . \_\_('Comensales', 'text\_domain') . '\</label\>');
 echo('\<input type="number" name="comensales" id="comensales" value="' . esc\_attr($comensales) . '"\>');
}

/\*\*
 \* Graba los campos del formulario del meta box
 \* @param int $post\_id Post ID
 \* @return bool|int
 \*/
function kfp\_receta\_save\_meta\_boxes($post\_id)
{
    // Comprueba que el nonce es correcto para evitar ataques CSRF
    if ( !isset($\_POST['receta\_nonce']) || ! wp\_verify\_nonce( $\_POST['receta\_nonce'], 'graba\_receta') ) {
        return $post\_id;
   }

    // Comprueba que el tipo de post es receta
    if ('receta' != $\_POST['post\_type']) {
        return $post\_id;
   }

    // Comprueba que el usuario actual tiene permiso para editar esto
    if (!current\_user\_can('edit\_post', $post\_id)) {
        return $post\_id;
   }

    // Ahora puedes grabar los datos con tranquilidad
    // Observa que cuando vienen del formulario los campos meta no vienen con el prefijo subrayado bajo pero cuando los grabas en el post hay que poner el prefijo, igual que cuando los leías del post
    $tiempo\_preparacion = sanitize\_text\_field($\_POST['tiempo\_preparacion']);
    update\_post\_meta($post\_id, '\_tiempo\_preparacion', $tiempo\_preparacion);
 $comensales = sanitize\_text\_field($\_POST['comensales']);
 update\_post\_meta($post\_id, '\_comensales', $comensales);
    return true;
}

add\_action('save\_post', 'kfp\_receta\_save\_meta\_boxes');

Con esto ya debe funcionar bien la grabación de los campos meta, prueba a rellenar los campos personalizados en tus recetas y al guardarla, si no hay ningún error, deben permanecer los valores que has introducido

Y por último habrá que mostrar esos campos que tanto esfuerzo han costado en el front end, para que puedan consultarlo tus visitantes. Esta es una solución un poco burda, pero no quiero que se alargue más el artículo metiendo conceptos relacionados con plantillas, que pondrás ver con más detenimiento en otros tutoriales. Así que lo vas a hacer también con código y desde el propio plugin.

Usarás el hook “the_content” que es el que se llama cada vez que se va a imprimir el contenido de cualquier entrada, página o post personalizado. Lo que vas a hacer es añadir al contenido principal del artículo los campos personalizados que te interesen.

function kfp\_receta\_add\_custom\_fields\_to\_content( $content ) 
{
 $custom\_fields = get\_post\_custom();
 $content .= "\<ul\>";
 if( isset( $custom\_fields['\_tiempo\_preparacion'] ) ) {
 $content .= '\<li\>Tiempo de preparación: '. $custom\_fields['\_tiempo\_preparacion'][0] . '\</li\>';
 }
 if( isset( $custom\_fields['\_comensales'] ) ) {
 $content .= '\<li\>Comensales: ' . $custom\_fields['\_comensales'][0] . '\</li\>';
 }
 $content .= '\</ul\>';

 return $content;
}

add\_filter( 'the\_content', 'kfp\_receta\_add\_custom\_fields\_to\_content' )

Como mostrar a los visitantes tus tipos personalizados

Para esto hay mil métodos, creo que uno muy deseable es que las recetas aparezcan en la página de inicio, vas a decirle al plugin que cuando WP vaya a buscar los artículos para la página de inicio se traiga también las recetas.

_/\*\*  
 \* Agrega el tipo personalizado Receta a la página inicial de WP  
 \*/_ function get\_posts\_y\_recetas( $query ) {
 if ( is\_home() && $query-\>is\_main\_query() ) {
 $query-\>set( 'post\_type', array( 'post', 'receta' ) );
 }

 return $query;
}

add\_filter( 'pre\_get\_posts', 'get\_posts\_y\_recetas' )

Carga ahora tu página de inicio y verás como tus posts y recetas aparecen publicados en ellas.

No te lo quedes dentro

¿Todo ha funcionado? Dímelo y te mando el cinturón amarillo desde ya.

¿Algo no te funciona? Házmelo saber en los comentario e intento ayudarte. Si ves algún fallo también te agradeceré mucho que me lo digas.

Si te ha gustado o te ha sido útil, te animo a compartirlo con otros a quien pueda interesarle, en las redes sociales, cantando el artículo mientras te duchas, gritándolo a los cuatro vientos o de cualquier otra manera que se te ocurra.

Y si quieres seguir haciendo cosas divertidas y útiles con WordPress acepto cualquier sugerencia para seguir escribiendo artículos.

Enlaces de referencia

Añadir custom fields y meta boxes para posts de WordPress
Create A Simple CRM in WordPress: Creating a Custom Post Type
Showing custom post types on your home/blog page
https://www.wptasty.com/tasty-recipes – Ver el vídeo para coger ideas para tu recetario

Marcar y desmarcar checkbox de manera simultánea con jQuery

Juanan Ruiz — Tue, 07 Aug 2018 15:31:39 +0000

Hace unos días tuve que hacer un formulario para enviar un correo a una lista cerrada de personas, pero me pedían la posibilidad de enviar el correo a todos o a una parte de la lista cerrada.

Algo parecido a lo que se muestra en la siguiente imagen

Tenía hecho algo similar en un proyecto más antiguo y me decidí por la técnica del corta/pega pero para mi sorpresa el script funcionaba la primera vez y luego se negaba a repetir la hazaña.

Os pongo el fragmento de HTML de ejemplo y el script inicial para comentaros el problema.



<table border="1">
  <tr>
    <th><input type="checkbox" id="selectall"></th>
    <th>Participantes</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="case" name="case[]" value="1"></td>
    <td>Fulano de Tal y Cual</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="case" name="case[]" value="2"></td>
    <td>Irene Sal de la Cueva</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="case" name="case[]" value="3"></td>
    <td>Zutano Ruiz Ruiz</td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $("#selectall").on("click", function() {
    $(".case").attr("checked", this.checked);
  });
</script>

Como ves he definido un primer checkbox con el identificador "selectall" para seleccionar o deseleccionar al resto que he marcado con la clase "case" para poder referirme a ellos en conjunto.

Cuando se hace "click" en el checkbox superior todos los demás cambian su estado. El fallo de este código, que yo juraría que funcionaba en versiones antiguas de jQuery, es que la función "attr" sólo modifica el atributo original del elemento, cuando la página se carga, pero no una vez que se ha modificado. Para que funcione en cualquier circunstancia hay que usar la función "prop".



$("#selectall").on("click", function() {  
  $(".case").prop("checked", this.checked);  
});

Puestos a mejorar un poco más el script he agregado otro evento para que cuando se desmarquen uno o más elementos se desmarque también el checkbox superior. Y si todos están marcados pues que se marque el superior también.



$("#selectall").on("click", function() {  
  $(".case").prop("checked", this.checked);  
});  

// if all checkbox are selected, check the selectall checkbox and viceversa  
$(".case").on("click", function() {  
  if ($(".case").length == $(".case:checked").length) {  
    $("#selectall").prop("checked", true);  
  } else {  
    $("#selectall").prop("checked", false);  
  }  
});

Espero que os sea de utilidad en algún momento. En cualquier caso os dejo el código en codepen para que podáis jugar con él.