Blog personal de IT, viajes y otros hobbies

Etiqueta: plugin Página 1 de 4

Contact Form 7 - Cómo agregar CSS personalizado

Estilos CSS personalizados para Contact Form 7

El plugin Contact Form 7 tiene un fichero de CSS para dar estilos mínimos al formulario pero estos no siempre concuerdan con la estética de nuestra Web. Sigue los pasos de este artículo para que puedas aplicar tus propias líneas de CSS y hacer que tu formulario luzca perfecto.

Desgranando el HTML

Lo primero que tendrás que hacer es entender el HTML que genera este plugin con sus correspondientes clases, para que luego puedas atacarlas desde tu tema hijo o bien desde el personalizador.

El formulario básico

Formulario básico de Contact Form 7
Estilos de Contact Form 7 en el tema Twenty Twenty

A modo de ejemplo voy a transcribir parte de la estructura de HTML que general el Contact Form 7 y sus respectivas clases:

<form class="wpcf7-form"> <!-- (1) -->
    <p><!-- (2) -->
        <label> Tu nombre (obligatorio)<br><!-- (3) -->
            <span class="wpcf7-form-control-wrap your-name"><!-- (4) -->
                <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"><!-- (5) -->
            </span>
        </label>
    </p>
    <p>
        <input type="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit"><!-- (6) -->
    </p>
</form>

Como podrás ver, agregué un par de comentarios en el HTML para explicar cada uno de los puntos:

  1. Puedes ver que todo el formulario está agrupado bajo el elemento <form> con la clase .wpcf7-form la cual te servirá para atacar los estilos en forma general.
    Por ejemplo, podrías asignarle el atributo display: grid para cambiar la estructura general del mismo.
  2. Cada campo y hasta el botón de enviar se encierran automáticamente con un elemento <p>. Poco más que agregar aquí.
  3. Los campos que damos de alta en el Administrador de WordPress (a excepción del botón enviar) se encierran dentro de la etiqueta label.
  4. A su vez, cada campo se encierra en un span con algunas clases que nos facilitarán su selección para aplicar estilos. Las clases que se agregan son:
    • wpcf7-form-control-wrap: clase genérica para representar cualquier campo.
    • [campo name del input]: agrega también una clase dinámica con el mismo nombre del atributo name del input. En el ejemplo, agrega la clase your-name.
  5. Ahora sí ya estás en el input mismo, donde CF7 agrega una serie de clases en forma automática, a saber:
    • wpcf7-form-control: clase genérica para todos los campos.
    • wpcf7-text: clase con el tipo de campo configurado en el Administrador de WordPress (más adelante te mostraré las clases de los otros tipos de campos).
    • wpcf7-validates-as-required: CF7 agregará esta clase en caso de que el campo sea obligatorio.

Las clases para cada tipo de campo de Contact Form 7

  • Campo de texto => wpcf7-text
  • Campo de email => wpcf7-email
  • Campo de URL => wpcf7-url
  • Campo de teléfono => wpcf7-tel
  • Campo numérico => wpcf7-num
  • Campo fecha => wpcf7-date
  • Campo de textarea => wpcf7-textarea
  • Campo desplegable => wpcf7-select
  • Campo de verificación => wpcf7-checkbox
  • Botones de selección => wpcf7-radio
  • Campo de aceptación => wpcf7-acceptance
  • Campo de archivo => wpcf7-file

Mensajes

Tanto como si el formulario se envía correcta o incorrectamente, el plugin genera un mensaje con una estructura de HTML definida y algunas clases que podrás utilizar para modificar su estilo.

Mensaje de éxito

Mensaje de éxito de Contact Form 7
Mensaje de éxito de Contact Form 7
<!-- mensaje de éxito -->
<form class="wpcf7-form sent">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok">Gracias por tu mensaje. Ha sido enviado.</div>
</form>

Aquí puedes ver el HTML del mensaje exitoso que genera el plugin además de agregar la clase sent al formulario.

Mensaje de error

Mensaje de error de Contact Form 7
Mensaje de error de Contact Form 7
<!-- mensaje de error -->
<form class="wpcf7-form invalid">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors">Uno o más campos tienen un error. Por favor, revísalos e inténtalo de nuevo.</div>
</form>

Al igual que el mensaje anterior, el plugin genera un HTML específico para el mensaje y también agrega la clase invalid al formulario.

Ejemplos de modificaciones

Cambios en el formulario

¿Qué tal si agregamos borde, cambiamos de color y ponemos un poco de sombra? Así quedaría el CSS final.

.wpcf7-form {
    background-color: #ffffff;
    border: 3px solid #000000;
    box-shadow: 0px 9px 21px 6px rgba(0,0,0,0.5);
    padding: 2em;
    overflow: none !important;
}

Campos con bordes animados

Ya sabes que tienes clases que afectan a todos los campos independientemente del tipo que sean. Vamos a hacer uso de esta clase para darle un toque más original al formulario.

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-textarea {
    background-color: transparent ;
    border-bottom: 1px solid #001;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    margin-bottom: 40px;
	outline: none;
	transition: 0.4s border;
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-text:hover,
.wpcf7-form .wpcf7-textarea:hover {
	border: 1px dashed #001;
}

Editando el mensaje de éxito

Podemos darle al mensaje de éxito un toque más parecido a las alertas de Bootstrap. Como verás, solo basta con atacar a la clase wpcf7-mail-sent-ok que es la que se agrega al mensaje en cuanto el formulario se envía correctamente.

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    border: 2px solid #c3e6cb;
    border-radius: .55rem;
    display: block;
    color: #155724;
    font-family: roboto;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    position: relative;
}

Como puedes ver, la estructura de HTML puedes modificarla fácilmente desde el configurador de formularios y la estética puedes cambiarla con algunas líneas de CSS seleccionando las clases que Contact Form 7 agrega automáticamente.

Ánimo y a ajustar los colores de esos formularios 💪🏻

Flamingo Contact Form 7 WordPress

Cómo guardar en base de datos los mensajes de Contact Form 7

Ya hemos visto en el artículo anterior cómo crear nuevos formularios con Contact Form 7, pero esta configuración solamente envía correos y muestra en pantalla mensajes de éxito o error.

Pero mediante el uso de un plugin extra puedes guardar en base de datos todos los mensajes que se envíen a través de estos formularios.

¿Por qué deberías guardar los mensajes en la Base de Datos?

Te listo a continuación algunas ideas de por qué deberías implementar esta solución:

  • Problemas de correo: Los servidores de correos pueden tener fallos o caídas impidiendo que los emails lleguen a su destino. Con esta solución podrías tener una copia del mensaje en tu base de datos, a pesar de que no te haya llegado ningún correo.
  • Exportar información: Tal vez necesites guardar estos datos para luego exportarlos y hacer algún seguimiento o análisis específico.
  • Libreta de direcciones: Tal vez necesites armar una agenda de todas las personas que te contactan para luego hacer un seguimiento (como un CRM).

Para todas estas situaciones usaremos el plugin «Flamingo» el cual se adapta a la perfección al «Contact Form 7» ya que está desarrollador por el mismo programador (Takayuki Miyoshi). Puedes descargarlo siguiendo este enlace ⬇️

No tendrás que configurar NADA

Tal como lo lees, para utilizar este plugin no tienes que hacer nada más que instalarlo.

Una vez instalado, se creará un nuevo menú llamado «Flamingo» con los siguientes submenús:

Libreta de direcciones

Pantalla de Libreta de Direcciones de Flamingo
Pantalla de Libreta de Direcciones de Flamingo

En esta pantalla verás solamente los datos personales de las personas que envían sus mensajes a través de los distintos formularios de tu página Web.

En caso de que una persona envíe más de un formulario, no se duplica el registro, pero sí que se actualiza la columna de «Historial», desde donde podrás acceder a cada uno de los mensajes enviados.

También tienes el botón de «Exportar» el cual te permite rápidamente descargar todos los contactos en un fichero con formato .CSV tal como se muestra a continuación. ⬇️

"Correo electrónico","Nombre completo","Nombre","Apellidos"
"jperez@gmail.com","Juan Pérez","",""
"mgelves@gmail.com","mgelves","",""
"pgonzalez@gmail.com","Pedro González","",""
"wapuu@wordpress.example","Un comentarista de WordPress","",""

Mensajes Entrantes

Desde esta pantalla podrás ver y gestionar todos los mensajes que envían los usuarios a través de tus formularios.

Pantalla de «Mensajes Entrantes» del plugin Flamingo

Estos son algunos de los puntos más importantes de esta pantalla:

  1. Asunto: Por defecto Flamingo guarda el «Asunto» del formulario como título de los mensajes.
  2. Canal: Esta columna indica cuál es el formulario de origen del mensaje. Si haces clic en él puedes filtrar los mensajes por formularios.
  3. Exportar: Al igual que la página anterior puedes exportar los mensajes en un fichero con formato .CSV el cual tiene la siguiente estructura:
"your-name","your-email","your-subject","your-message","file-298","Fecha"
"Juan Pérez","jperez@gmail.com","2do email que envío","Este es el segundo email que envío para revisar el historial.","","2020-05-05T15:49:44+00:00"
"Juan Pérez","jperez@gmail.com","Prueba con fichero","Envío un formulario con una imagen.","600_162649732.jpeg","2020-05-05T15:25:41+00:00"
"Pedro González","pgonzalez@gmail.com","Prueba de envío","Este es el cuerpo del mensaje","","2020-05-05T15:22:43+00:00"

Cómo cambiar los campos de los mensajes entrantes

Como te contaba en el punto anterior, los campos de los mensajes entrantes se guardan a partir de los campos [your-subject], [your-name] y [your-email] que se crean por defecto cada vez das de alta un nuevo formulario.

Pero podrías cambiar estos valores para que se ajusten a los campos que hayas creado para tu proyecto. Solo tienes que ir a la pestaña de «Ajustes Adicionales» del formulario en cuestión y agregar el siguiente código pero con el ID de tus propios campos:

flamingo_email: "[email-usuario]"
flamingo_name: "[nombre-usuario]"
flamingo_subject: "[titulo-de-mensaje]"
Ajustes adicionales para cambiar los campos de los mensajes entrantes

Contact Form 7 - Cómo añadir un nuevo formulario

Cómo añadir formularios con Contact Form 7

Abro con este artículo el primero de una serie donde te estaré explicando la sencillez y robustez del plugin «Contact Form 7» para que puedas crear todo tipo de formularios y aprendas cómo manipular los datos que se envían a través de él.

Vamos a comenzar desde lo más sencillo que es cómo añadir un simple formulario a nuestra página Web.

Imagen de «Contact Form 7» en el repositorio de Plugins de WordPress

Cómo añadir un nuevo formulario

En primer lugar tendrás que instalar y activar el plugin «Contact Form 7» en tu WordPress. Una vez instalado, sigue los siguientes pasos para agregar un nuevo formulario a tu página Web:

  1. Ve a Contacto » Añadir nuevo. Un vez que se cargue la página estarás en la pestaña «formulario» donde podrás configurar los siguientes valores:
  1. Título: Aquí tendrás que especificar un título para el formulario.
  2. Campos disponibles: El plugin Contact Form 7 pone a tu disposición un conjunto de campos para que te sea muy simple armar tus formularios. Te detallo algunos de ello para que los conozcas:
    • Texto: Es el más simple de todos. Agrega un campo de texto donde el usuario puede escribir libremente.
    • Correo Electrónico: Este campo validará que el contenido tenga el formato correcto para un correo electrónico.
    • Fecha: Este campo despliega un calendario para que el usuario seleccione una fecha.
    • Área de texto: Es una caja de mayor tamaño para que el usuario pueda escribir texto libremente.
    • Menú desplegable: Este campo permite agregar un conjunto de valores para que el usuario elija uno o más de ellos desde un selector desplegable.
    • Aceptación: Agrega una simple casilla de verificación que debe estar marcada para poder enviar el formulario.
    • Cuestionario: Podemos agregar una pregunta simple al formulario para evitar el envío de SPAM. Ejemplo 2+2? = 4
    • Archivo: Este campo permite al usuario cargar un fichero para agregar al formulario.
    • Enviar: Es el botón que enviará el formulario con todos los campos anteriormente configurados.
  3. Cuerpo del formulario: Aquí podrás modificar el HTML del formulario en caso que necesites agregar algún elemento extra o una clase de CSS. Como podrás ver, los campos se agregan con formato de shortcode.

Define todos los campos que necesites y al finalizar no olvides hacer clic en el botón «Guardar» para registrar todos los cambios.

¿Cómo se envía el formulario?

Por defecto el plugin envía el formulario al correo electrónico del Administrador del WordPress, pero por supuesto que tanto esta dirección como el contenido del email puede ser configurado desde la pestaña «Correo electrónico».

Haz clic en esta pestaña o bien utiliza las fechas del teclado (⬅️➡️) para desplazarte entre ellas.

A continuación te detallo para qué sirve cada campo:

Pestaña Correo Electrónico Formulario Contact Form 7 WordPress
  1. Etiquetas: Cualquier campo que agregues al formulario en la pestaña «Formulario» tendrá un nombre único (ID) que luego podrás utilizar en el correo o bien en los mensajes (que veremos más adelante) que devuelvas a la Web.
    Como puedes ver, en este formulario tenemos a disposición los campos [fc-nombre], [fc-email], [fc-mensaje] y [fc-archivo].
  2. Para: En este campo podrás especificar a qué dirección de correo quieres enviar el formulario. Puedes agregar más de un destinatario separándolos por coma, ejemplo: tu-email@gmail.com, otro-email@gmail.com, email-nro-3@gmail.com.
  3. De: Esta campo será el remitente del correo. Para evitar que vaya a la carpeta de SPAM usa un correo con el mismo dominio que la Web desde donde se emite.
  4. Asunto: Define un título para el correo. Ej. «Nuevo Contacto desde la Web mi-web.com»
  5. Cabeceras adicionales: Aquí podrás agregar todas las cabeceras adicionales de correo que necesites. Por ejemplo:
    • Para agregar un email en copia (CC) usa la cabecera Cc: otro-email@gmail.com.
    • Para agregar un email en copia oculta (CCO) usa la cabecera Bcc: otro-email@gmail.com.
  6. Cuerpo del mensaje: Define aquí como quieres recibir el correo electrónico con todos los campos del formulario. Como ves en el ejemplo, puedes mezclar texto con las Etiquetas vistas en el punto 1.
    En el caso que agregues etiquetas HTML, no olvides marchar la casilla de «Usar contenido del tipo HTML».
  7. Archivos adjuntos: En el caso que el usuario pueda subir archivos a tu formulario podrás agregarlos como ficheros adjuntos al correo utilizando este campo. Basta simplemente con que agrueges la etiqueta del campo como ves en el ejemplo.
  8. Correo electrónico (2): Ten en cuenta que todas las configuraciones anteriores son para el correo que te llegarán a ti, pero puedes activar esta casilla para enviar un segundo correo a quién desees.
    Puede usar este segundo correo para configurar una respuesta automática al usuario que te envió el formulario o bien enviar una copia con otras configuraciones a otra persona.
    Los campos que se despliegan son iguales a los que ya he detallado.

Mensajes de éxito o validación

En la pestaña «Mensajes» podremos configurar todos los tipos de mensajes que el formulario pueda devolver.

No voy a detenerme a explicar cada campo porque es muy simple de entender. Cada fila corresponde a un tipo de mensaje de éxito o error que pueda devolver el formulario.

Lo que sí voy explicarte son los valores que aquí puedes o no utilizar:

  • Etiquetas HTML: No está permitido el uso de etiquetas HTML, de hecho si lo haces te aparecerá un mensaje de advertencia.
  • Etiquetas de campos: Puedes utilizar las etiquetas de campos del formulario, de manera tal que podrás personalizar los mensajes con los datos introducidos, por ejempleo: Gracias [fc-nombre] por enviarnos tu mensaje.

Añade el formulario a tus páginas o entradas

Muy bien, ya tenemos el formulario configurado, ahora es momento de mostrarlo en la página Web.

Lo único que tienes que hacer es copiar el «shortcode» del formulario y pegarlo en cualquier entrada o página de tu Web utilizando el bloque «Shortcode» de Gutenberg.

Shortcode del formulario

Una vez que guardes los cambios, visita la entrada o página para verificar el correcto funcionamiento del formulario.

Resultado final del formulario configurado con Contact Form 7
La Pantalla Blanca de la muerte WordPress solución

¿La pantalla de WordPress está en BLANCO? → [SOLUCIONADO]

Venga, que levante la mano quien nunca tuvo que lidiar con «la pantalla blanca de la muerte» de WordPress. Ese error que a todos nos desespera porque no nos da ningún indicio de posible solución. Hasta hoy, porque les traigo una herramienta que puede darnos algo de luz al final del túnel.

Pantalla Blanca de la Muerte de WordPress

MG Whitescreen Plugin Checker

Ejemplo de resultado del plugin MG WhiteScreen Plugin Checker.

El plugin MG Whitescreen Plugin Checker chequea el correcto funcionamiento de todos los plugins instalados y activos en tu página web. Si alguno de ellos falla, nos mostrará un mensaje con el nombre del plugin y el tipo de error devuelto.

Verifica plugin por plugin individualmente

Una de las modalidades del plugin es verificar tu web activando un plugin por vez. De esta manera es muy simple detectar si solo uno (o varios) de todos ellos son los causantes del problema.

Ej: Pruebo la Web solo con el Akismet, ¿Va bien? sigo con el siguiente plugin.
Pruebo la Web solo con Contact Form 7, ¿Da error? muestro el mensaje y sigo con el siguiente.
Y así hasta terminar con toda la lista de plugins.

En la imagen anterior podemos ver como en un ejemplo el plugin «Contact Form 7» está devolviendo un error 500.

Verifica todas las combinaciones posibles de plugins

Otra posibilidad es que el sistema falle debido a la combinación específica de un grupo de plugins ¿Cuánto tardaríamos hasta dar con esa combinación?

Este plugin crea todas las combinaciones posibles de plugins y realiza los testeos para detectar cuál de todas ellas es la que está fallando ¡A que mola!

Ejemplo: Si tenemos los plugins A, B y C el sistema generará testeos para: [A], [A, B], [B], [B, C], [C], [A, C] y [A, B, C]

No afecta al resto de tu web

Puedes ejecutar este plugin sin temor a afectar el normal funcionamiento del resto del sitio ya que el plugin está preparado para actuar con unos parámetros determinados que solamente el administrador del sitio web conocerá (y que detallaré más adelante en la sintaxis).


Instalación

Para instalarlo solo tienes que descargar el fichero mg-whitescreen-plugin-checker.php que puedes encontrar en mi repositorio de GIT.

Una vez descargado tienes que subirlo por FTP a la carpeta tu-wordpress/wp-content/mu-plugins de tu sitio web.

Presta mucha atención que el nombre de la carpeta es mu-plugins y no plugins. Este punto es importante ya que este fichero tiene que actuar antes de que WordPress cargue el resto de los plugins (y surja el error).

Sintaxis

Prueba básica (plugin por plugin)

Recomiendo que en primer lugar se haga una prueba básica (plugin por plugin) para descartar que sea solamente un plugin el que esté generando el problema. Es la prueba más rápida y la que seguramente nos dé la luz necesaria para saber dónde puede estar el problema.

Para realizar esta prueba solo tienes que:

  • Ir a la dirección Web que esté generando la pantalla blanca.
  • Añade los siguientes parámetros ?wpc=individually a la dirección y volver a ejecutarla.
    Ej: http://mi-wordpress.com/contacto?wpc=individually

Como expliqué anteriormente, este método activará y desactivará plugin por plugin para detectar cuál puede estar fallando.

Prueba combinada (combinación de plugins)

Esta prueba tardará un poco más dependiendo del número de plugins que tenga el sitio web activado.

Para realizar esta prueba solo tienes que:

  • Ir a la dirección de tu Web que está generando la pantalla blanca.
  • Añade los siguientes parámetros ?wpc=complete y vuelve a ejecutarla.
    Ej: http://mi-wordpress.com/contacto?wpc=complete

Lo dicho, esta prueba tardará un poco más por la cantidad de combinaciones posibles, pero dará un resultado detallado de los errores.

¿Qué hacer una vez detectado el problema?

Una vez detectado el plugin que da el problema, puedes desactivarlo modificando el nombre de su carpeta o borrándolo (si sabes bien qué es lo que estás haciendo).

Una vez desactivado el plugin verifica lo siguiente:

  • Que la página vuelva a funcionar: Normalmente sí, pero también es posible que el plugin que acabamos de desactivar sea necesario para el correcto funcionamiento de otros plugins (a veces esto es una reacción en cadena).
  • Si el plugin que fallaba es del repositorio de WordPress: Lo más probable es que no se haya descargado correctamente, puede estar faltando algún fichero o bien algunos de ellos estar corrupto. La solución sería borrar el plugin y volver a descargarlo.
  • Si el plugin que fallaba era uno creado por ti o instalado de otro lugar que no sea el repositorio de WordPress: Pues lo más probable es que haya errores de PHP en su código. Aquí te tocará trabajar un poco más para descubrir dónde está el problema. Posible solución: hazte una copia local de la web y activa la constante define ( WP_DEBUG, true ); en el fichero wp-config.php para dónde está ocurriendo el error específicamente.
Una vez activado la constante WP_DEBUG podemos ver que el problema está en el fichero wp-contact-form-7.php en la línea 13

¿No podríamos haber hecho esto desde un principio?

Como poder se puede, pero NUNCA debemos dejar la constante WP_DEBUG activada en el servidor de producción, porque:

  • Podríamos estar dando indicios a ciberdelincuentes.
  • No es muy profesional navegar por la Web y encontrarte estos tipos de desgloses de errores.
  • Según cómo esté configurado el servidor, es probable que aparezcan más mensajes de este tipo en el resto de la Web con simples «Warnings» o «Notice» que son notificaciones de menor grado pero igual de molestos para el visitante.

Agradecimiento

Tengo que agradecer a Fernando Puente por habernos enseñado esta maravillosa técnica utilizando el filtro option_active_plugins que abre las puertas a un sinfín de posibilidades. Les recomiendo que vean su charla sobre el tema que dio en la WordCamp Zaragoza 2019.


Nuevas ideas y colaboraciones

Con el tiempo iré mejorando el plugin y agregando nuevas funcionalidades para que la pantalla blanca nos dé cada vez menos y menos problemas.

¿Se te ocurre alguna mejora? ¿Te animas a hacer un Pull Request? Cualquier ayuda será bienvenida y compartida en el artículos.

Happy Coding! 💻

Generación desmedida de Post Thumbnails y de cómo resolverlo

Generación desmedida de Post Thumbnails y de cómo resolverlo

Es sabido que WordPress nos permite subir imágenes y que a su vez se generan thumbnails para aligerar su peso, resolución, etcétera. Esto es una funcionalidad excelente ya que los desarrolladores podemos, inicialmente, despreocuparnos de si el usuario sube una imagen de 15 o 25 megabytes con su cámara de último modelo de 145 Megapíxeles, HDR, WiFi y radio AM/FM incluida, porque se crearán tres cuatro nuevas copias con peso y resolución aceptable para la web.

Los thumbnails que se crean por defecto con cualquier WordPress son:

  • Thumbnail o Thumb: Una copia de la imagen original con un tamaño de 150px x 150px
  • Medium: Ídem con una resolución de 300px x 300px
  • Medium_large: Copia con un ancho de 768px y altura automática.
  • Large: Copia con un ancho de 1024px y altura automática
  • Full: La imagen original sin modificar

En materia de compresión de imágenes, WordPress utilizaba una de compresión del 90% en JPG que luego han reducido a 82% a partir de la versión 4.5.

Vamos a realizar un ejemplo para ver cómo se crean las copias, cómo se reduce el peso y la nomenclatura que utilizan para los nuevos ficheros. Para ello usaremos la siguiente imagen (de mi viaje por Nepal) la cual subiremos sin ningún tipo de tratamiento a un WordPress con el tema Twenty-Seventeen. La misma pesa 12,6Mb (una locura para utilizar en Web) y con una resolución de 6000px x 4000px, otra locura a menos que queramos ver la imagen en una pantalla de cine.

fotografía de ejemplo con peso elevado

Una vez subida la imagen vemos que se generan los siguientes nuevos ficheros con sus correspondientes detalles:

  • nino-de-katmandu-100×100.jpg ➡ 4Kb ➡ reducción del 99,96% ➡ Thumbnail personalizado
  • nino-de-katmandu-150×150.jpg ➡ 6Kb ➡ reducción del 99,96% ➡ Thumbnail por defecto
  • nino-de-katmandu-300×200.jpg ➡ 14Kb ➡ reducción del 99,95%  ➡ Thumbnail personalizado
  • nino-de-katmandu-768×512.jpg ➡ 60Kb ➡ reducción del 99,53%  ➡ Thumbnail por defecto
  • nino-de-katmandu-1024×683.jpg ➡ 97Kb ➡ reducción del 99,24%  ➡ Thumbnail por defecto
  • nino-de-katmandu-2000×1200.jpg ➡ 267Kb ➡ reducción del 97,93%  ➡ Thumbnail personalizado
  • nino-de-katmandu.jpg ➡ 12.902Kb ➡ imagen original  ➡ Thumbnail por defecto

¿Cuál es problema?

El problema está cuando algunos temas de WordPress muy específicos crean excesivas e innecesarias nuevas resoluciones para crear un diseño ad-hoc y el programador no desactiva (o desconoce el problema) aquellas que podrían evitarse. Por ende, cada nuevo fichero que se sube genera un gran uso de procesador para crear una nueva imagen comprimida y de espacio en disco duro, que a la larga termina repercutiendo en los gastos finales de hosting (€€€).

uso excesivo de creación de post thumbnails personalizados
Ejemplo de un tema de WordPress que genera un número excesivo de thumbnails.

¿Realmente se necesita toda esa cantidad de Thumbnails para que el diseño de una web sea óptimo? Déjame que te responda yo: ¡NO, PARA NADA!

La captura de pantalla anterior pertenece a uno de mis clientes que necesita WPO urgente para mejorar tiempo de respuesta y económicos. El simple fichero «portada.jpg» pesa 111Kb, pero si sumamos todos los thumbnails hacen un total de de 860Kb. Imaginemos ahora si esta web genera 2 o 3 artículos diarios con múltiples imágenes, esto puede llegar a convertirse en un problema grande, innecesario y muy costoso (varios gigas de datos en el servidor).

¿Cómo resolverlo?

Desactivar thumbnails innecesarios

Primero tenemos que hacer una investigación sobre el tema activo de WordPress para saber realmente qué thumbnails se utilizan y cuáles no. Una vez identificados los thumbnails que no necesitamos, procederemos a desactivarlos en el functions.php de nuestro tema hijo:

<?php
/*
*	Esta función quita todos aquellos thumbnails personalizados
*	que el tema padre indica necesitar.
*/
function quitar_thumbnails_innecesarios() {
	// Reemplazar 'nombre-del-thumbnail-personalizado' con 
	// el nombre correspondiente.
	remove_image_size('nombre-del-thumbnail-personalizado');
}
add_action('init', 'quitar_thumbnails_innecesarios');

Una vez que hayamos desactivado los thumbnails tenemos dos opciones:

  1. Dejar todo tal cual está sabiendo que las imágenes que se generan de ahora en más tendrán los thumbnails justos y necesarios.
  2. Si el peso actual de todas las imágenes compromete la economía de nuestro cliente (factura de hosting), tendremos que regenerar todos los thumbnails y eliminar los ficheros innecesarios para ahorrar espacio en el disco duro.

Regeneración de thumbnails

ADVERTENCIA: Regenerar thumbnails lleva mucha carga de procesamiento con lo que recomiendo no realizarlo en un entorno de producción. También sugiero encarecidamente hacer una copia de seguridad antes de ejecutar esta operación.

Podemos utilizar el plugin Force Regenerate Thumbnails que, a pesar que no esté actualizado desde hace más de 2 años, funciona correctamente hasta la versión 4.9.6 de WordPress.

force regenerate thumbnails interfaz de usuario

Este plugin regenera automáticamente todas las imágenes que indique el tema activo y borra aquellas que no concuerden en el disco duro. Tiene una simple pantalla que podemos encontrar en el menú «Herramientas » Force Regenerate Thumbnails». Previa copia de seguridad, basta solo con hacer click en el botón para que comience la magia.

Otra opción es utilizar la opción de WP-CLI para ejecutar el proceso desde línea de comandos:

wp media regenerate

Más información en la documentación oficial de WP-CLI.

force regenerate thumbnails resultado

En la imagen anterior se puede ver cómo se han borrado todas las imágenes innecesarias y hemos regenerado solo las que vienen por defecto con WordPress (luego se han hecho ajustes de CSS y PHP para reutilizar estos ficheros).

Conclusión

Un buen diseño web no necesita de tantas copias de thumbnails. Con las que vienen por defecto con WordPress alcanzan y sobran. También podemos reutilizar las imágenes y trabajarlas mediante CSS con background-position, background-size, object-fit (del cual tengo un artículo muy extenso) o bien con otros tantos atributos para la manipulación de imágenes.

Venga, pon esto en práctica y ahórrale espacio y algo de dinero a tus clientes.

Imagen destacada de Soragrit Wongsa en Unsplash

ACF Custom Database Tables – Tablas personalizadas para ACF

ACF Custom Database Tables – Tablas personalizadas para ACF

ACF Custom Database Tables es un plugin de pago (99,00$AUD) de la empresa Hookturn, que extiende ACF (Advanced Custom Fields) y que gestiona automáticamente los datos en tablas personalizadas. Con esta herramienta cada campo de ACF se transforma en una columna de una tabla. Sin dudas es una opción más que interesante para proyectos que tengan una gran carga de consulta de base de datos. Me puse en contacto con Aaron Rutley (co-creador del plugin) quien amablemente me cedió una licencia para que pudiera trastear y escribir esta review donde os detallaré por qué, cómo y cuándo se debe utilizar este plugin.

Hookturn
Hookturn es la empresa que está detrás de este plugin.

¿Por qué crear nuevas tablas?

Son varios los motivos por los que podríamos optar por guardar nuestros datos de WordPress en nuevas tablas, vamos a ver algunos de ellos en detalle:

Mayor seguridad

Al día de la fecha existen 55,214 plugins, donde muchos de ellos guardan sus configuraciones o datos en tablas como wp_options o wp_postmeta ¿Compartirías la información valiosa de tu negocio junto a la de otros plugins con posibles fallos de seguridad? En el caso de información muy sensible yo crearía una nueva tabla personalizada dónde con un nombre totalmente ajeno a la estructura por defecto de WordPress ya estaríamos más protegidos.

Estructura horizontal

WordPress debe su éxito a la estructura de crecimiento vertical conocida como key => value, aunque esta estructura dificulta muchas tareas como la creación de consultas complejas o extracción de datos. Este plugin crea tablas personalizadas de crecimiento horizontal (cada campo es una columna) permitiendo una mejor legibilidad, facilidad de exportación y búsquedas mucho más rápidas.

ejemplo crecimiento vertical y horizontal base de datos
Ejemplo de crecimiento horizontal y vertical en tablas de base de datos.

Operaciones más rápidas

Al guardar la información en tablas personalizadas hará que la escritura, recuperación y borrado de las mismas sean mucho más rápida. No es lo mismo buscar un registro único en una tabla personaliza a buscar entre cientos, miles o millones de registros compartidos con otras entidades (otros custom post types, menús, adjuntos, etc).

Mayor escalabilidad

Al tener la información separada permitirá que la escalabilidad de nuestro proyecto sea más optima. Si sabemos de antemano que un tipo de entidad puede tener millones de registros y/o que debemos realizar consultas SQL muy complejas sobre ellas, lo ideal es separarlo en una tabla personalizada para consumir la menor cantidad de recursos posibles del servidor (procesador, memoria, etc).

Ejemplo de uso

Obviamete que para probar el plugin he creado una pequeña estructura de información que me permitió ver y trastear el comportamiento en la base de datos. Para ello diseñé una estructura muy básica de Libros => Autores que podemos ver en el siguiente diagrama.

diagrama libro autor
Diagrama de Libro / Autor. Donde un libro puede tener uno o más autores.

Implementación:

  • Primero he creado los Custom Post Types «Libros» y «Autores».
  • He dado de alta los grupos de campos personalizados con ACF para cada Custom Post Type.
  • El plugin añade una nueva opción al formulario de ACF, dando la posibilidad a los desarrolladores de crear una tabla personalizada para cada grupo de campos.
acf custom datatables nueva opcion
Nueva opción para indicar la creación de una tabla personalizada. En la segunda opción podemos especificar el nombre.
  • Cuando guardamos los cambios de los campos personalizados aparecerá un nuevo mensaje como el siguiente:
nuevo mensaje custom datatables acf

El plugin generará un fichero JSON que se guardará en la carpeta de uploads. Este fichero contienen toda la información necesaria para crear la(s) tabla(s) en la base de datos. Este último proceso debe ser manual, ya que el usuario debe indicar explícitamente que es consciente que esta acción conlleva una modificación en la base de datos.

  • Al pinchar sobre el botón «Manage Database Tables» (Administrar las tablas de base de datos) nos llevará a una página de configuración con los siguientes datos:
cuadro de dialogo para crear modificar base de datos acf custom datatables
Cuadro de diálogo para aceptar la creación o modificación de la base de datos de nuestro WordPress.

El sistema nos indica que ha encontrado un JSON (el de libros en este caso) y que está listo para crear o modificar la base de datos. Para ello nos piden una verificación que he marcado con lineas punteadas en azul. En inglés indica «Entiendo que este proceso modificará mi base de datos y que he realizado una copia de seguridad en caso que tenga que deshacer los cambios«.

En cristiano lo que te están diciendo es que al modificar la base de datos se puede liar (aunque no debería) y que obviamente no se harán cargo ante cualquier problema que surja. Por ello mismo te recomiendo que siempre hagas pruebas en local y/o que realices una copia de seguridad de todo tu contenido.

  • Repetimos los pasos para la entidad «Autores» y ya tenemos las tablas personalizadas en nuestra base de datos.
custom datatables acf base de datos final
Estructura final de una de las tablas personalizadas.

Ahora ya podemos dar de alta nuestros dos registros. Primero el autor, ya que lo necesitaremos luego para seleccionarlo en la relación de la entidad «Libro».

alta de custom post types con acf
Alta de registros para ambos Custom Post Types con sus respectivos campos personalizados.

Y este es el resultado final en la tabla wp_libros.

resultado fila libro
Registro en la tabla wp_libros.

¿Qué hay de la compatibilidad?

No os preocupéis porque el plugin sigue generando un registro en la tabla wp_posts como así también las relaciones con su tabla wp_postmeta. Sí, el plugin duplica el contenido con el único fin de mantener la compatibilidad con el resto de los plugins que no saben absolutamente nada de la existencia de tablas personalizadas.

Pero hay buenas noticias, podemos desactivar la creación de los registros duplicados, mediante el uso de los filtros:

<?php
/*
 * Deshabilita la creación de valores meta en las tabla wp_postmeta
 */
add_filter( 'acfcdt/settings/store_acf_values_in_core_meta', '__return_false' );

Tablas de Relaciones

Se pueden crear tablas de relaciones a partir de campos específicos de ACF. Estos son los tipos de campos ACF de los cuales podemos crear tablas relacionadas:

  • Relación
  • Objeto Post
  • Taxonomía
  • Link de página
  • Usuario

Una vez seleccionado el campo de relación debemos agregar un pequeño filtro para que el plugin cree las nuevas tablas:

<?php
/*
 * Este código crea las tablas de relación para los campos del tipo relación en forma global. 
 */
add_filter( 'acfcdt/settings/enable_join_tables_globally', '__return_true' );

Al guardar los campos personalizados, podemos ver cómo aparece una nueva línea en el mensaje indicando la creación de la nueva tabla para la Relación entre ambas entidades:

tabla de relacion acf custom datatables

Y ahora sí podemos ver cómo queda finalmente el registro del libro en su nueva tabla de relación.

tabla relacion custom datatables acf

El post_id 50, el libro «Don Quijote de la Mancha» tiene como autor al autor 48 «Miguel de Cervantes». La columna _sort_order es utilizada por el propio plugin.

Limitaciones del plugin

El plugin de momento tiene limitaciones para implementar los campos:

  • Repetidor
  • Grupo
  • Contenido flexible
  • Clon

Estos son campos más complejos que estarán representados en sub-tablas en versiones posteriores del plugin.

Conclusión

Como aclaré al principio del artículo, este plugin es específico para proyectos que requieran de búsquedas complejas a base de datos. El hecho de realizarlas sobre tablas horizontales permitirá consultas SQL menos complejas y por ende un mejor tiempo de respuesta y un uso más efectivo de los recursos del servidor. El plugin permite muchas más configuraciones mediante código las cuales están muy bien documentadas.

Me resta aún aprender cómo abstraer toda esta configuración para incluirlo en plugins independientes. Si bien ACF tiene una funcionalidad local-JSON que crea ficheros JSON «on the fly», este lo realiza en una carpeta del tema activo, algo que no termina de agradarme del todo.

Keyboard Action plugin review

Keyboard Action: un launchpad para WordPress

No lo voy a negar, soy un obsesivo de la productividad y desde que vi el demo de Keyboard Action en Twitter, supe que quería tener una copia y trastearlo. Me puse rápidamente en contacto con Jeroen Sormani, el desarrollador del plugin, y amablemente me cedió una licencia para que pudiera hacer esta pequeña review.

Así que vamos por parte (dijo Jack the ripper) y comencemos viendo…

¿Qué es Keyboard Action?

Keyboard Action es un plugin para WordPress que nos permite ejecutar distintas acciones mediante una serie de comandos. Para ejecutar estos comandos solo debemos presionar una combinación de teclas alt + space que lanzará un pequeño launchpad donde podremos lanzar nuestras acciones.

Es algo así como un WP-CLI pero en forma visual y que también podemos extender (lo describo casi al final del artículo).

Launchpad del plugin para WordPress Keyboard Action

Una vez que cobinamos las teclas ‘alt + space’ el plugin lanza un launchpad para que escribamos el comando.

¡Ahorra tiempo!

Para poner un ejemplo del tiempo que podemos ahorrar, vamos a suponer que estamos en el escritorio de WordPress y necesitamos editar una entrada. Sin este plugin los pasos básicos serían:

  • Pinchar en «Entradas» y esperar a que cargue la página.
  • Buscar con el buscador o entre las distintas páginas del resultado la entrada que queremos editar.
  • Pinchar sobre ella y esperar a que cargue la página con el contenido.

Con el plugin Keyboard Action solo tendríamos ejecutar los siguiente desde cualquier punto de WordPress (inclusive desde el Frontend 😃):

  • alt + space
  • edit «<nombre de la entrada>» y luego presionar enter.

Veamos este ejemplo en el siguiente GIF donde, desde el Frontend, voy directamente a editar la entrada «Hola Mundo»:

¿Cómo editar una entrada desde el Fronted con el plugin para WordPress Keyboard Action?

Listado de comandos

Una vez que hemos lanzado el launchpad podemos ejecutar una gran variedad de comandos desde cualquier lugar de WordPress (siempre y cuando estemos logueados y dependiendo del comando) que nos ahorrarán mucho tiempo. Veamos a continuación un ejemplo de los más importantes.

  • Activar pluginsactivate <nombre del plugin>
  • Desactivar pluginsdeactivate <nombre del plugin>
  • Instalar un plugin ➡ install plugin <slug del plugin> con el flag --activate se puede activar el plugin directamente.

    Instalando el plugin Contact Form 7 desde el Frontend con Keyboard Action

    Instalando el plugin Contact Form 7 desde el Frontend con Keyboard Action

  • Instalar un tema ➡ install theme <slug del tema> con el flag --activate se puede activar el tema directamente.
  • Editar una entrada:
    • edit post <nombre de la entrada>
    • edit page <nombre de la página>
    • edit <custom post type> <nombre de la entrada>
  • Nueva entrada:
    • new Entrada
    • new Página
    • new <custom post type>
  • Actualizar cambios:
    • save Entrada
    • save Página
    • save <custom post type>
  • Publicar cambios:
    • publish Entrada
    • publish Página
    • publish <custom post type>
  • Borrar una entrada: (Solo desde la misma página de la entrada, end backend o frontend)
    • trash Entrada
    • trash Página
    • trash <custom post type>
  • Ver una entrada: (Solo desde la misma página de la entrada)
    • view Entrada
    • view Página
    • view <custom post type>
  • Guardar configuraciones ➡ save settings (solo disponible en páginas de configuraciones)
  • Desloguearnos ➡ log out
  • Ir al administrador de WordPress ➡ nav admin

Estos son solo algunos de los comandos que pueden aplicarse, también los hay para WooCommerce y para duplicar entradas. Para más información podéis echar un ojo a la documentación oficial del plugin.

Comandos personalizados

Por si eso fuera poco, el plugin también nos permite crear nuestros propios comandos personalizados. Basta con seguir las indicaciones de su documentación para expandir este maravilloso plugin a cuanta funcionalidad necesitemos.

https://gist.github.com/JeroenSormani/47ff4beb54c0fcca7abfde3e142ff3c6#file-keyboard-action-lorem-ipsum-post-php

No es gratuito

Sí, lamentablemente el plugin no es gratuito ni tampoco tiene una pequeña demo para trastear 😓
Los precios van desde $39 para un solo sitio, $89 hasta 5 sitios y $199 para sitios ilimitados.
¿Vale la pena comprarlo? Pues eso ya depende de vosotros.

Conclusión

El plugin está en su primera versión y aún hay algunas aristas que limar, pero de todas formas funciona de maravillas. La curva de aprendizaje es muy rápida así que lo utilizaré en el desarrollo de mis proyectos (y en esta web también) para ahorrarme varios clicks y cargas innecesarias.

¿Tú qué opinas? ¿Pagarías esos precios para ahorrarte unos minutos de tu vida?

Patrones con expresiones regulares en php y WordPress

Expresiones Regulares en PHP – La Guía definitiva

Tal como lo indica el título del artículo estamos buscando patrones pero de caracteres y dentro de un texto o cadena (string). Para ello usamos las expresiones regulares, tecnología presente en varios lenguajes de programación (PHP, Javascript, Phyton, Perl) que mediante una concatenación estructurada de caracteres nos permite moldear una fórmula o patrón para aplicar a un texto determinado y encontrar así las secuencias.

Cada vez que tengo que trabajar con ellos me veo con sentimientos encontrados. Por un parte  sufro un poco ya que su sintaxis es muy compleja y difícil de memorizar, pero por otra parte me maravillo por todo lo que podemos hacer con un par de líneas de código.

Por ejemplo: Muchas plataformas no permiten que los usuarios envíen sus direcciones de correo electrónico en los mensajes que intercambian. Para ello cada mensaje pasa por un filtro de expresiones regulares. Aplicando el regexp (acrónimo de Regular Expressions) /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}\b/ podemos detectar estos caracteres tal como lo muestra la siguiente imagen:

ejemplo de expresiones regulares
Ejemplo visual que iremos viendo a lo largo del artículo

Sintaxis

A modo de ejemplo, y para que luego lo podamos utilizar en nuestro WordPress, vamos a utilizar la nomenclatura y funciones propias de PHP. Verán en cada sintaxis, en la última columna, un enlace a la web regex101 donde podrán testear los ejemplos en vivo.

Caracteres

RegexpDescripciónResultadoregex101
.Cualquier caracterTengo 36 años y mido 1,80m de altura.🔗
\sCualquier caracter de espacio en blancoTengo 36 años y mido 1,80m de altura.🔗
\SCualquier caracter que NO sea un espacio en blancoTengo 36 años y mido 1,80m de altura.🔗
\dCualquier caracter que sea un dígito entre 0 y 9Tengo 36 años y mido 1,80m de altura.🔗
\DCualquier caracter que NO sea un dígito entre 0 y 9Tengo 36 años y mido 1,80m de altura.🔗
\wCualquier caracter que sea una letraTengo 36 años y mido 1,80m de altura.🔗
\WCualquier caracter que NO sea una letraTengo 36 años y mido 1,80m de altura.🔗

Cuantificadores

RegexpDescripciónEjemploExplicaciónValores válidosregex101
*Cero o más/v\d(\.\d)*/g– Una «v»
– un dígito
– Cero o más de (
– un «.»
– un dígito
)
WordPress v4.8.
WordPress v4.8.3.
WordPress 4.8 ❌
🔗
?Uno o ninguno/Star Wars\s?\d?/g– Las palabras «Star Wars»
– Uno o ningún espacio
– Uno o ningún dígito
La película Star Wars
La película Star Wars 4
La película Star Wars 5
La película StarWars ❌
🔗
+ Uno o más/v\d[.]\d+/g– Una «v»
– un dígito
– un «.»
– Uno o más dígitos
WordPress v4.8.
WordPress v5.10.
WordPress v5 ❌
🔗
 {n}Exactamente n veces/w{3}/g– Exactamente tres letras «w»www.maugelves.com
www.ayudawp.com
desarrollowp.com ❌
🔗
{n,m}Entre n y m veces/\d{3,5}/g– Entre 3 y 5 dígitosPeugeot 306
Año 2017
20000 leguas de viaje submarino
12 monos ❌
🔗
{n,}n o más veces/\d{3,}/g – Mínimo 3 dígitosPeugeot 306
Año 2017
20000 leguas de viaje submarino
1000000 de años luz
12 monos ❌
 🔗

Lógica

Sí, también se pueden agregar cierta lógica dentro de la misma expresión. Echa un ojo a los siguientes ejemplo:

RegexpDescripciónEjemploExplicaciónValores válidosregex101
|Operador OR (ó)/Batman|Superman/g– La palabra «Batman» ó «Superman»Batman
Superman
Robin ❌
🔗
( … )Agrupador
Este grupo puede luego ser reutilizado.
/Mar(cos|tín)/g– Los caracteres «Mar» seguidos de
– «cos» ó «tín»
Marcos
Martín
Mauricio ❌
🔗
(?(1)yes|no)Condicional
Si el grupo 1 entonces «yes»
Sino «no»
/(Esta condición)?(?(1) es verdadera| es falsa)/g – Uno o ninguna aparición de los caracteres «Esta condición»
– Si existe concatena la búsqueda de los caracteres «es verdadera»
– Caso contrario concatena la búsqueda de los caracteres «es falsa»
Esta condición es verdadera
Esta otra es falsa
Aquí no se debe seleccionar nada ❌
🔗
(?=…)Futuro positivo (Positive Lookahead)

 

Solo encuentra patrones si existe una condición futura.

/para(?=psicología|normal)/g – Seleccionará los caracteres «para» solo si:
– los siguientes caracteres son «psicología» ó «normal»
La parapsicología.
Fenómeno paranormal.
El parapente. ❌
 🔗
(?!…)Futuro negativo (Negative Lookahead)

 

Solo encuentra patrones si no existe una condición futura.

/para(?!psicología|normal)/gSelecciona los caracteres «para» solo si:
– los siguientes caracteres no son «psicología» ó «normal»
El parapente
El paraíso fiscal
Fenómeno paranormal ❌
🔗
 (?<=…)Pasado positivo (Positive Lookbehind)

 

Solo encuentra patrones si existe una condición pasada.

/(?<=solu|informa)ción/gSelecciona los caracteres «ción» solo si:
– los caracteres anteriores son «solu» ó «informa»
Tengo la solución,
con la información
de la ecuación. ❌
🔗
(?<!…)Pasado negativo (Negative Lookbehind)

 

Solo encuentra patrones si no existe una condición pasada.

/(?<!informa)ción/gSelecciona los caracteres «ción» solo si:
– los caracteres anteriores no son «informa»
La desilución
y manipulación
de la información
🔗

Clases de caracteres

Limita los caracteres que estás buscando con las siguientes sintaxis:

RegexpDescripciónEjemploExplicaciónValores válidosregex101
[…]Delimitador de caracteres/[aeiouáéíóú]/g– Encuentra cualquiera de los caracteres especificados.murclago
aburriendo
bcdfghjklm ❌
🔗
[^…]
 Excepción de caracteres /[^aeiouáéíóú]/g– Encuentra todos los caracteres excepto los especificados.murclago
aburriendo
bcdfghjklm
🔗
[[:alnum:]]
Letras y dígitos/[[:alnum:]]/g– Encuentra todas letras y números comprendidos entre [A-Za-z0-9]¡¡¡Texto, 12345!!!🔗
[[:lower:]]
Caracteres en minúsculas /[[:lower:]]/g– Encuentra todos los caracteres en minúsculasabcDEF🔗
[[:upper:]]
 Caracteres en mayúsculas /[[:upper:]]/g – Encuentra todos los caracteres en mayúsculas abcDEF 🔗

Anclas

Las anclas sirven para indicar en qué parte del texto queremos aplicar el patrón de búsqueda. Veamos a continuación las sintaxis más utilizadas:

RegexpDescripciónEjemploExplicaciónValores válidosregex101
^Busca el patrón de caracteres al comienzo de la cadena o al comienzo de cada línea, según el modificador global.

 

Recuerda que cuando se encuentra entre llaves significa lo contrario: [^entre llaves]

Sin modificador multilínea
/^\w+/gCon modificador multilínea
/^\w+/gm
– Busca el patrón al comienzo del texto.Sin modificador multilínea:
Soy un texto multilínea
sin el modificador global «m»Con modificador multilínea:
Soy un texto multilínea
con el modificador global «m»
🔗
 $Busca el patrón de caracteres al final de la cadena o al final de cada línea, según el modificador global.Sin modificador multilínea
/\w+$/gCon modificador multilínea/Unicode
/\w+$/gum
 – Buscal el patrón al final del texto.Este es el fin
de la historia
🔗
/ABusca el patrón de caracteres siempre al comienzo del texto. No se ve afectado por el modificador global «m»./\A\w+/gm– A pesar de indicar el modificador «m» solo devolverá el conjunto de letras al principio del texto.Solo afecta al comienzo
aún con el modificador multilínea
🔗
/ZBusca el patrón de caracteres siempre al final del texto. No se ve afectado por el modificador global «m». /\w+\Z/gm– A pesar de indicar el modificador «m» solo devolverá el conjunto de letras al final del texto.Siempre seleccionaré
la última palabra
 🔗

Modificadores globales

Como verán en los ejemplos anteriores, todas las expresiones regulares las hemos encerrado con barras y una letra g al final (/…/g). Esta sintaxis permite que podamos englobar la expresión y modificarla con distintos valores que veremos a continuación:

ModificadorDescripciónEjemploExplicaciónValores válidosregex101
/…/gGlobal: busca todas las posibles coincidencias en el texto (no se detiene ante el primer hallazgo)./(je|jé)/g– Encuentra todos los caracteres «je» o «jé» en la cadena.Asere, ja deje tejebe tude jebere
Sebiunouba majabi an de bugui an de buididipí
Asere, ja deje tejebe tude je.
🔗
/…/mMultilínea: busca el patrón en cada línea del texto./Fin de la cita.$/gm– Encuentra la frase exacta «Fin de la cita.» al final de cada línea.Yo presido. Fin de la cita.
Y lo digo. Fin de la cita.
🔗
/…/iInsensitivo: busca el patrón en minúsculas o mayúsculas./a/gi– Encuentra la letra «a» sea minúscula o mayúscula.A de accesibilidad🔗
/…/u Unicode: busca el patrón incluyendo caracteres de UTF-16./voc\w/gu – Encuentra la frase «voc» seguida de cualquier caracter comprendido en  UTF-16.Assim você me mata 🔗

Funciones PHP

Una vez que tengamos el patrón de caracteres a buscar, podremos especificar una serie de funciones de PHP:

preg_replace:

Esta función de PHP busca un patrón de caracteres en un texto y lo reemplaza por otro que le especifiquemos.

<?php
/** 
* Mensaje que quiere evadir la política
* de comisiones de la plataforma.
*/
$mensaje = "Hola Juan: mi nombre es Mauricio y te dejo mi email para que 
			contactemos fuera de esta aplicación que cobra comisiones muy caras, 
			toma nota: mg@maugelves.com. Un saludo, Mauricio.";
/**
* Pero aquí viene la función justiciera.
* 
* En PHP existe una función mejor para validar emails, pero 
* usaremos funciones de expresiones regulares con 
* fines didácticos.
* http://php.net/manual/en/filter.filters.php
*/
// Patrón para encontrar direcciones de email
$patron = "/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}\b/";
// Reemplazo cualquier email por el texto "correo eliminado"
$mensaje = preg_replace( $patron, "(correo eliminado)", $mensaje );
echo $mensaje;
/*
* Esto devuelve:
*
* Hola Juan: mi nombre es Mauricio y te dejo mi email para que 
* contactemos fuera de esta aplicación que cobra comisiones muy caras, 
* toma nota: (correo eliminado). Un saludo, Mauricio.
*
*/

preg_split:

Función ideal si queremos dividir un texto en un array por un patrón de texto. Veamos el siguiente ejemplo donde separamos un texto por espacios o comas.

<?php
/** 
* Fragmento del Quijote de la Mancha
*/
$texto = 	"Y, viéndole don Quijote de aquella manera, con muestras de tanta 
			tristeza, le dijo: Sábete, Sancho, que no es un hombre más que 
			otro si no hace más que otro.";
// Patrón para encontrar espacios y comas (,).
$patron = "/[\s,]+/";
// Guardo en un array todas las palabras separadas por comas o espacios.
$array = preg_split( $patron, $texto );
var_dump( $array );
/*
* Esto devuelve:
*
* array(30) { [0]=> string(1) "Y" [1]=> string(9) "viéndole" [2]=> string(3) "don" 
* [3]=> string(7) "Quijote" [4]=> string(2) "de" [5]=> string(7) "aquella" 
* [6]=> string(6) "manera" [7]=> string(3) "con" [8]=> string(8) "muestras" 
* [9]=> string(2) "de" [10]=> string(5) "tanta" [11]=> string(8) "tristeza" 
* [12]=> string(2) "le" [13]=> string(5) "dijo:" [14]=> string(7) "Sábete" 
* [15]=> string(6) "Sancho" [16]=> string(3) "que" [17]=> string(2) "no" 
* [18]=> string(2) "es" [19]=> string(2) "un" [20]=> string(6) "hombre" 
* [21]=> string(4) "más" [22]=> string(3) "que" [23]=> string(4) "otro" 
* [24]=> string(2) "si" [25]=> string(2) "no" [26]=> string(4) "hace" 
* [27]=> string(4) "más" [28]=> string(3) "que" [29]=> string(5) "otro." }
*
*/

preg_match:

Esta es tal vez la función más simple ya que devuelve un 1 si encuentra al menos un patrón de caracteres y un 0 en caso negativo o error. Vamos a definir un patrón para detectar si alguien escribe mal la palabra WordPress en un texto cualquiera (recuerden que lleva la letra W y P en mayúsculas).

<php
/** 
* Un fragmento de texto con la palabra WordPress mal escrita
*/
$texto = 	"Hola, tengo un problema con mi página web. Está hecha
			en wordpress y quería que alguien me eche una mano.
			¿Qué debo hacer?"; // Parece gracioso pero suelo recibir emails de este tipo.
// Patrón para encontrar WordPress mal escritos.
$patron = "/(wordpress|wordPress)+/";
// Guardo en un array todas las palabras separadas por comas o espacios.
$hay_error = preg_match( $patron, $texto );
var_dump( $hay_error );
/*
* Esto devuelve:
*
* int(1)
*
*/

¿Cómo usarlo en WordPress? Plugin Moderdonizer

Moderdonizer WordPress Plugin

Luego de la chapa que solté con tanto tecnicismo es hora de ver cómo podemos implementar estas expresiones regulares en WordPress. Solo cambiará el entorno ya que seguiremos utilizando las mismas funciones nativas de PHP.

Voy a detallar un ejemplo con una linda locura que se nos ocurrió junto a Álvaro Gómez (AKA @Mrfoxtalbot).

Ambos somos fieles seguidores del programa de radio «La vida moderna«, una show humorístico donde a lo largo del tiempo han desarrollado un lenguaje propio. Por ejemplo, en lugar de decir «comedia» dicen «commedia» para identificar el tipo de humor que ellos realizan (que a veces roza límites muy arriesgados) y también reemplazan las terminaciones «ción/sión» por «ció/sió», haciedo alusión (y un poco de burla) al idioma catalán.

Con el juego de palabras se nos ocurrió que podíamos hacer un plugin (el cual está en fase de aprobación 😝) y subirlo al repositorio. La finalidad del mismo es simplemente reemplazar el título y contenido de cualquier entrada o página con las palabras típicas del programa. Para ello debíamos definir en primer lugar las reglas gramaticales, dos de ellas resultaron simples pero la doble «m» tenía un poco más de chicha: Este es el detalle de cada regla:

  1. Reemplazar palabras que acaben en «ción» por «ció» cuando después venga un espacio, punto, coma, interrogación o exclamación.
  2. Reemplazar palabras que acaben en «sión» por «sió» cuando después venga un espacio, punto, coma, interrogación o exclamación.
  3. Reemplazar la letra «m» por doble «mm» cuando la consonante se encuentre entre vocales.

Con las reglas definidas me puse manos a la obra y luego de varias correcciones di con las expresiones regulares correctas. Las mismas las utilizo con la función preg_replace() de PHP cuando se ejecutan los filtros the_content y the_title.

El plugin, que de momento pueden encontrar en mi repositorio de Github, luce más o menos así:

<?php
/**
 * Esta función reemplaza el contenido Godo con palabras de la República Dictatorial de Moderdonia.
 * Estas son las reglas que se aplican:
 *
 * @author  Mauricio Gelves
 * @params  $content    string  El contenido del post
 * @returns             string  El contenido del post con las nuevas palabras moderdonizadas.
 */
function fn_modernonize( $content ) {
	// Regla 1: "ción" por "ció" (ver comentarios en función)
	$content = preg_replace('/ción(?=[ .!,?])/', 'ció', $content );
	// Regla 2: "sión" por "sió" (ver comentarios en función)
	$content = preg_replace('/sión(?=[ .!,?])/', 'sió', $content );
	// Regla 3: "m" por "mm" (ver comentarios en función)
	$content = preg_replace('/(?<=[aeiouáéíóú])m(?=[aeiouáéíóú])/', 'mm', $content );
	return $content;
}

Conclusión

No me sorprenderé ni me avergonzaré cuando vuelva a mi propio artículo para saber cómo funcionan las expresiones regulares. Espero que vosotros también la dejéis apuntada como favorita para consultar en cualquier momento. Lo que sí puedo contarles es que escribiendo este artículo, que llevó muchas horas de desarrollo, me ha hecho conocer mucho más esta potente tecnología y sentirme más seguro de cara a futuras implementaciones. Es lo bueno de tener un blog.

¿Cómo cambiar rápidamente perfiles de usuarios?

Revisión de plugin – View Admin As

Hay funcionalidades de plugins o temas que deben estar limitados a ciertos perfiles de usuarios de WordPress (Administrador, Editor, Autor, Colaborador o Suscriptor) o, peor aún, a un limitado grupo de capacidades (recordad que cada perfil de usuario de WordPress es en realidad un conjunto de capacidades). Para probar dichas funcionalidades solíamos crear nuevos usuarios con otros perfiles y perdíamos un tiempo valioso saliendo y loguéandonos nuevamente para comprobar que todo funcionaba correctamente. Hoy podemos quitarnos este dolor de cabeza con el plugin View Admin As el cual nos permite cambiar de perfiles o capacidades al vuelo sin necesidad de crear nuevos usuarios.

Header del plugin View Admin As

Header del plugin View Admin As

Video Tutorial

Interfaz gráfica

Una vez instalado y activado el plugin veremos a la derecha de nuestra barra de administrador una nueva opción con el título «Default view (Off)». Al posicionarnos con el ratón veremos que se despliegan las siguientes opciones:

  • Info
  • Settings
  • Capabilities
  • Roles

View Admin As barra de adminsitrador

Nueva opción en la barra de adminsitrador de WordPress

¿Cómo cambiar de rol sin crear un nuevo usuario?

Basta solamente con que elijamos uno de los 5 roles disponibles (o un rol personalizado que creemos) en el selector bajo el nombre de Roles para que la magia suceda. Si el rol seleccionado tiene acceso al administrador de WordPress se refrescará la pantalla con la nueva configuración caso contrario nos llevará al Frontend del sitio web. Una vez seleccionado el nuevo perfil veremos en la barra de administrador un mensaje del tipo «Visualizando con el rol: editor»,  «Visualizando con el rol: contributor», etc. Con pinchar el botón «Resetear a los valores por defecto» volveremos a nuestro usuario habitual.

View Admin As cambiar roles

¿Cómo cambiar roles con View Admin As?

¿Cómo modificar las capacidades del perfil al vuelo?

Otra de las grandes funcionalidades que tiene este plugin es la posibilidad de poder modificar al vuelo las capacidades, partiendo o no de cualquier perfil. También incluye la opción de asignar todas las capacidades «que no sean de este perfil».

Para ello deberemos seguir los siguientes pasos:

  1. Ir a la barra de administrador.
  2. Posicionarnos en el submenú «Capacidades». Este desplegará un formulario con todas las capacidades disponibles.
  3. Seleccionar las capacidadades que deseemos o bien partir de los valores por defecto dentro del desplegable.
  4. Pinchar el botón «Aplicar» para asignar las nuevas capacidades al usuario actual.

View Admin As cambiar capacidades

Cambiando las capacidades a partir de cualquier perfil.

Al igual que con los roles, una vez que hayamos terminado las pruebas podremos pinchar nuevamente en «Resetear los valores por defecto» para volver a nuestro usuario habitual.

Conclusión

Este plugin, junto a otros tantos, es otra herramienta indispensable que utilizo en el desarrollo de mis proyectos para validar que ciertas funcionalidades de perfiles funcionan correctamente. No tiene mucho sentido tenerlo instalado en un sitio web en producción aunque podría utilizarse para una verificación puntual.

Enlaces: View Admin As en el repositorio de WordPress.org.
Traducción: En poco tiempo estará disponible la versión en español que me tomé el trabajo de traducir.

Actualización 30/07/2017: Las traducción al español fue aprobada 🙂

¿Cómo incluir campos personalizados de ACF en plugins y temas?

Quien haya tenido la desgracia suerte de hablar un poco conmigo sobre informática sabrá que utilizo el plugin de campos personalizados ACF (Advanced Custom Fields) a menudo para el desarrollo de mis proyectos. Uno de los principales motivos es la velocidad con la que puedo generar la estructura de información en mis temas o plugins versus las mínimas complicaciones que este plugin pueda generar (duplicación de post_metas, sobrecarga en el administrador de WordPress).

Pero ahora bien, tanto los plugins como los temas que desarrollemos deben ser totalmente independientes ¿Qué quiero decir con esto? Que nuestros proyectos deben funcionar en cualquier instalación de WordPress, sin tener que estar nosotros instalando los plugins necesarios, migrando bases de datos o retocando configuraciones para que todo funcione normalmente. Entonces ¿Cómo podemos incluir los campos personalizados ACF en los plugins o temas que desarrolllamos? Muy simple:

  1. Incluyendo el plugin directamente dentro de nuestro tema o el mismo plugin.
  2. Creando una dependencia del plugin.

Incluir ACF en nuestro plugin o tema

Incluir ACF dentro del plugin o tema

Reglas oficiales para distribuir ACF en un plugin o tema

Según la documentación oficial podremos instalar distintas versiones de ACF (de pago o la gratuita) según la finalidad económica de nuestro plugin/tema:

Pasos para incluir el plugin de ACF en nuestros desarrollos

Son pocos y muy fáciles los pasos a seguir:

  1. Descarga una copia de la versión que necesites (respetando las reglas del punto anterior)
  2. Copia la carpeta con el plugin dentro de tu tema/plugin.
  3. Haz un include del archivo principal del plugin ACF.
  4. Configura los directorios y PATH del plugin.
  5. Opcional, puedes ocultar el menú de ACF en el administrador de WordPress.

Para los pasos 3, 4 y 5 abriremos nuestro fichero functions.php (del plugin o tema) y pegaremos el siguiente código. Modificar las rutas con el nombre de vuestro directorio de ACF.

https://gist.github.com/maugelves/d2082ecd69145ca37b1dbae1b93b1b9a

Crear una dependencia del plugin

Otra posible solución es declarar el plugin ACF como una dependencia de nuestro plugin. Esto significa que cuando se active el plugin o tema y no tengamos el plugin de ACF saldrá un mensaje advirtiéndonos que necesitamos instalarlo para el correcto funcionamiento.

Mensaje de dependencia del plugin Advanced Custom Field Pro
Mensaje de dependencia del plugin Advanced Custom Field Pro

Para declarar esta dependencia necesitaremos una pequeña librería de PHP llamada «TGM Plugin Activation» de la que tengo un artículo explicando cómo utilizarla.

Los pasos a seguir para declarar la dependencia son:

  1. Descargar la librería TGM Plugin Activation
  2. Hacer un include de la librería en nuestro fichero functions.php
  3. Declarar la dependencia del plugin gratuito o de pago según nuestras necesidades

A continuación detalle el código para cualquiera de las dos versiones del plugin:

Dependencia para la versión gratuita de ACF

Dependencia para la versión PRO de ACF


Conclusión

Dependiendo del proyecto, utilizar ACF puede ser una gran ventaja en ahorro de tiempo de desarrollo. Pero esto generará que nuestro desarrollo dependa de un plugin de terceros. Utilizando cualquier de estas dos técnicas podemos quedarnos tranquilos que nuestro código funcionará correctamente ¿Cuál de las dos técnicas utilizar? Como siempre, cada proyecto es único y debemos valorar cuál es la solución más óptima en cada caso.

Página 1 de 4

Funciona con WordPress & Tema de Anders Norén