En la última parte de mi serie de seis partes sobre la mejora de la experiencia del usuario (UX) en un lanzamiento de WordPress, terminaremos construyendo una página WP WP con licencia LPG. Podrá usarlo para cualquiera de sus productos de WordPress. Ya hemos creado los archivos base e inicialización para Boilerplate. Ahora discutiremos el código de lógica y analizaremos los archivos que redirigirán de forma segura a los usuarios a la página de bienvenida del backend y la página de bienvenida en sí. Definición de la lógica del complemento Después de definir las funciones set_ransient () y delete_ransient () en el archivo de inicialización, podemos construir la lógica para la redirección segura, así como para visualizar la página de bienvenida. Para administrar la lógica del complemento, creamos un archivo separado llamado Welceed-Logic.php que contiene el siguiente código:
‘wpw_welcome_page’
),
admin_url (‘plugins.php’)
));
}
}
// El submenú de la página de bienvenida.
If (! Function_exists (‘wpw_welcomome_page’)) {
// Agregar a `admin_men`.
add_action (‘admin_men’, ‘wpw_welcome_page’);
/**
* La página submenú de la bienvenida.
*
* Agregue la página de bienvenida al menú del complemento.
*
* @From 1.0.0
*/
Wpw_welcome_page function () {
// Agregue una variable global para guardar el submenús.
global $ wpw_sub_meniu;
// El submenogrado en sí.
$ wpw_sub_menu = add_submenu_page (
“Plugins.php”, // El nombre de la babosa para el menú principal (o el nombre de una página de administración de WordPress estándar).
__ (“Página de bienvenida”, “WPW”), // El texto que se mostrará en las etiquetas de título de la página cuando se selecciona el menú.
__ (‘Página de bienvenida’, ‘WPW’), // El texto que se utilizará para el menú.
“Leer”, // La capacidad requerida para que este menú se muestre al usuario.
‘wpw_welcome_page’, // El nombre de la babosa que se refiere a este menú (debería ser único para este menú).
‘wpw_welcome_page_content’, // La función que se llamará para mostrar el contenido de esta página.
);
}
}
// Visualización de la página Bienvenido.
If (! Function_exists (‘wpw_welcomome_page_content’)) {/**
* Vista de su página de bienvenida.
*
* Contenido de la página de bienvenida, es decir, HTML/CSS/PHP.
*
* @From 1.0.0
*/
Wpw_welcome_page_content () función {
// Pagina de bienvenida.
If (file_existe (wpw_dir. ‘/Welcome/welcome-view.php’)) {
reequire_once (wpw_dir. ‘/welcome/welcome-view.php’);
}
}
}
// CSS para su página de bienvenida.
If (! Function_exists (‘wpw_styles’)) {
// Pon los estilos en la cola.
add_action (‘admin_enqueue_scripts’, ‘wpw_styles’);
/**
* Estilos de cola.
*
* @param int $ gancho sufijo gancho para la página de administración actual.
* @From 1.0.0
*/
Función WPW_STYLES ($ Hook) {
// Acceda a la variable global con el submenú guardado.
global $ wpw_sub_meniu;
// Agregar estilo solo a la página de bienvenida.
if ($ gancho! = $ wpw_sub_meniu) {
devolver;
}
// bienvenidos estilos de página.
wp_enqueue_style (
‘wpw_style’,
Wpw_url. “/Welcome/css/style.css”,
matriz(),
Wpw_version,
‘todos’
);
}
} Explicación del código Aunque el código está documentado, lo daremos un paseo. El archivo comienza con el comentario de DocBlock y es seguido por ABSPATH, verificación para cancelar la operación del complemento si se accede a este archivo fuera del dominio de WordPress.
Para cumplir con los requisitos de una redirección segura de la página de la reunión, necesitamos una función personalizada conectada a la acción admin_init, que asegura que la función se ejecute correctamente cuando se inicialice el área de administración. Entonces, en la línea 16-52 creamos una función llamada wpw_safe_welcome_redirect (). Debido a que necesitamos crear un condicional complejo, siempre es mejor crear “cláusulas de guardia”. Las cláusulas de la cerca simplemente extraen todas las condiciones que conducen a la llamada para una excepción o el retorno inmediato de un valor del método y lo colocan al comienzo del método. La primera verificación prueba la presencia de nuestra transición de redirección. Aquí encontrará una función llamada get_transient (). Es otra función que la API de WordPress (las otras dos, set_ransient () y delete_ransient ()) aceptan, se ha discutido en el artículo anterior. El propósito de la función get_transient () es hacerse cargo de un valor almacenado contra una determinada transición, que adquiere un solo parámetro que es la “clave” para la transición. Nota: Esta es la misma clave que usó como parámetro en la función set_ransient () en el artículo anterior, es decir, definí _welcome_redirect_wpw. Por lo tanto, utilicé lo mismo para llevar a cabo la verificación.
Ahora, si el valor extraído no es igual a verdadero, hemos establecido el valor de nuestra transición como verdadero en el artículo anterior, entonces una devolución, lo que significa que esta función detendrá su ejecución aquí sin devolver o hacer nada. Si el transitor ha sido eliminado, la función de redirección no redirigirá a los usuarios a la página de reunión. Sin embargo, si el valor tomado de la transición almacenada es verdadero y la transferencia de redirección de activación está presente, entonces la función continuará ejecutándose donde se elimina la transitoria activa, de modo que la redirección se lleva a cabo solo una vez. He construido otra cláusula en guardia Para esta función para no redirigir a la página de bienvenida si el complemento se activa en una red de WordPress multisitio. Si el transitor de redirección estuvo presente y el complemento no se activó en una red, la función se ejecutará antes y realizará una redirección segura donde el usuario se redirige a la página de la reunión. Todas estas cláusulas de seguridad nos ayudan a redirigir a los usuarios a la página de bienvenida una vez que activan el complemento. La función wp_safe_redirect () realiza esta tarea diciéndole al servidor los $ exactos de la redirección. La función add_query_arg () ayuda a definir la ubicación. Viene en forma de una URL modificada con cadena de consulta. Según el códice, esta es una matriz asociativa que contiene un par de valores clave y la URL de la ubicación.
El slog de página en nuestro caso es wpw_welcome_page (se definirá más adelante en este artículo). Para definir su ubicación, utilicé la función de funcionamiento de administrador (). Esta función redirige a los usuarios a su-domain.com/wp-admin/plin.php?page=wpw_welcome_page. Hasta ahora, se completa el proceso de redirección segura. Pero debemos tener una página de administración de WordPress que redirige a los usuarios de complementos. Para agregar una página de bienvenida al menú de complementos, definimos una función personalizada, es decir, wpw_welcome_page () en una fila 54-79. Agregue una página submenú con add_submen_page () y almacene la ID de esta página en una variable global para usarla para poner la hoja de estilo (más sobre esto más adelante). Add_submenu_page () es una función de WordPress incorporada que agrega una página a cualquier menú, como “complementos”. Se necesita una lista de parámetros, por ejemplo
$ parent_slug
$ Page_title
$ menú_title
$ Capacidad

$ menú_slg
$ función
Definimos todos los parámetros relevantes de esta función en una fila 71-78. También conectamos la función wpw_welcome_page () a la acción admin_menu 56-57. Hasta ahora, la estructura básica de nuestra página de bienvenida está completa. Cuando los usuarios activan el complemento, serán redirigidos a una página vacía. Ahora, necesitamos agregar la página de bienvenida.
Como el último parámetro de la función add_submen_page, volvimos a llamar a otra función, que será responsable de visualizar nuestra página de bienvenida. Esta característica se llama wpw_welcome_page_content (), que incluye el archivo de vista de bienvenida, es decir, bienvenido -view.php. Después de eso, de la fila 100-129, agregamos una función que es responsable de sentarse en la cola de estilo de nuestra página de bienvenida. Nota: Quería que la hoja de estilo se coloque en la cola solo en la página de bienvenida, por lo que creamos una variable global para almacenar nuestro submenú de identificación de página en la variable llamada $ wpw_sub_men. Utilizo un parámetro $ Hook, que me ayuda a comparar la ID del administrador actual con el ID de identificación, es decir, $ wpw_sub_menu, para que WP pueda poner en la hoja de estilo en la página de bienvenida con un guardia de cláusula simple. La contención de la bienvenida Página Para administrar la visualización de la página de bienvenida, creé un archivo llamado Welcome-View.php. Este archivo es responsable de todo el código HTML/CSS de la página de bienvenida donde redirigimos a nuestros usuarios. El código de este archivo se ve así:

! ?>

inicio

Paso #1: lorem ipsum dolor sit, consecuencia adipiscing elit.
Paso #2: Cras sed Sapien Quam. Sed dapibus est id enim cilisis lig.
paso #3: tortor est congula ligula, i adipiscing quam ligula ut purus.

¿Qué hay dentro?

!

En la fila 1-20 encontrará DocBlock estándar WP PHP y una verificación de abspath, también puede definir variables que se utilizarán en HTML.
Las líneas 22-78 contienen todos los contenidos, clases, activos, etc. Encontré algunas clases utilizadas por el equipo base de WordPress para construir una apariencia simple de la columna basada en la cuadrícula. La aparición de una página de bienvenida que puede hacer con este código contiene los siguientes elementos:
El nombre del complemento, la versión y el logotipo
Un paso de tutorial de inicio con pasta de video
Las funciones del complemento en una aparición en dos columnas
Estilos personalizados con archivo style.css
Página WP WP Boilerplate: finalmente la prueba es el momento de configurar la página. Para implementarlo, deberá tener la siguiente configuración:
WP-WeVever-Page-Boilerplate descargado de Github
Un sitio demostrativo con WordPress instalado
Bienvenido Página Plugin Boilerplate Instalado y activado
Después de haber activado el complemento, será redirigido a la página de bienvenida. Desde aquí puede ver la aparición completa de la página de bienvenida en la captura de pantalla a continuación: Primero, hay una breve introducción y el logotipo del complemento. Entonces puedes encontrar los pasos iniciales. Sigue un video tutorial. Proporciona una vista en tiempo más real de cómo funciona el complemento. Finalmente, hay una sección que enumera las características prominentes del producto. También puede agregar secciones sobre colaboradores, funciones nuevas y futuras, así como el formulario de suscripción. Vamos a concluir que esta termina la serie sobre la mejora de la experiencia del usuario del usuario de WordPress. Después de implementar estos pasos yo mismo, tuve una mayor cantidad de usuarios que se quedaron con mi complemento. Espero trabajar para ti también. Finalmente, puedes ver todos mis artículos en mi página de perfil y seguirme en mi blog y/o contactar en Twitter @mrahmadawais; donde escribo sobre el trabajo de desarrollo fluye en el contexto de WordPress. Como de costumbre, no dude en dejar preguntas o comentarios a continuación, e intentaré responder a cada uno de ellos.