Blog personal de IT, viajes y otros hobbies

Categoría: Informática Página 2 de 13

Como «Freelancer» escribo artículos sobre mis experiencias en el mundo del desarrollo web, emprendimiento, nomadismo digital y también sobre mi participación activa en la Comunidad de WordPress ❤️.
¿Puedo ayudarte? ➡ mg@maugelves.com | +34 600984224

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

Cómo descargar ficheros grandes directamente a discos externos

Hace poco días me topé con la necesidad de descargar 51 gigabytes de imágenes para un proyecto Web. Por supuesto que no tenía ese lugar en el disco de mi máquina así que busqué la forma de hacer la descarga guardándolo directamente en un disco externo.

Opción para Chrome

Chrome tiene una configuración que nos permite elegir el lugar de destino para ello tienes que:

  1. Haz clic en los 3 puntos (⋮) de configuración de Chrome.
  2. En la barra lateral haz clic en la opción «Downloads» o «Descargas» (según el idioma configurado en tu navegador).

Luego de hacer clic se te mostrará un formulario con las siguientes opciones:

  1. Location: Haz clic en el botón «Change» para seleccionar el nuevo destino de todas tus descargas, es aquí donde podrías seleccionar de forma definitiva que todas tus descargas vayan a un disco externo. En este momento apunta a la carpeta /Users/mauriciogelves/Downloads de mi ordenador.
  2. O la opción más acertada es que cada vez que realices una descargue el navegador te pregunte dónde quieres guardarlo. Para ello activa el botón de esta segunda opción.

Para Firefox

Los pasos a seguir son casi iguales a los de Chrome, a saber:

  1. Haz clic en el icono de hamburguesa para desplegar el menú ().
  2. Haz clic en «Preferencias».

Busca la sección «Archivos y aplicaciones», allí encontrarás el siguiente formulario.

  1. Guardar archivo en: Selecciona aquí el destino por defecto de tus descargas o bien…
  2. Indícale al navegador que te pregunte cada vez que quieres realizar una descarga.

Me encanta que a pesar de tantos años de experiencia en el mundo de la informática siga aprendiendo trucos tan simples y efectivos como este.

Cómo desactivar el «Modo a pantalla completa» por defecto de Gutenberg

Una de los cambios que introdujo la versión 5.4 de WordPress, es que Gutenberg se muestra por defecto en «Modo a pantalla completa», es decir, ocupando la totalidad de la pantalla y ocultando el valiosísimo menú lateral con los enlaces a las entradas, páginas, plugins, etc.

Pero estoy seguro que a no todo el mundo le agrada esta idea y estarán buscando alguna posible solución.

Pues bien, aquí tienes 2 formas de poder desactivarlo sin ningún riesgo para tu Web.

Desactívalo en forma manual

La forma más simple tal vez es desactivándolo de forma manual siguiendo estos pasos:

  1. Haz clic en los 3 puntos de configuración de Gutenberg.
  2. Selecciona la opción «Barra de herramientas superior»
  3. Deselecciona la opción «Modo a pantalla completa»

Ten en cuenta que este método se guarda en las configuraciones locales del navegador con lo cual, si abres el Administrador de WordPress en modo incógnito o en otro ordenador tendrás que repetir la operación.

De todas formas, está previsto en próximas versiones guardar esta configuración en base de datos.

Desactívalo con código

Si bien el código para desactivarlo es Javascript, podemos apañarnos pegando este trozo de código en el functions.php de nuestro tema o bien en un plugin.

/**
 * La siguiente función desactiva la opción de «Modo a pantalla completa»
 * por default del editor de Gutenberg.
 */
function mg_desactivar_editor_gb_pantalla_completa_por_default() {
	$script = "window.onload = function() { const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ); if ( isFullscreenMode ) { wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' ); } }";
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'mg_desactivar_editor_gb_pantalla_completa_por_default' );

Eso es todo, fácil solución a un cambio que generó alguna que otra polémica en la Comunidad de WordPress.

Si quieres indagar un poco más sobre este cambio, te dejo el artículo que se escribió en el blog del Make WordPress Core. ⬇️

Happy coding!

por que los emprendedores necesitan una pagina web

¿Por qué los emprendedores necesitan una página Web?

Si me sigues a través de las charlas que suelo dar en las distintas WordCamp estarás cansado de oírme decir lo importante que es tener una página Web para cualquier tipo de emprendimiento.

Si eres de los afortunados que aún no has sufrido algunas de mis ponencias, aquí te dejo algunas de las razones básicas. Espero convencerte y que tomes la decisión de crear tú también tu página web para tu emprendimiento.

Mis 4 razones básicas de por qué necesitas una Web para tu emprendimiento

Presencia online

Si quieres tener cualquier tipo de emprendimiento lo primero que hará la gente es ir a buscarte a internet para tener más información.

Si no estás en internet, MAL, y si estás tendrás que tener la información concisa y correcta para ganarte la confianza del potencial cliente (quién eres, a qué te dedicas, trabajos realizados y críticas de nuestros clientes).

Recuerda que en estos últimos tiempos, si no estás en internet es como si no existieras.

Nuevos clientes gracias a Google

Tener una página Web indexada en Google significa que puedes expandir tu visibilidad a muchísimas más personas que hagan búsquedas con palabras claves de tu sector.

Aparte de tener una buena información descriptiva en tu web de lo que ofreces se puede reforzar con un blog donde escribas artículos sobre tu temática. Cuanto más compartamos más visibilidad tendremos y por ende más clientes.

Escaparate 24x7x365

Al tener una página Web tendremos un escaparate (o vidriera como se suele decir en algunos países latinoamericanos) donde podremos lucir nuestros productos o servicios las 24 horas del día, sin tener la necesidad de estar físicamente en una oficina, tienda o mercado.

La ventaja es obvia, brindamos información cada vez que alguien la necesita en cualquier parte del mundo

Vías de comunicación

Una vez que los visitantes han visto nuestra información, nos hemos ganado su confianza para la realización de un trabajo, podrán ponerse en contacto con nosotros a través de la página web. Para ello podemos tener el clásico formulario de contacto, donde los usuarios dejan sus datos y sus comentarios, una simple dirección de correo o bien a través de WhatsApp o Telegram.

Esto significa que podemos estar en cualquier parte del mundo y recibir mensajes para posibles trabajos.

Convencido, ¿ahora qué hago?

Crea la Web por tu cuenta

Hay soluciones muy simples de utilizar para que puedas montar tu propia página Web aunque no te las recomiendo porque:

  • Tardarás bastante tiempo aprendiendo cómo utilizarlas. Algunas de ellas son un auténtico infierno.
  • Puede que en el afán de querer lo mejor contrates servicios que excedan nuestras necesidades, con los gastos extras que esto genera.
  • También puede pasar lo contrario, que por querer ahorrar contratemos servicios que luego serán un gran dolor de cabeza.
  • Y por último podemos contratar un mal servicio que con el tiempo no nos permita escalar nuestro negocio.

¿Entonces cuál es la solución? ⬇️

Delega esta parte técnica en un profesional

Lo mejor será que delegues la parte técnica en un profesional del mundo Web y que tú te enfoques en lo que mejor sabes hacer, tu negocio.

Un buen profesional Web te dará tranquilidad con los siguientes servicios:

  • Un servicio acorde a tus necesidades y presupuesto.
  • No tendrás que preocuparte de registros, contrataciones y otros trámites.
  • Que te garantice una Web que puedas escalar con el tiempo.
  • Que no tengas ataduras de contrato en caso que quieras realizar nuevos cambios con otro profesional.
  • Que sepa aconsejarte en distintas herramientas digitales que puedan impulsar tu emprendimiento.

Espero haberte dado un poco de luz para dar comienzo a tu proyecto y sino ya sabes dónde encontrarme.

WordPress Tips - Desactiva Gutenberg para ciertos Custom Post Types

Desactiva Gutenberg para ciertos Custom Post Types

El nuevo editor de WordPress, Gutenberg, viene con un gran conjunto de bloques que no siempre necesitaremos para todos nuestros tipos de entradas (Custom Post Types).

Para estos casos lo mejor será desactivarlo por completo y reutilizar el ya conocido editor clásico (el WYSIWYG).

¿Cómo puedes hacerlo? Muy simple, a través de plugins o bien implementando un código muy sencillo que te muestro a continuación.

Con el plugin NO Gutenberg

Plugin No Gutenberg de Fernando Tellado
Plugin No Gutenberg de Fernando Tellado

El gran Fernando Tellado tiene su propio plugin para desactivar Gutenberg de raíz. Es un plugin muy simple que no agrega ningún menú pero que cumple con su propósito, desactivar Gutenberg por completo.

Enlace al plugin: No Gutenberg

Por código

Podremos desactivar Gutenberg por completo con tan solo una línea de código.

// Este filtro desactiva Gutenberg por completo, al igual que el plugin de Fernando Tellado.
add_filter( 'use_block_editor_for_post', '__return_false' );

O bien desactivarlo condicionalmente reutilizando los parámetros que envía el filtro.

// Desactiva Gutenberg solo para un CPT determinado.
function gutenberg_segun_cpt( $usa_gutenberg, $post ){
	if( $post->post_type === 'el-nombre-de-tu-custom-post-type' ) {
		$usa_gutenberg = false;
	}
	return $usa_gutenberg;
}
add_filter( 'use_block_editor_for_post', 'gutenberg_segun_cpt', 10, 2 );

Videotutorial

Cómo descargar historias de Instagram

¿Cómo descargar historias de Instagram de otros usuarios?

Hace poco tuve la necesidad de descargar historias de Instagram en mi ordenador para utilizarlas en mi blog y me resultó muy complicado ya que la aplicación nativamente no permite esta funcionalidad.

Luego de buscar por internet encontré varias opciones, pero la más simple, intuitiva y gratuita fue la página InstaDP, así que aquí os dejos los pasos a seguir.

Página principal de la web InstaDP

Descargar historias de Instagram

Para descargar una historia de Instagram primer debes indicar el nombre del usuario en la caja de texto «Search username».

Luego de buscar el usuario el sistema nos mostrará los resultados en la misma página.

Al pinchar la aplicación nos mostrará la foto de perfil en alta resolución, otra funcionalidad que Instagram no nos permite. En esa página deberemos pinchar sobre el enlace «Stories» para acceder a las últimas historias del usuario (además de las «historias destacadas»).

La página nos mostrará todas las historias, una debajo de la otra, y ahora solo nos queda pinchar en el botón «Download» para descargarnos el fichero a nuestro ordenador.


Ahora, sí, ya puedes descargar las historias de Instagram en tu ordenador y reutilizarlas en tus artículos de WordPress utilizando el bloque de Vídeo.

Happy coding! 🤓

5 consejos para mejorar tu marca personal en Instagram

5 consejos para mejorar tu marca personal en Instagram en 2020

Instagram es un monstruo social que crece año tras año, no solo en su popularidad sino también en la cantidad de herramientas que ponen a nuestra disposición para interactuar con nuestra audiencia.

Tenemos que aprovechar esta gran ola para que, junto a una buena organización y estrategia, podamos mejorar nuestra marca personal y conseguir grandes beneficios.

Veamos a continuación los 5 consejos que pueden mejorar notablemente tu presencia en esta red social en el 2019.

1. Tu perfil: «El escaparate de tu negocio»

La descripción de mi perfil en Instagram

La descripción de tu perfil de Instagram LO ES TODO. Sí, permíteme que lo ponga así en mayúscula. Y es que cuando alguien esté interesado en ti, ya sea por una foto que has publicado, un historia o una búsqueda, lo primero que hará es ir a ver quién eres. Si esa persona encuentra tu perfil en blanco o pobremente detallado, posiblemente pierda ese interés rápidamente (lo que es igual a un lead desaprovechado).

¿Qué podemos incluir en nuestro perfil para que sea más atrayente?

Aquí te dejo algunas ideas que pueden servirte de ejemplo, no podremos implementarlas todas ya que el espacio es muy limitado (solo 150 caracteres), pero aún así con creatividad e ingenio podemos obtener buenos resultados.

  • Tu foto de perfil: Esta es la puerta de entrada de todas las interacciones en Instagram, así que mejor que le dediques un buen tiempo a buscar tu mejor foto ¿Que no tienes ninguna? Entonces es el momento de llamar a tu fotógrafo amigo (o contratar uno) para que retrate tu mejor ángulo.
    Breve historia: mi foto de perfil se la pedí a fotógrafos profesionales que estaba rondando por la Plaza Monastiraki en Atenas. Ellos contentos por publicarlos en mi cuenta y yo contento por tener una buena foto de perfil.
  • ¿Quién eres?: ¿Cómo quieres que te busquen? ¿Cómo quieres ser visto? Esta es tal vez la pregunta más difícil de responder. Así que tómate tu tiempo, baja en papel algunas ideas y redacta tu perfil.
  • ¿A qué te dedicas?: ¿Qué trabajo realizas como Freelancer? ¿Cómo puedes ayudar a los demás? Trata de encontrar la forma para que en pocas palabras puedas describir a lo que te dedicas. Recuerda que puedes utilizar hashtags para ser encontrada ante eventuales búsquedas (aunque te quite un caracter extra con cada uso).
  • Tu ubicación: ¿Tu negocio se desarrolla en una ciudad? De ser así podrías incluir tu ubicación actual para llamar la atención a las personas de tu misma zona.
    Yo lo indico, pero solamente para que amigos/familiares/contactos sepan en dónde me encuentro ya que viajo mucho como «Nómada Digital».
  • Datos de contacto: ¿Cómo pueden ponerse en contacto contigo? ¿Tienes una web? ¿Prefieres que te envíen un correo electrónico? ¿Tal vez tu número móvil (cuidado con esta opción)?
    Si tu cuenta de Instagram es del tipo empresa recuerda que por defecto agregan un botón de «enviar correo» a tu perfil pudiendo ahorrarte estos caracteres extras.
  • Apóyate en los emojis: Te gusten o no, los emojis ya hablan por sí solos. Aprovéchalos para comunicar tus ideas y ahorrarte algunas palabras extras 😉.
  • Enlace Web: Instagram no transformará en links cualquier enlace que pongas en la descripción. Para ello nos provee de un solo campo el cual tendremos que reutilizar para mostrar nuestra Web o bien cualquier enlace que queramos promocionar a través de la cuenta. Y esto nos lleva al último punto de este apartado…
  • Elabora varias descripciones: Es una buena idea contar con varias descripciones con distintos formatos. Según la ocasión podemos ir cambiando el perfil y el campo del enlace para promocionar lanzamientos, publicaciones o cualquier información relevante a tus posts.

2. Define la «grilla» de tu feed

Consejos para mejorar la Grilla de Instagram
Grilla con color homogéneo de la cuenta @framelessfolks

La «grilla» se le llama al conjunto de fotos divididos en 3 columnas y X filas. No es mi caso pero es verdad que hay personas que prestan muchísima atención a la homogeneidad en la disposición de sus fotos.

He visto en todos estos años como usuario de Instagram 3 tipos de disposición de fotos:

  • La grilla colorida: Es la grilla que mantiene un color homogéneo a lo largo de todas sus fotos. Esta línea continua de color agrada a la vista invitando a descubrir más contenido. Como podemos observar en la imagen anterior o en la siguiente (ambas de la misma cuenta @framelessfolks) predomina el color «terracota».
  • El grupo de fotos: Hay cuentas que prefieren subir una serie de fotos para apoyar a una publicación (por lo general suelen ser de a 3 fotos para respetar la fila de la grilla), por ejemplo: una foto con una frase y otras dos fotos descriptivas.
    En el ejemplo a continuación vemos la cuenta de @exprimeviajes, donde se suben 3 fotos, una de frase y otras dos con paisajes de lugares recorridos. De esta manera, se mantiene la estructura de la grilla llamando la atención de los usuarios.
Grilla de @exprimeviajes
  • La grilla con mega fotos: Son fotos formadas a partir de 2 o más publicaciones. Particularmente son las que menos me gustan pero es verdad que bien utilizadas pueden llamar mucho la atención.
    El punto negativo tal vez es que se pierden interacciones con los usuarios ya que una foto por separada no dice mucho.
    Para crear estos efectos basta con que busques «instagram grid layouts apps» en Google para encontrar un buen listado de apps para Android e iOS.
    Veamos el siguiente ejemplo de la cuenta @stephtaylor.co.
Mega foto de la cuenta @stephtaylor.co

3. El contenido

Antes que sigamos adelante quiero que sepas que de nada te van a valer todos los consejos anteriores y los siguientes si tu contenido no es de calidad.

Publica fotografías que aporten algo interesante a tu audiencia en la misma línea planteada en la descripción de tu perfil.

Si tu Instagram es de viajes publica fotos de lugares interesantes que tu audiencia pueda ir, tips para ahorrarles dinero, cafeterías escondidas, rincones desconocidos, descuentos que hayas encontrado, promociona tus publicaciones de otras redes, etc, etc.

Si eres escritor muestra tu día a día, tu proceso de escritura, difunde tu material, muestra con qué te inspiras, si tienes un amigo diseñador pídele que te dibuje uno de tus personajes…

En fin, las ideas son casi infinitas, pero todas tendrán que tener un toque de creatividad y esfuerzo mínimo para que el producto final sea valioso (a veces ese esfuerzo es simplemente inclinar las rodillas para que el sujeto de la foto tenga un mejor encuadre, y a veces es que ni eso).

Sé original:

Trata de ser único generando tu propio contenido, evita todo lo que puedas las herramientas o filtros que te proporciona Instagram, las utiliza todo el mundo. En su lugar aprende a utilizar herramientas de edición de imagen como Photoshop o la reciente herramienta Web Canva que está arrasando por su simplicidad de uso.

Plantillas de diseño de la herramienta Web canva.com
Algunas de las plantillas que ofrece el servicio canva.com

Habrá momentos donde tendremos que utilizar las herramientas de Instagram por una cuestión de agilidad pero en lo posible deberíamos trabajar tanto los post como las historias con algún proceso de post-producción.

Un gran ejemplo son las historias que sube el fotógrafo y videógrafo Jesse Driftwood… una especie de vlog con muchísima originalidad (el siguiente vídeo es la sumatoria de 4 historias de Instragram):

4. Sube de vez en cuando vídeos

Últimamente en mi cuenta noto muchísima más interacción con los vídeos que con las simples fotografías. Este tipo de publicación engancha más al usuario porque, en caso de tratarse de una publicación medianamente bien realizada, genera intriga hasta el final del mismo.

No digo con esto que todo el feed tenga que ser vídeos, pero sí cada tanto subir uno de hasta un minuto de duración para que los usuarios se «vayan enamorando» un poco más de nuestro rostro y nuestra voz.

Hay que tener en cuenta que Instagram, hasta que no se reproduzca el vídeo, muestra solo el primer frame congelado. Sabiendo esto, yo edito mis vídeos poniendo al principio un solo frame del Thumbnail que quiero que se vea, veamos el siguiente ejemplo de mi cuenta:

5. Saber elegir el momento justo para compartir tu contenido

Muchos artículos señalan que los mejores momentos son por la mañana antes de que tus seguidores vayan al trabajo, al mediodía cuando tienen una pequeña pausa para el descanso y el último cerca de las 18.00 cuando ya están de regreso a sus hogares.

En Later, la plataforma Web para programar publicaciones en Instagram, aseguran que estos picos varían según los días de la semana (datos contrastados con más de 12.000.000 de publicaciones).

Para serles sincero, a mí me da un poco igual esto porque mi audiencia está distribuida tanto en Europa como en América, con lo cual me volvería loco si tuviera que respetar estos picos de tráfico.

Lo que sí hago cada vez que subo un nuevo post a Instagram es reforzarlo con historias o bien con publicaciones en otras redes sociales.


Conclusión

Sube contenidos de lo que te apasiona, organízate y difunde tu actividad, aprovecha esta oportunidad de tener canales para difundir lo que queramos a tu audiencia específica.

Imagínate lo que nos hubiese costado tan solo 20 años atrás poder promocionar lo que hacemos en algún medio de comunicación.

Internet está ahí, podemos utilizar para perder el tiempo o bien hacer maravillas con él. Yo me quedo (o intento) con la segunda opción.

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! 💻

Crear formularios en frontend con ACF

Crear formularios en Frontend con ACF

Es muy fácil crear un grupo de campos de ACF y luego utilizar sus formularios en el Backend para gestionar la información de una página web, pero ¿qué pasa si este formulario tenemos que mostrarlo en el Frontend para que los usuarios carguen datos?

A continuación voy a mostrarte los pasos para crear el formulario ACF en el Frontend utilizando la función acf_form() y sus parámetros.

Caso de ejemplo

Vamos a suponer que un cliente nos pide tener una agenda con contactos que él mismo pueda cargar desde el backend del sitio web, pero también necesita que los visitantes puedan dejar sus datos en la página web (sin tener la necesidad de loguearse).

Posible solución:

  • Creamos un Custom Post Type «Contacto»
  • Creamos los campos personalizados con ACF para el Custom Post Type «Contacto».
  • Creamos una página llamada «Déjame tus datos»
  • Creamos una plantilla para esa página page-dejame-tus-datos.php donde desplegaremos el formulario con el siguiente código:
<?php
// Parámetros de la función acf_form().
$args = [
	'new_post'		=> array(
		'post_type'		=> 'contacto',
		'post_status'	=> 'publish'
	),
	'post_id'         => 'new_post',
	'post_title'      => true,
	'submit_value'    => 'Actualizar',
	'updated_message' => 'Contacto actualizado',
];
// Llamamos a la función acf_form() de ACF pasando los parámetros definidos en el paso anterior.
acf_form( $args );</pre>

El código paso a paso

Una vez mostrado el código final vamos a ir desgranándolo paso a paso para entenderlo mejor y ver que otras posibilidades podemos implementar.

Creación del Custom Post Type Contacto

Primero vamos a crear el Custom Post Type «Contacto» para luego poder añadirle el conjunto de campos personalizados. También adjuntaremos al CPT una taxonomía «Intereses» para que los contactos puedan seleccionar sobre qué temas están interesados.

<?php
// Función para crear el CPT 'contacto' y la taxonomía 'intereses'.
function crear_custom_post_type_contacto() {
	
	// Parámetros para la creación del CPT contacto.
	$args = [
		'has_archive' =>; false,
		'labels'    =>; [
			'name' =>; 'Contactos',
		],
		'public' =>; 'true',
		'show_ui'           =>; true,
		'show_in_menu'      =>; true,
		'show_in_rest'      =>; true,
	];
	register_post_type( 'contacto', $args );
	// Parámetros para la creación de la taxonomía 'intereses'.
	$args = [
		'labels' =>; [
			'name' =>; 'Intereses',
			'singular_name' =>; 'Interés',
			'menu_name' =>; 'Intereses'
		],
	];
	register_taxonomy( 'interes', 'contacto', $args  );
	
}
add_action( 'init', 'crear_custom_post_type_contacto' );

Creación de los campos personalizados con ACF

Creamos los siguientes campos con el plugin de ACF:

  • Email: la dirección de correo electrónico del contacto. El campo será del tipo Email para agregar los controles de validación.
  • Dirección: Un simple campo de texto para que el contacto pueda cargar su dirección física.
  • ¿Cómo nos has conocido?: Un campo del tipo selector con 3 posibles valores («A través de la página de Facebook», «A través de vuestro Newsletter» y «A través de un referido»).
  • Intereses: Campo del tipo taxonomía, donde mostraremos los términos cargados en la taxonomía «Intereses».

Una vez cargados todos los campos solo debemos especificar la «Ubicación» del mismo, para ello seleccionaremos que el «Post Type es igual a Contactos».

Resultado final de la carga de campos en ACF.

Creación de la página «Déjame tus datos»

Vamos a crear una página de WordPress para luego poder asignarle una plantilla personalizada. Para ello basta con ir al menú Páginas » Añadir nueva y publicarla con el título «Déjame tus datos» (esto creará un slug dejame-tus-datos que utilizaremos en el siguiente paso).

Creación de la plantilla personalizada

Vamos a agregar un nuevo fichero a nuestro tema (o tema hijo) para personalizar el HTML de la página «Déjame tus datos». Para ellos necesitamos crear un nuevo fichero llamado page-dejame-tus-datos.php siguiendo la nomenclatura de la jerarquía de plantillas de WordPress.

En este fichero agregaremos el siguiente código:

<?php
// Debemos agregar esta función al principio de todo para que
// cargue las dependencias necesarias para renderizar el formulario.
acf_form_head();
get_header();
?>
<section>
	<main role="main">
		<?php
		while ( have_posts() ) : the_post(); ?>
			<h1><?php the_title(); ?></h1>
			<?php
			the_content();
			$args = [
				'new_post'        => [
					'post_type'   => 'contacto',
					'post_status' => 'publish'
				],
				'post_id'         => 'new_post',
				'post_title'      => true,
				'submit_value'    => 'Actualizar',
				'updated_message' => 'Contacto actualizado',
			];
			acf_form( $args );
		endwhile;
		?>
	</main>
</section>
Renderizado del formulario ACF en el Frontend de WordPress

Detalles importantes del código

La función acf_form() tiene dos parámetros especiales llamados post_id y new_post que configurados correctamente nos permiten guardar la información en nuestra estructura de datos.

El parámetro post_id se utiliza para editar una entrada (o Custom Post Type) que ya existe, pero si le asignamos el valor 'new_post', creará una nuevo registro.

El parámetro new_post tendrá un array con los datos del post a guardar. Los valores de este array son los mismos que utilizamos con la función estándar de WordPress wp_insert_post(). En el CODEX podrás encontrar más detalles sobre los parámetros de esta función.

acf_form_head()

Hay que tener en cuenta que la función acf_form() solamente creará el formulario para que los usuarios puedan carga información, la programación para guardar verdaderamente estos datos se encuentra en la función acf_form_head() que debemos llamar al principio de nuestra plantilla antes de renderizar cualquier código HTML (inclusive antes de la función wp_head() estándar de WordPress).

Otros parámetros de la función acf_form()

En mi ejemplo solo he utilizado algunos de los tantos parámetros que tiene esta opción. Aquí te dejo el resto para que puedas investigar un poco más y adaptar el formulario a tus necesidades.

<?php
$settings = array(
	/* (string) Será el nombre del atributo ID del formulario. Por defecto 'acf-form' */
	'id' => 'acf-form',
	
	/* (int|string) El ID del post para cargar y guardar la información. Por defecto es el ID del post actual.
	También se puede especificar el valor 'new_post' para crear un nuevo post con el envío de los datos.*/
	'post_id' => false,
	
	/* (array) Un array con información para crear el nuevo post. Puedes ver todos los parámetros disponibles en la función wp_insert_post de WordPress.
	El parámetro 'post_id' debe tener el valor 'new_post'*/
	'new_post' => false,
	
	/* (array) Un array con los ID/Keys de los grupos de campos personalizados para sobrescribir los del formulario */
	'field_groups' => false,
	
	/* (array) Un array con los IDs/keys de los campos para sobrescribir los del formulario. */
	'fields' => false,
	
	/* (boolean) Si es true se muestra un campo de texto para cargar el título del post. Por defecto es false */
	'post_title' => false,
	
	/* (boolean) Si es true se muestra un textarea para cargar el contenido del post. Por defecto es false */
	'post_content' => false,
	
	/* (boolean) Si es true creará la etiqueta <form>. Útil cuando se agrega a un formulario que ya existe. Por defecto es  true */
	'form' => true,
	
	/* (array) Un array de atributos para agregar a la etiqueta <form> */
	'form_attributes' => array(),
	/* (string) La URL a la que se redireccionará luego de haber enviado el formulario. Por defecto es la URL actual con un parámetro GET '?updated=true'.
	Podemos utilizar el comodín '%post_url%' que se convertirá en el permalink.
	Podemos utilizar el comodín '%post_od%' que se convertirá en el ID del post.*/
	'return' => '',
	
	/* (string) HTML extra que se añadirá antes de los campos. */
	'html_before_fields' => '',
	
	/* (string) HTML que se añadirá después de los campos. */
	'html_after_fields' => '',
	
	/* (string) El texto que se muestra en el botón. */
	'submit_value' => __("Update", 'acf'),
	
	/* (string) Un mensaje que se mostrará sobre el formulario una vez que se haya hecho la redirección. también se puede espeificar el valor false para que no haya mensajes. */
	'updated_message' => __("Post updated", 'acf'),
	
	/* (string) Determina dónde se ubicarán las etiquetas de los campos. Por defecto es 'top'.
	Los valores posibles son: 'top' (arriba de los campos) o 'left' (a la izquierda de los campos). */
	'label_placement' => 'top',
	
	/* (string) Determina dónde se ubicarán las instrucciones de los campos. Por defecto es 'label'
	Los posibles valores son: 'label' (debajo de las etiquetas) or 'field' (debajos de los campos) */
	'instruction_placement' => 'label',
	
	/* (string) Define la etiqueta que se utilizará para envolver el campo. Por defecto es 'div' 
	Los posibles valores son: 'div', 'tr', 'td', 'ul', 'ol', 'dl' */
	'field_el' => 'div',
	
	/* (string) Determina si utilizar el WP upload o un input básico para la carga de imágenes. Por defecto es 'wp' 
	Los posibles valores son:'wp' o 'basic'.*/
	'uploader' => 'wp',
	
	/* (boolean) Si es true se incluye un campo oculto para evitar los envíos que no hayan sido enviados por humanos. Por defecto es true. */
	'honeypot' => true,
	
	/* (string) HTML que se usa para renderizar el mensaje de actualización. */
	'html_updated_message'	=> '<div id="message" class="updated"><p>%s</p></div>',
	
	/* (string) HTML que se usa para renderizar el botón de envío. */
	'html_submit_button'	=> '<input type="submit" class="acf-button button button-primary button-large" value="%s" />',
	
	/* (string) HTML que se usa para renderizar la animación de cargando del botón de envío. */
	'html_submit_spinner'	=> '<span class="acf-spinner"></span>',
	
	/* (boolean) Si es true sanitiza todos los datos enviados en la variable $_POST con la función wp_kses_post(). Por defecto es true. */
	'kses'	=> true
			
);

Agregar más funcionalidad

¿Qué pasa si queremos realizar más acciones cuando el usuario guarda los datos? Para ello podemos utilizar la acción acf/save_post, el cual nos permite agregar cualquier otra lógica que necesitamos para el negocio tanto antes como después del guardado de los datos.

Agregar más funcionalidad ANTES

Para agregar más funcionalidad antes de que se guarden los datos, solamente debemos especificar una prioridad menor a 10 en la llamada a la acción acf/save_post, por ejemplo:

<?php
// Esta función añade nuevas funcionalidades
// antes de guardar los datos enviados desde
// el Frontend.
function acf_guardar_antes( $post_id ) {
	// Por ejemplo validar los datos con otro sistema.
	ValidarDatosEnOtroSistema( $_POST );
	// O bien registrar un log.
	wp_insert_post( ['post_type' =>; 'log'], 'post_title' =>; 'Nuevo Contacto desde Frontend' ] );
}
add_action('acf/save_post', 'acf_guardar_antes', 1);

Agregar más funcionalidad DESPUÉS

Y como era de esperarse, para agregar más funcionalidades después de guardar los datos, solamente debemos cambiar la prioridad de la acción a un número mayor que 10, por ejemplo:

<?php
/*
Esta función añade nuevas funcionalidades
después de guardar los datos enviados desde
el Frontend.
*/
function acf_guardar_despues( $post_id ) {
	// Enviar email al administrador notificando del nuevo contacto.
	EmailDeNuevoContacto( $post_id );
	// También podríamos enviar un email de agradecimiento al contacto.
	EmailDeBienvenida( $post_id );
}
add_action('acf/save_post', 'acf_guardar_despues', 20);

Conclusión

Yo no soy muy fanático de crear formularios de Frontend con ACF, pero es verdad que puede ayudar a mucha gente a resolver algún que otro tipo de solicitud. Si ese es tu caso, espero que este artículo te haya valido.

Si tienes alguna duda/mejora sobre el funcionamiento de este código déjame un comentario y con gusto le echaré un ojo.

Happy coding!
Mauricio

Página 2 de 13

Funciona con WordPress & Tema de Anders Norén