Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Construyendo una Página de Bienvenida para su Producto WordPress: Introducción

by
Length:ShortLanguages:
This post is part of a series called Building a Welcome Page for Your WordPress Product.
Building a Welcome Page for Your WordPress Product: WP Transients API

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Justo después de que actualizo WordPress, es redirigido hacia la vista de una página de bienvenida. Esta página de bienvenida ayuda a mejorar la comprehensión de las nuevas funciones y arreglos de errores en la actualización actual. Es igual en el caso con algunos plugins. Cuando los usuarios instalan uno de estos plugins o los actualizan, son redireccionados hacia una página de bienvenida. Esa página de bienvenida es lo que vamos a construir en esta serie.

A través del curso de ésta serie de cuatro partes, exploraremos el proceso de crear una página de bienvenida para un plugin WordPress. Para el final de la serie, usted sabrá cómo hacer el código de una página de bienvenida, la cual puede contener un vídeo de promoción, funciones de plugin, un formulario de suscripción, etc. Así que, vamos hacerlo.

La Estrategia

Antes de comenzar, déjeme explicarle cómo llevaré ésta serie. Hay cuatro partes de esta serie:

  • Parte uno: Introducción a las páginas de bienvenida y la discusión de la arquitectura de un plugin.
  • Parte dos: ¿Qué son los transeúntes en WordPress? Explicación con algunos ejemplos.
  • Parte tres: Construyendo la Página de Bienvenida #1: La lógica detrás del plugin de la página de bienvenida.
  • Parte cuatro: Construyendo la Página de Bienvenida #2: Código para crear una página de bienvenida con HTML & CSS.

¿Qué es una Página de Bienvenida?

Si usted empieza creando una página para su plugin WordPres que enumere todas las características y los pasos relacionados al producto, entonces esa página puede ser llamada una página de bienvenida.

La idea de crear está página es para brindar a los usuarios algo de información sobre el producto que acaban de instalar. Puede tener cualquier información relacionada a su producto tal como un vídeo de explicación o una guía sobre lo que hay que hacer después.

Eso es lo que vamos a construir.

Componentes

Voy a crear una Plantilla de Página de Bienvenida WP en el formulario de un plugin WordPress que podrá ser utilizado en cualquier proyecto. Vamos a examinar y estudiar la arquitectura del plugin de nuestra Página de Bienvenida. Hay dos componentes de un plugina de una página de bienvenida:

  • Página de Bienvenida: Construida con PHP, HTML y CSS
  • Redirección: La lógica para redireccionar de forma segura la activación del usuario bajo la página de bienvenida.

Página de Bienvenida

La página de bienvenida en su totalidad es el ingrediente principal de ésta serie. Ésta puede contener elementos como:

  • características claves de su producto
  • un vídeo tutorial o para explicación
  • un formulario de suscripción para su boletín informativo
  • plugins recomendados y prerrequisitos
  • una sección para las Preguntas Preguntadas con Frecuencia o FAQ
  • comparación entre la versión gratis y la premium, etc.

Vamos a construir esta página con PHP, HTML y CSS. Algunas partes de esta página serán dinámicas, por ejemplo; el número de versión de su producto.

Pseudo-Algoritmos para Redirección

¿Qué tal si escribimos algo como un pseudo-algoritmo para la redirección? Siendo un desarrollador WordPress, creo que es una parte importante de su flujo de desarrollo, empezar con un pseudo-algoritmo (y, de manera opcional, convertirlo a pseudo-código). 

Por lo tanto, el plugin de la página de bienvenida necesita redireccionar al usuario a la página de bienvenida. Tal como los pasos a continuación:

  • El plugin está instalado y activado.
  • Ajuste un transeúnte cada 60 segundos de la activación del plugin.
  • Revise si existe el ajuste temporal.
  • Si el transeúnte no está configurado, no lo haga.
  • Garantice si activa el formulario de red o de sitios al por mayor.
  • Si el transeúnte existe, borre el transeúnte y redireccione de forma segura al usuario a nuestra Página de Bienvenida.

Prácticamente, eso es todo lo que hay que hacer par éste plugin. En el siguiente artículo, explicaré cómo los transeúntes API funcionan en WordPress.

Ejemplos de Páginas de Bienvenida

Hasta ahora he mencionado la línea de acción que voy a adoptar mientras elaboró el código de la página de bienvenida para mi plugin. Antes de realizar los detalles técnicos, vamos a ver algunos ejemplos de páginas de bienvenida en la comunidad WordPress.

La mayoría de los plugins WordPress no están acostumbrados a la idea de añadir una página de bienvenida. Me pregunto porqué es así. Creo que las páginas de bienvenida son super en cuanto a la experiencia de usuarios se refiere. Ayudan a conectar y llenar el espacio en lugar de dejar a los usuarios en el medio de la nada justo después de que instalan el producto.

Aquí están algunos ejemplos de páginas de bienvenida.

La Página de Bienvenida por defecto de WordPress.

No sería justo si pasar por alto la página de bienvenida por defecto que aparece cuando actualiza WordPress. Al momento de escribir éste tutorial, era la versión de WordPress número 4.4.2 que tiene una funcionalidad de pantalla de bienvenida.

Lo que más me gusta de ésta es el vídeo y la pestaña Credits, la cual saluda a todos los colaboradores (¡y también puede encontrar mi nombre!). Pero lo mejor es que entiende la idea.

WordPress Default Welcome Page

Además, notifica a los usuarios sobre la seguridad y los costos de mantenimiento. Luego, muestra los temas por defecto más recientes, por ejemplo; Twenty Sixteen.

Twenty Sixteen Welcome Page

WooCommerce

Si pregunta por la definición de un perfecto flujo de trabajo de inicio, entonces WooCommerce es la respuesta. Ésta tiene, por mucho, la página de bienvenida mejor equipada, o podría llamarla un flujo de trabajo. Ayuda a los usuarios a configurar el plugin mediante la revisión de los predeterminados o los personalizados.

WooCommerce welcome page

Tras la activación, ayuda a los usuarios a instalar los siguientes elementos:

  • La Configuración de la Página
  • La Configuración Local de Almacenamiento
  • La configuración de Envío & Impuesto
  • Configurando los pagos

Y finalmente ayuda a añadir su primer producto.

WooCommerce page setup

En resumen, ofrece una guía completa para sus usuarios.

Varios nombres pueden ser agregados a la lista. Pero, por razones de simpleza, solamente voy a mencionar algunas de las más famosas como Easy Digital Downloads, Jetpack, bbPress, etc., las cuales, también, tiene páginas de bienvenida.

¿Por qué construyo una Página de Bienvenida?

Inspirada por estos productos, añadí una página de bienvenida en uno de mis plugin, relativamente nuevo, CF7 Customizer. Mi plugin necesita que el usuario instale Contact Form 7, y luego para crear una página con código pequeño de contact form 7 dentro de él y finalmente personalizarlo.

No había mejor manera de comunicar estos pasos que a través de redireccionar a los usuarios a una página de bienvenida con información de Inicio. De otro modo, un usuario nuevo que instala éste plugin quedaría en medio de la nada.

Después éste muestra las funciones del plugin, un vídeo corto y un formulario de suscripción.

CF7 welcome page setup

¿Qué sigue?

Bueno, por ahora ya sabe cómo es que una página de bienvenida puede ayudarle a mejorar la experiencia de usuario y que vamos a hacer al respecto. En el siguiente artículo, resaltaré algunos hechos interesantes sobre los transeúntes en WordPress y sus roles en la construcción de una página de bienvenida.

Finalmente, puede recoger todos mis cursos y tutoriales de mi página de perfil y puede seguirme en mi blog y/o dirigirse a mi cuenta en Twitter @mrahmadawais donde escribo acerca de flujos de desarrollo en el contexto de WordPress.

Como siempre, no dude en dejar preguntas o comentarios abajo, intentaré responder cada uno de ellos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.