WordPress permite mostrar mensajes en el backend del sitio cuando se realiza alguna acción, por ejemplo al guardar una entrada, al eliminar alguna página, etc. Sin embargo en algunos casos nos puede resultar útil mostrar un mensaje permanente para nuestros usuarios.
Resultado Final
Al final obtendremos un mensaje en el backend de WordPress, por ejemplo al editar una entrada en Gutenberg, tal como se muestra en la siguiente imagen:
Código General
Para que el mensaje aparezca en cualquier parte del backend de WordPress podemos usar el siguiente código:
add_action( 'admin_notices', 'dcms_general_messages' );
function dcms_general_messages() {
echo '<div class="notice notice-error is-dismissible"><p>';
echo 'Tener cuidado al editar, consultar antes al autor. <a href="#" target="_blank">Contactar</a>';
echo '</p></div>';
}
En el código anterior:
- Usamos el hook llamado admin_notices el cual hace referencia a la función dcms_general_messages()
- Dentro de esta función se imprime el mensaje a través de la función echo() de PHP
- El código sigue una estructura estándar, se tiene que especificar las clases CSS para estilizar el mensaje
- notice: Clase general para dar crear el recuadro
- notice-xxxx: Clase específica para pintar el color al inicio del recuadro, los posibles valores de xxxx son: error, warning, success, info
- is-dismissible: Clase para que aparezca una “x” para cerrar el mensaje
- Como parte del contenido podemos usar cualquier etiqueta HTML, en nuestro ejemplo hemos usado un texto con un enlace con la url # por defecto
Código Específico para Gutenberg
Si queremos que el mensaje aparezca cuando se esta mostrando contenido con Gutenberg entonces el código tendrá dos partes:
La primera servirá para el registro de un archivo javascript, tal como se muestra en el siguiente código:
add_action( 'enqueue_block_editor_assets', 'dcms_enqueue_notice_block' );
function dcms_enqueue_notice_block() {
wp_enqueue_script(
'script-notice-blocks',
get_stylesheet_directory_uri().'/custom.js',
array(),
"1.0",
true
);
}
En el código anterior:
- Utilizamos el hook enqueue_block_editor_assets que es un hook que usa Gutenberg al cargar el editor, este hook hace referencia a la función dcms_enqueue_notice_block()
- Dentro de la función usamos la función de WordPress wp_enqueue_script() para encolar el archivo javascript
- La función acepta varios parámetros, el primero es el identificador
- El segundo parámetro es la ruta del archivo javascript, en nuestro caso estará en la misma ubicación que el functions.php y se llamará custom.js
- El tercero son las dependencias, el cuarto la versión
- El último parámetro indica que se cargue el archivo en el footer
La otra parte del código se encontrará dentro del archivo javascript registrado anteriormente y mostrará el mensaje en Gutenberg.
( function( wp ) {
wp.data.dispatch('core/notices').createNotice(
'error',
'Esta entrada no debería ser modificada sin el consentimiento del autor.',
{
isDismissible: true,
actions: [
{
url: '#',
label: 'Contactar'
}
]
}
);
} )( window.wp );
En el código anterior:
- Este código javascript crea un bloque para ejecutar el objeto window.wp que ya ha sido cargado con Gutenberg
- Se usan las funciones del core de Gutenberg para mostrar el mensaje, se hace referencia al método createNotice
- El primer parámetro indica el tipo de mensaje, puede ser: success, info, warning o error
- El siguiente parámetro es el texto del mensaje
- Luego pasamos un objeto en donde se indica isDismissible para que se pueda cerrar el mensaje
- Luego un array de acciones, en donde pasamos un objeto que nos creará un enlace final, el texto del enlace es Contactar y la url por defecto es #
Condicionales en el código
Es posible que necesites mostrar el mensaje sólo en algunos lugares del backend de WordPress, para esto puedes usar condicionales, esto lo haremos usando PHP y las funciones de WordPress, por ejemplo:
Si queremos mostrar el mensaje sólo en una determinada pantalla del backend podemos usar el siguiente código, en donde XXX será el identificador de la pantalla.
$screen = get_current_screen();
if ($screen->id == 'XXX'){
//codigo
}
Si queremos mostrar el mensaje para una determinada entrada, en donde XX es el ID de la entrada
global $post;
if ($post->ID == XX){
//codigo
}
Conclusión
Tal como hemos visto, es posible agregar mensajes en el backend de WordPress ya sea en las diferentes pantallas del sitio o mensajes específicos que se muestren como parte del editor Gutenberg.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...