• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Mostrar mensajes en la administración de WordPress y en Gutenberg

Mostrar mensajes en la administración de WordPress y en Gutenberg

Mostrar mensajes en la administración de WordPress y en Gutenberg

[ 9 diciembre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Mensaje backend en editor Gutenberg

 

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>';
}

Tener en cuenta que dentro de la función dcms_general_messages() pueden haber condicionales para mostrar este mensaje sólo en algunas pantallas del backend de WordPress.

 
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
	);
}

Este código sólo funcionará cuando se cargue Gutenberg, si deseas mostrar el mensaje en una entrada o página específica tendrías que añadir condicionales dentro de la función dcms_enqueue_notice_block()

 
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	
}
Algunos posibles valores para XXX: upload, options-general, plugins, users, edit-post, post, edit-page, page, widgets, themes, nav-menus

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	
}
Para averiguar el ID, lo puedes localizar al ingresar a editar una entrada o página en la barra de la url busca el parámetro “post=XX”

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar notificaciones por usuario en la administración de wordpressMostrar notificaciones por usuario en la administración de WordPress
  • Eliminar Shortcodes que no usas en WordPressEliminar Shortcodes que no usas en WordPress
  • Herramienta de Salud del Sitio en WordPressHerramienta de Salud del Sitio en WordPress
  • Administrar tabla wp_options desde el Backend de WordPressAdministrar tabla wp_options desde el Backend de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Extraer un sitio desde un multisite

Tabla de Contenidos en WordPress sin plugins

Herramienta de Salud del Sitio en WordPress

Asignar entradas a una categoría de acuerdo al título en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados